systeminit · si-bors-ng · Aug 31, 2023 · Aug 30, 2023
diff --git a/app/web/src/components/AssetDetailsPanel.vue b/app/web/src/components/AssetDetailsPanel.vue
@@ -3,7 +3,6 @@
     <RequestStatusMessage
       v-if="loadAssetReqStatus.isPending"
       :requestStatus="loadAssetReqStatus"
-      showLoaderWithoutMessage
     />
     <ScrollArea v-else-if="assetStore.selectedAsset && assetId">
       <template #top>

diff --git a/app/web/src/components/AssetEditor.vue b/app/web/src/components/AssetEditor.vue
@@ -2,7 +2,6 @@
   <RequestStatusMessage
     v-if="loadAssetReqStatus.isPending"
     :requestStatus="loadAssetReqStatus"
-    showLoaderWithoutMessage
   />
   <ScrollArea
     v-else-if="assetId && selectedAsset"

diff --git a/app/web/src/components/AssetFuncAttachModal.vue b/app/web/src/components/AssetFuncAttachModal.vue
@@ -80,10 +80,7 @@
           Select an existing function to attach it to this asset
         </div>
         <div v-if="loadFuncDetailsReq?.value.isPending">
-          <RequestStatusMessage
-            :requestStatus="loadFuncDetailsReq.value"
-            showLoaderWithoutMessage
-          />
+          <RequestStatusMessage :requestStatus="loadFuncDetailsReq.value" />
         </div>
         <CodeEditor
           v-if="loadFuncDetailsReq && !loadFuncDetailsReq?.value.isPending"

diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
@@ -3,7 +3,6 @@
     <RequestStatusMessage
       v-if="loadAssetReqStatus.isPending"
       :requestStatus="loadAssetReqStatus"
-      showLoaderWithoutMessage
     />
     <ScrollArea>
       <template #top>

diff --git a/app/web/src/components/FuncEditor/FuncDetails.vue b/app/web/src/components/FuncEditor/FuncDetails.vue
@@ -10,8 +10,9 @@
       (loadFuncDetailsReqStatus.isPending && !storeFuncDetails) ||
       !loadFuncDetailsReqStatus.isRequested
     "
-    >Loading function "{{ selectedFuncSummary?.name }}"</LoadingMessage
   >
+    Loading function "{{ selectedFuncSummary?.name }}"
+  </LoadingMessage>
   <div
     v-else-if="selectedFuncId && editingFunc"
     :class="

diff --git a/app/web/src/components/FuncEditor/FuncEditor.vue b/app/web/src/components/FuncEditor/FuncEditor.vue
@@ -27,7 +27,7 @@
       v-else-if="loadFuncDetailsReq.isError"
       :requestStatus="loadFuncDetailsReq"
     />
-    <LoadingMessage v-else noMessage />
+    <LoadingMessage v-else />
   </div>
 </template>
 

diff --git a/app/web/src/components/WorkspaceExportModal.vue b/app/web/src/components/WorkspaceExportModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <Modal
+    ref="modalRef"
+    title="Export Workspace"
+    size="lg"
+    @closeComplete="closeHandler"
+  >
+    <Stack>
+      <template v-if="exportReqStatus.isSuccess">
+        <p>Success!</p>
+        <p>
+          You can now restore your workspace to this backup by going to
+          <br />
+          workspace settings (gear in top right) > "Import Workspace"
+        </p>
+
+        <VButton icon="check" @click="close">Close this window</VButton>
+      </template>
+      <template v-else>
+        <p>
+          You are about to export a backup of this workspace to the cloud. You
+          will then be able to import / restore this backup on this or another
+          running instance of SI.
+        </p>
+
+        <p>Click the button below to continue:</p>
+
+        <VButton
+          icon="cloud-upload"
+          :requestStatus="exportReqStatus"
+          loadingText="Exporting your workspace..."
+          @click="continueHandler"
+          >Export a backup of this workspace</VButton
+        >
+      </template>
+    </Stack>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import { Modal, Stack, VButton, useModal } from "@si/vue-lib/design-system";
+import { ref } from "vue";
+import { useWorkspacesStore } from "@/store/workspaces.store";
+
+const workspacesStore = useWorkspacesStore();
+const exportReqStatus = workspacesStore.getRequestStatus("EXPORT_WORKSPACE");
+
+const modalRef = ref<InstanceType<typeof Modal>>();
+const { open: openModal, close } = useModal(modalRef);
+
+function open() {
+  openModal();
+}
+
+function continueHandler() {
+  workspacesStore.EXPORT_WORKSPACE();
+}
+function closeHandler() {
+  workspacesStore.clearRequestStatus("EXPORT_WORKSPACE");
+}
+
+defineExpose({ open, close });
+</script>
diff --git a/app/web/src/components/WorkspaceImportModal.vue b/app/web/src/components/WorkspaceImportModal.vue
@@ -0,0 +1,143 @@
+<template>
+  <Modal
+    ref="modalRef"
+    title="Import Workspace"
+    size="xl"
+    :noExit="blockExit"
+    noAutoFocus
+  >
+    <Stack>
+      <template v-if="importReqStatus.isPending">
+        <LoadingMessage>
+          Restoring your workspace from a backup!
+          <template #moreContent>
+            <p class="italic font-sm">
+              Please do not refresh while this in progress.
+            </p>
+          </template>
+        </LoadingMessage>
+      </template>
+      <template v-else-if="importReqStatus.isSuccess">
+        <p>Your workspace has been restored!</p>
+        <p>To see your changes, please reload your browser</p>
+        <VButton icon="refresh" @click="refreshHandler">Reload</VButton>
+      </template>
+      <template v-else>
+        <p>
+          You are about to restore from a workspace backup. Please note that all
+          data currently in the local workspace will be overwritten and replaced
+          with the contents of the backup.
+        </p>
+        <p>
+          To continue, please select the backup / export you would like to
+          restore from, and confirm the loss of local data:
+        </p>
+
+        <ErrorMessage :requestStatus="loadExportsReqStatus" />
+
+        <template v-if="loadExportsReqStatus.isSuccess">
+          <VormInput
+            v-model="selectedExportId"
+            type="dropdown"
+            label="Select an export to restore from"
+            placeholder="- Select an export -"
+            required
+            requiredMessage="Select an export to continue"
+          >
+            <VormInputOption
+              v-for="item in exportsList"
+              :key="item.id"
+              :value="item.id"
+            >
+              {{ item.createdAt }}
+            </VormInputOption>
+          </VormInput>
+        </template>
+        <template v-else-if="loadExportsReqStatus.isPending">
+          <VormInput type="container" label="Select an export to restore from">
+            <Inline alignY="center">
+              <Icon name="loader" />
+              <div>Loading your exports</div>
+            </Inline>
+          </VormInput>
+        </template>
+
+        <VormInput
+          v-model="confirmedDataLoss"
+          type="checkbox"
+          noLabel
+          required
+          requiredMessage="You must check this box to continue"
+        >
+          I understand my local workspace data will be overwritten
+        </VormInput>
+
+        <VButton
+          icon="cloud-download"
+          :disabled="!loadExportsReqStatus.isSuccess || validationState.isError"
+          :requestStatus="importReqStatus"
+          @click="continueHandler"
+          >Restore from backup</VButton
+        >
+      </template>
+    </Stack>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import * as _ from "lodash-es";
+import {
+  ErrorMessage,
+  Icon,
+  Inline,
+  LoadingMessage,
+  Modal,
+  Stack,
+  VButton,
+  VormInput,
+  VormInputOption,
+  useModal,
+  useValidatedInputGroup,
+} from "@si/vue-lib/design-system";
+import { computed, ref } from "vue";
+import { useWorkspacesStore } from "@/store/workspaces.store";
+
+const modalRef = ref<InstanceType<typeof Modal>>();
+const { open: openModal, close } = useModal(modalRef);
+
+const { validationState, validationMethods } = useValidatedInputGroup();
+
+const workspacesStore = useWorkspacesStore();
+const loadExportsReqStatus = workspacesStore.getRequestStatus(
+  "FETCH_WORKSPACE_EXPORTS",
+);
+const importReqStatus = workspacesStore.getRequestStatus("IMPORT_WORKSPACE");
+
+const exportsList = computed(() => workspacesStore.workspaceExports);
+
+const selectedExportId = ref<string>();
+const confirmedDataLoss = ref(false);
+
+function open() {
+  selectedExportId.value = undefined;
+  confirmedDataLoss.value = false;
+  workspacesStore.FETCH_WORKSPACE_EXPORTS();
+  openModal();
+}
+
+async function continueHandler() {
+  if (validationMethods.hasError()) return;
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  await workspacesStore.IMPORT_WORKSPACE(selectedExportId.value!);
+}
+
+function refreshHandler() {
+  window.location.reload();
+}
+
+const blockExit = computed(
+  () => importReqStatus.value.isPending || importReqStatus.value.isSuccess,
+);
+
+defineExpose({ open, close });
+</script>
diff --git a/app/web/src/components/layout/navbar/Navbar.vue b/app/web/src/components/layout/navbar/Navbar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="bg-neutral-900 text-white relative border-b border-shade-100 shadow-[0_4px_4px_0_rgba(0,0,0,0.15)] z-100"
+    class="bg-neutral-900 text-white relative border-b border-shade-100 shadow-[0_4px_4px_0_rgba(0,0,0,0.15)] z-90"
   >
     <div class="pl-sm">
       <div class="flex items-center h-16">

diff --git a/app/web/src/components/layout/navbar/NavbarPanelRight.vue b/app/web/src/components/layout/navbar/NavbarPanelRight.vue
@@ -6,6 +6,8 @@
 
     <SiThemeSwitcher />
 
+    <WorkspaceSettingsMenu v-if="featureFlagsStore.WORKSPACE_BACKUPS" />
+
     <NavbarButton tooltipText="Profile">
       <template #default="{ open, hovered }">
         <div class="flex-row flex text-white items-center">
@@ -41,8 +43,12 @@
 import { Icon, DropdownMenuItem } from "@si/vue-lib/design-system";
 import SiArrow from "@/components/SiArrow.vue";
 import { useAuthStore } from "@/store/auth.store";
+import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import SiThemeSwitcher from "./NavbarThemeSwitcher.vue";
 import NavbarButton from "./NavbarButton.vue";
+import WorkspaceSettingsMenu from "./WorkspaceSettingsMenu.vue";
+
+const featureFlagsStore = useFeatureFlagsStore();
 
 const copyURL = () => {
   navigator.clipboard.writeText(window.location.href);

diff --git a/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue b/app/web/src/components/layout/navbar/WorkspaceSettingsMenu.vue
@@ -0,0 +1,33 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <NavbarButton tooltipText="Workspace Settings">
+    <Icon name="settings" />
+
+    <template #dropdownContent>
+      <DropdownMenuItem
+        icon="cloud-upload"
+        label="Export Workspace"
+        @click="exportModalRef?.open()"
+      />
+      <DropdownMenuItem
+        icon="cloud-download"
+        label="Import Workspace"
+        @click="importModalRef?.open()"
+      />
+    </template>
+  </NavbarButton>
+
+  <WorkspaceImportModal ref="importModalRef" />
+  <WorkspaceExportModal ref="exportModalRef" />
+</template>
+
+<script setup lang="ts">
+import { DropdownMenuItem, Icon } from "@si/vue-lib/design-system";
+import { ref } from "vue";
+import WorkspaceImportModal from "@/components/WorkspaceImportModal.vue";
+import WorkspaceExportModal from "@/components/WorkspaceExportModal.vue";
+import NavbarButton from "./NavbarButton.vue";
+
+const importModalRef = ref<InstanceType<typeof WorkspaceImportModal>>();
+const exportModalRef = ref<InstanceType<typeof WorkspaceExportModal>>();
+</script>
diff --git a/app/web/src/components/modules/ModuleDetailsPanel.vue b/app/web/src/components/modules/ModuleDetailsPanel.vue
@@ -2,7 +2,6 @@
   <RequestStatusMessage
     v-if="localDetailsReq.isPending"
     :requestStatus="localDetailsReq"
-    showLoaderWithoutMessage
   />
   <div v-else-if="localDetails" class="flex flex-col">
     <div

diff --git a/app/web/src/pages/WorkspaceSinglePage.vue b/app/web/src/pages/WorkspaceSinglePage.vue
@@ -40,7 +40,7 @@
           class="text-center text-2xl z-100 absolute w-full h-full bg-black bg-opacity-50 flex flex-row justify-center items-center"
         >
           <div class="bg-black text-white w-1/5 rounded-lg">
-            <LoadingMessage message="Creating Change Set..." />
+            <LoadingMessage>Creating Change Set...</LoadingMessage>
           </div>
         </div>
         <div class="w-full h-full flex flex-row relative overflow-hidden">