diff --git a/services/web/app/src/Features/Authentication/AuthenticationController.js b/services/web/app/src/Features/Authentication/AuthenticationController.js index f61fcc4bd4..5445e71101 100644 --- a/services/web/app/src/Features/Authentication/AuthenticationController.js +++ b/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) { diff --git a/services/web/app/src/Features/Project/ProjectController.js b/services/web/app/src/Features/Project/ProjectController.js index 65a1b80356..6439cc4d11 100644 --- a/services/web/app/src/Features/Project/ProjectController.js +++ b/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 }, diff --git a/services/web/app/views/project/editor/editor-pane.pug b/services/web/app/views/project/editor/editor-pane.pug index e489a2cdb5..c42ce84e30 100644 --- a/services/web/app/views/project/editor/editor-pane.pug +++ b/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-hidden-externally-on="symbol-palette-toggled" + vertical-resizable-panes="south-pane-resizer" + 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) diff --git a/services/web/app/views/project/editor/main.pug b/services/web/app/views/project/editor/main.pug index 3ae949173d..5d118ad5ea 100644 --- a/services/web/app/views/project/editor/main.pug +++ b/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 diff --git a/services/web/app/views/project/editor/meta.pug b/services/web/app/views/project/editor/meta.pug index 7d8c7c9b69..626dab6731 100644 --- a/services/web/app/views/project/editor/meta.pug +++ b/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) diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index 716b384534..a788344784 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/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, } diff --git a/services/web/frontend/js/ide/editor/directives/aceEditor.js b/services/web/frontend/js/ide/editor/directives/aceEditor.js index 914b5ed643..d02fa432e7 100644 --- a/services/web/frontend/js/ide/editor/directives/aceEditor.js +++ b/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) diff --git a/services/web/frontend/js/shared/context/editor-context.js b/services/web/frontend/js/shared/context/editor-context.js index 1fdda391c7..5251c325cd 100644 --- a/services/web/frontend/js/shared/context/editor-context.js +++ b/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, ] ) diff --git a/services/web/frontend/stylesheets/_style_includes.less b/services/web/frontend/stylesheets/_style_includes.less index a4dcc74e3f..19da0b49bf 100644 --- a/services/web/frontend/stylesheets/_style_includes.less +++ b/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'; diff --git a/services/web/frontend/stylesheets/core/ol-light-variables.less b/services/web/frontend/stylesheets/core/ol-light-variables.less index dab5de8f16..d95333b2fe 100644 --- a/services/web/frontend/stylesheets/core/ol-light-variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index a7f98945eb..de714225dc 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/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; diff --git a/services/web/frontend/stylesheets/modules/galileo.less b/services/web/frontend/stylesheets/modules/galileo.less new file mode 100644 index 0000000000..55a044caf3 --- /dev/null +++ b/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; + } + } + } + } +}