Merge pull request #9297 from overleaf/ta-galileo-module

Create Galileo Module

GitOrigin-RevId: 0d9dfeebc150bd6a0d828f55be47f9d9f1a70d66

services/web/app/src/Features/Authentication/AuthenticationController.js

@@ -413,6 +413,8 @@ const AuthenticationController = {
     return next()
   },
 
+  checkCredentials,
+
   requireBasicAuth: function (userDetails) {
     const userDetailsMap = new Map(Object.entries(userDetails))
     return function (req, res, next) {

services/web/app/src/Features/Project/ProjectController.js

@@ -1116,6 +1116,8 @@ const ProjectController = {
               !Features.hasFeature('saas') ||
               (user.features && user.features.symbolPalette)
 
+            const galileoEnabled = shouldDisplayFeature('galileo')
+
             const dictionaryEditorEnabled =
               !Features.hasFeature('saas') ||
               dictionaryEditorAssignment?.variant === 'enabled'
@@ -1197,6 +1199,7 @@ const ProjectController = {
               debugPdfDetach,
               showNewSourceEditorOption,
               showSymbolPalette,
+              galileoEnabled,
               showStopOnFirstError,
               detachRole,
               metadata: { viewport: false },

services/web/app/views/project/editor/editor-pane.pug

@@ -23,13 +23,13 @@
 
 		.editor-container.full-size(
 			ng-show="ui.view == 'editor' && editor.multiSelectedCount === 0"
-			vertical-resizable-panes="symbol-palette-resizer"
+			vertical-resizable-panes="south-pane-resizer"
-			vertical-resizable-panes-hidden-externally-on="symbol-palette-toggled"
+			vertical-resizable-panes-hidden-externally-on="south-pane-toggled"
 			vertical-resizable-panes-hidden-initially="true"
 			vertical-resizable-panes-default-size="250"
 			vertical-resizable-panes-min-size="250"
 			vertical-resizable-panes-max-size="336"
-			vertical-resizable-panes-resize-on="layout:flat-screen:toggle,symbol-palette-toggled"
+			vertical-resizable-panes-resize-on="layout:flat-screen:toggle,south-pane-toggled"
 		)
 			.div(vertical-resizable-top)
 
@@ -58,7 +58,9 @@
 				if !isRestrictedTokenMember
 							include ./review-panel
 
-			if moduleIncludesAvailable('editor:symbol-palette')
+			if moduleIncludesAvailable('editor:symbol-palette') || moduleIncludesAvailable('editor:galileo')
 				.div(vertical-resizable-bottom)
-					!= moduleIncludes('editor:symbol-palette', locals)
+					if moduleIncludesAvailable('editor:symbol-palette')
-			
+						!= moduleIncludes('editor:symbol-palette', locals)
+					if moduleIncludesAvailable('editor:galileo')
+						!= moduleIncludes('editor:galileo', locals)

services/web/app/views/project/editor/main.pug

@@ -18,7 +18,7 @@ include ./left-menu
 			ng-class="{ 'ide-history-open' : (ui.view == 'history' && history.isV2) }",
 			layout="main",
 			ng-hide="state.loading",
-			resize-on="layout:chat:resize,history:toggle,layout:flat-screen:toggle,symbol-palette-toggled",
+			resize-on="layout:chat:resize,history:toggle,layout:flat-screen:toggle,south-pane-toggled",
 			minimum-restore-size-west="130"
 			custom-toggler-pane=hasFeature('custom-togglers') ? "west" : false
 			custom-toggler-msg-when-open=hasFeature('custom-togglers') ? translate("tooltip_hide_filetree") : false

services/web/app/views/project/editor/meta.pug

@@ -22,6 +22,7 @@ meta(name="ol-pdfjsVariant" content=pdfjsVariant)
 meta(name="ol-debugPdfDetach" data-type="boolean" content=debugPdfDetach)
 meta(name="ol-showNewSourceEditorOption" data-type="boolean" content=showNewSourceEditorOption)
 meta(name="ol-showSymbolPalette" data-type="boolean" content=showSymbolPalette)
+meta(name="ol-galileoEnabled" data-type="boolean" content=galileoEnabled)
 meta(name="ol-detachRole" data-type="string" content=detachRole)
 meta(name="ol-showUpgradePrompt" data-type="boolean" content=showUpgradePrompt)
 meta(name="ol-showStopOnFirstError" data-type="boolean" content=showStopOnFirstError)

services/web/frontend/js/ide/editor/EditorManager.js

@@ -50,7 +50,10 @@ export default EditorManager = (function () {
         toggleSymbolPalette: () => {
           const newValue = !this.$scope.editor.showSymbolPalette
           this.$scope.editor.showSymbolPalette = newValue
-          ide.$scope.$emit('symbol-palette-toggled', newValue)
+          if (newValue && this.$scope.editor.showGalileo) {
+            this.$scope.editor.toggleGalileo()
+          }
+          ide.$scope.$emit('south-pane-toggled', newValue)
           eventTracking.sendMB(
             newValue ? 'symbol-palette-show' : 'symbol-palette-hide'
           )
@@ -59,6 +62,16 @@ export default EditorManager = (function () {
           ide.$scope.$emit('editor:replace-selection', symbol.command)
           eventTracking.sendMB('symbol-palette-insert')
         },
+        showGalileo: false,
+        toggleGalileo: () => {
+          const newValue = !this.$scope.editor.showGalileo
+          this.$scope.editor.showGalileo = newValue
+          if (newValue && this.$scope.editor.showSymbolPalette) {
+            this.$scope.editor.toggleSymbolPalette()
+          }
+          ide.$scope.$emit('south-pane-toggled', newValue)
+          eventTracking.sendMB(newValue ? 'galileo-show' : 'galileo-hide')
+        },
         multiSelectedCount: 0,
       }
 

services/web/frontend/js/ide/editor/directives/aceEditor.js

@@ -149,6 +149,12 @@ App.directive(
           }
         })
 
+        ide.$scope.$on('galileo-toggled', (event, isToggled) => {
+          if (!isToggled) {
+            editor.focus()
+          }
+        })
+
         scope.$watch('autoPairDelimiters', autoPairDelimiters => {
           if (autoPairDelimiters) {
             return editor.setOption('behavioursEnabled', true)

services/web/frontend/js/shared/context/editor-context.js

@@ -33,6 +33,9 @@ EditorContext.Provider.propTypes = {
     showSymbolPalette: PropTypes.bool,
     toggleSymbolPalette: PropTypes.func,
     insertSymbol: PropTypes.func,
+    showGalileo: PropTypes.bool,
+    toggleGalileo: PropTypes.func,
+    insertGalileoAutocomplete: PropTypes.func,
     isProjectOwner: PropTypes.bool,
     isRestrictedTokenMember: PropTypes.bool,
     permissionsLevel: PropTypes.oneOf(['readOnly', 'readAndWrite', 'owner']),
@@ -76,6 +79,8 @@ export function EditorProvider({ children, settings }) {
   const [permissionsLevel] = useScopeValue('permissionsLevel')
   const [showSymbolPalette] = useScopeValue('editor.showSymbolPalette')
   const [toggleSymbolPalette] = useScopeValue('editor.toggleSymbolPalette')
+  const [showGalileo] = useScopeValue('editor.showGalileo')
+  const [toggleGalileo] = useScopeValue('editor.toggleGalileo')
 
   useEffect(() => {
     if (ide?.socket) {
@@ -137,6 +142,14 @@ export function EditorProvider({ children, settings }) {
     )
   }, [])
 
+  const insertGalileoAutocomplete = useCallback(text => {
+    window.dispatchEvent(
+      new CustomEvent('editor:insert-galileo-completion', {
+        detail: text,
+      })
+    )
+  }, [])
+
   const value = useMemo(
     () => ({
       cobranding,
@@ -149,6 +162,9 @@ export function EditorProvider({ children, settings }) {
       showSymbolPalette,
       toggleSymbolPalette,
       insertSymbol,
+      showGalileo,
+      toggleGalileo,
+      insertGalileoAutocomplete,
     }),
     [
       cobranding,
@@ -160,6 +176,9 @@ export function EditorProvider({ children, settings }) {
       showSymbolPalette,
       toggleSymbolPalette,
       insertSymbol,
+      showGalileo,
+      toggleGalileo,
+      insertGalileoAutocomplete,
     ]
   )
 

services/web/frontend/stylesheets/_style_includes.less

@@ -108,5 +108,6 @@
 // module styles
 // TODO: find a way for modules to add styles dynamically
 @import 'modules/symbol-palette.less';
+@import 'modules/galileo.less';
 
 @import 'modules/admin-panel.less';

services/web/frontend/stylesheets/core/ol-light-variables.less

@@ -137,3 +137,8 @@
 @symbol-palette-selected-tab-bg: #fff;
 @symbol-palette-selected-tab-color: @ol-blue;
 @symbol-palette-text-shadow-color: @ol-blue-gray-1;
+
+// Galileo
+@galileo-bg: #fff;
+@galileo-color: @ol-blue-gray-3;
+@galileo-header-background: @ol-blue-gray-1;

services/web/frontend/stylesheets/core/variables.less

@@ -1126,3 +1126,12 @@
 @symbol-palette-selected-tab-bg: @ol-blue-gray-4;
 @symbol-palette-selected-tab-color: #fff;
 @symbol-palette-text-shadow-color: @ol-blue-gray-6;
+
+// Galileo
+@galileo-bg: @ol-blue-gray-4;
+@galileo-color: #fff;
+@galileo-header-background: @ol-blue-gray-5;
+
+// Editor fonts
+@editor-font-lucida: 'Lucida Console', 'Source Code Pro', monospace;
+@editor-font-monaco: Monaco, Menlo, 'Ubuntu Mono', 'Consolas', monospace;

services/web/frontend/stylesheets/modules/galileo.less

@@ -0,0 +1,66 @@
+.galileo {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 220px;
+  background-color: @galileo-bg;
+  color: @galileo-color;
+
+  .galileo-header {
+    display: flex;
+    background-color: @galileo-header-background;
+
+    :first-child {
+      flex: 1;
+    }
+
+    .galileo-close-button {
+      background: transparent;
+      color: @galileo-color;
+      padding-left: @padding-sm;
+      padding-right: @padding-sm;
+      margin-left: @margin-xs;
+      font-size: 24px;
+      font-weight: bold;
+      line-height: 1;
+    }
+  }
+
+  .galileo-font-lucida {
+    font-family: @editor-font-lucida;
+  }
+
+  .galileo-font-monaco {
+    font-family: @editor-font-monaco;
+  }
+
+  .galileo-body {
+    padding: 5px;
+    overflow-y: auto;
+
+    .galileo-items {
+      h2 {
+        font-size: 120%;
+        font-weight: normal;
+        padding: 0;
+        margin: 5px 0;
+        color: inherit;
+      }
+
+      .galileo-item {
+        display: flex;
+        align-items: flex-start;
+        gap: 5px;
+        margin-bottom: 5px;
+
+        .galileo-item-text {
+          flex: 1;
+          background-color: white;
+          color: black;
+          white-space: break-spaces;
+        }
+      }
+    }
+  }
+}