From 9a4e11a75ea16c3f445d3f229aef156fb7c66b0a Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Mon, 30 Oct 2023 14:22:01 -0400 Subject: [PATCH 1/9] wip: linting styles --- src/assets/styles/components/_web-ide.scss | 56 ++++++++++------------ 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/src/assets/styles/components/_web-ide.scss b/src/assets/styles/components/_web-ide.scss index 313f90172..b9c8a52b7 100644 --- a/src/assets/styles/components/_web-ide.scss +++ b/src/assets/styles/components/_web-ide.scss @@ -5,7 +5,7 @@ } } - color: white; + color: $color-white; .editor.current-file-path { border-bottom: 1px solid transparent; @@ -13,13 +13,12 @@ .default-window-option { span { - color: white; + color: $color-white; } } .name-input { - .validation-message { color: $color-danger; } @@ -51,7 +50,7 @@ } .file-browser button > span { - color: white !important; + color: $color-white !important; } .file-browser .file.file-selected > span { @@ -68,7 +67,6 @@ } .purple { - button[disabled]:hover, button[disabled] { color: #5e5e5e !important; @@ -76,23 +74,25 @@ .default-window-option span { - color: white !important; + color: $color-white !important; } .editor-window .default-window .default-window-container { background: $color-pureblack !important; - color: white; + color: $color-white; } .no-projects { - color: white; + color: $color-white; .docs-link { color: #ee81ee !important; } } - color: white; + color: $color-white; + + color: rgb(105, 105, 105); .name-input { .name-input-container { @@ -101,9 +101,10 @@ outline-color: #ea4c89 !important; } } + .validation-message { - margin-top: 8px; color: $color-danger; + margin-top: 8px; } & > input.invalid { @@ -125,20 +126,19 @@ .editor-window .cancel-button { color: rgb(105, 105, 105);; } + .editor-window .cancel-button:hover { - color: white; + color: $color-white; } .package-install-window { - background: white; + background: $color-white; } .editor.current-file-path { border-bottom: 1px solid lightgray; } - color: rgb(105, 105, 105); - .default-window-option { span { @@ -199,13 +199,11 @@ .akamai, .light { - .editor-window { border: 1px solid $color-lightergrey; } .name-input { - .validation-message { color: $color-danger; } @@ -230,7 +228,7 @@ color: rgb(105, 105, 105); .package-install-window { - background: white; + background: $color-white; } .editor.current-file-path { @@ -267,7 +265,7 @@ } .editor-window button:hover { - color: white; + color: $color-white; //rgb(105,105,105); } @@ -295,8 +293,6 @@ } .web-ide { - - .cancel-button { margin-left: 10px; } @@ -356,7 +352,7 @@ .add-file-icon { background: transparent; border: none; - color: white; + color: $color-white; margin: 0; outline: none !important; padding: 0; @@ -375,7 +371,7 @@ padding: 20px; .file-menu { - color: white; + color: $color-white; display: flex; flex-direction: row; @@ -506,7 +502,7 @@ .editor-menu { align-items: baseline; border-bottom: 1px solid #2e2e2e; - color: white; + color: $color-white; display: flex; flex-direction: row; justify-content: left; @@ -577,10 +573,10 @@ } .name-input-container { + align-items: center; display: flex; flex-direction: row; - align-items: center; .invalid-project-name { margin-left: 15px; @@ -735,16 +731,16 @@ } .package-install-window { - .install-package-button { - width: 105px; - display: inline-flex; align-items: center; + display: inline-flex; justify-content: center; + width: 105px; .install-package-status-icon { } } + &.github { line-height:0.5em; } @@ -807,8 +803,8 @@ .project-name-invalid-text { color: $color-danger !important; - margin-bottom: 20px; display: block; + margin-bottom: 20px; } @@ -832,11 +828,11 @@ width: 40px; i { - color: white; + color: $color-white; &.not-searching { - color: white; //rgba(0,255,0, 0.1); + color: $color-white; //rgba(0,255,0, 0.1); } From 3e5860a9c87b77a08d830a3105dceebb7ccdb2b3 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 31 Oct 2023 10:37:34 -0400 Subject: [PATCH 2/9] store unsaved updates to editor files in local storage by compute_stack_id and filepath. when saved to instance, remove from local storage. --- .../instance/functions/manage/index.js | 49 +++++++++++++++---- src/components/shared/webide/Editor.js | 2 +- src/components/shared/webide/index.js | 26 +++++++--- src/functions/state/editorCache.js | 3 ++ 4 files changed, 62 insertions(+), 18 deletions(-) create mode 100644 src/functions/state/editorCache.js diff --git a/src/components/instance/functions/manage/index.js b/src/components/instance/functions/manage/index.js index 5c5ca5889..ae2c6c364 100644 --- a/src/components/instance/functions/manage/index.js +++ b/src/components/instance/functions/manage/index.js @@ -14,6 +14,7 @@ import deployComponent from '../../../../functions/api/instance/deployComponent' import restartInstance from '../../../../functions/api/instance/restartInstance'; import useInstanceAuth from '../../../../functions/state/instanceAuths'; +import useEditorCache from '../../../../functions/state/editorCache'; import ApplicationsEditor from '../../../shared/webide'; import CustomFunctionsEditor from './CustomFunctionsEditor'; @@ -45,19 +46,19 @@ function getDeployTargets(instanceList, instanceAuthList, thisCsId, auth) { return memo; } - const [ major, minor ] = deployTarget?.version.split('.') || []; + const [ major, minor ] = deployTarget?.version.split('.') || []; // exclude < 4.2 if (parseInt(major, 10) >= 4 && parseInt(minor, 10) >= 2) { - memo.push({ + memo.push({ isCurrentInstance: csId === thisCsId, auth, instance }); - } + } return memo; @@ -69,22 +70,50 @@ function ManageIndex({ refreshCustomFunctions, loading }) { const { compute_stack_id } = useParams(); const registration = useStoreState(instanceState, (s) => s.registration); - const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions); + const { fileTree } = useStoreState(instanceState, (s) => s.custom_functions); const auth = useStoreState(instanceState, (s) => s.auth); const url = useStoreState(instanceState, (s) => s.url); const [majorVersion, minorVersion] = (registration?.version || '').split('.') || []; const supportsApplicationsAPI = parseFloat(`${majorVersion}.${minorVersion}`) >= 4.2; const instances = useStoreState(appState, (s) => s.instances); - const [instanceAuths] = useInstanceAuth({}); + const [ instanceAuths ] = useInstanceAuth({}); + const [ editorCache, setEditorCache ] = useEditorCache({}); const theme = useStoreState(appState, (s) => s.theme); const [ restartingInstance, setRestartingInstance ] = useState(false); const alert = useAlert(); + function removeFileFromLocalStorage({ path }) { + + const updatedCache = {...editorCache}; + const fileKey = `${compute_stack_id}-${path}`; + + if (fileKey in updatedCache) { + console.log('key exists. deleting from: ', updatedCache); + delete updatedCache[fileKey]; + console.log('updatedCache after delete:', updatedCache); + } + + setEditorCache({ + ...updatedCache + }); + } + + function saveFileToLocalStorage({ path, content }) { + + const fileKey = `${compute_stack_id}-${path}`; + + setEditorCache({ + ...editorCache, + [fileKey]: content + }); + + } + async function restartWithLoadingState({ auth: instanceAuth, url: instanceUrl }) { setRestartingInstance(true); - setTimeout(async () => { + setTimeout(async () => { await restartInstance({ auth: instanceAuth, url: instanceUrl }); setRestartingInstance(false); }, 100); @@ -94,7 +123,7 @@ function ManageIndex({ refreshCustomFunctions, loading }) { // save file to instance async function saveCodeToInstance(selectedFile, restartRequired) { - const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/'); + const filepathRelativeToProjectDir = selectedFile.path.split('/').slice(2).join('/'); const payload = { auth, url, @@ -109,11 +138,12 @@ function ManageIndex({ refreshCustomFunctions, loading }) { alert.error(message); } - if (restartRequired) { await restartWithLoadingState({ auth, url }); } + removeFileFromLocalStorage({ path: selectedFile.path }); + await refreshCustomFunctions(); } @@ -416,10 +446,11 @@ function ManageIndex({ refreshCustomFunctions, loading }) { return supportsApplicationsAPI ? ( - { @@ -269,7 +271,7 @@ function WebIDE({ ( ( { setSelectedPackage(null); @@ -313,12 +315,12 @@ function WebIDE({ } { @@ -341,7 +343,7 @@ function WebIDE({ /> { @@ -363,7 +365,7 @@ function WebIDE({ } /> { @@ -383,7 +385,15 @@ function WebIDE({ theme={theme} active={ activeEditorWindow === EDITOR_WINDOWS.CODE_EDITOR_WINDOW } file={ selectedFile } - onChange={ updateInMemoryCodeFile } /> + onChange={ + (fileContent) => { + updateInMemoryCodeFile(fileContent); + onChange({ + path: selectedFile.path, + content: fileContent + }); + } + } /> diff --git a/src/functions/state/editorCache.js b/src/functions/state/editorCache.js new file mode 100644 index 000000000..133d74be0 --- /dev/null +++ b/src/functions/state/editorCache.js @@ -0,0 +1,3 @@ +import createPersistedState from 'use-persisted-state'; + +export default createPersistedState('editorCache'); From d004d5695a9a5a72da71c3b443130f2d2918cc26 Mon Sep 17 00:00:00 2001 From: Alex Ramsdell Date: Tue, 31 Oct 2023 10:46:21 -0400 Subject: [PATCH 3/9] add revert file button to editor menu --- src/components/shared/webide/EditorMenu.js | 23 +++++++++++++++++++++- src/components/shared/webide/index.js | 8 +++++++- 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/src/components/shared/webide/EditorMenu.js b/src/components/shared/webide/EditorMenu.js index 3f09991d7..ce64d1e8c 100644 --- a/src/components/shared/webide/EditorMenu.js +++ b/src/components/shared/webide/EditorMenu.js @@ -3,6 +3,24 @@ import React, { useState } from 'react'; import cn from 'classnames'; +export function RevertFileButton({ disabled }) { + return ( +