Merge pull request #5205 from systeminit/jobelenus/laying-more-founda…

…tion

Laying more foundation

app/web/src/components/ApplyChangeSetButton.vue

@@ -47,7 +47,7 @@
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import * as _ from "lodash-es";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import {
   VButton,
   Icon,
@@ -62,16 +62,16 @@ import { useActionsStore } from "@/store/actions.store";
 import { useAuthStore } from "@/store/auth.store";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import RetryApply from "@/components/toasts/RetryApply.vue";
-import { useViewsStore } from "@/store/views.store";
+import { useRouterStore } from "@/store/router.store";
 import ApprovalFlowModal from "./ApprovalFlowModal.vue";
 import ApprovalFlowModal2 from "./ApprovalFlowModal2.vue";
 
 const featureFlagsStore = useFeatureFlagsStore();
 const actionsStore = useActionsStore();
 const authStore = useAuthStore();
 const changeSetsStore = useChangeSetsStore();
-const route = useRoute();
 const router = useRouter();
+const routerStore = useRouterStore();
 const statusStore = useStatusStore();
 const toast = useToast();
 
@@ -97,24 +97,19 @@ const openApprovalFlowModal = () => {
 
 // Applies the current change set3
 const applyChangeSet = async () => {
-  if (!route.name) return;
-  // if (featureFlagsStore.REBAC) return;
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  const viewsStore = useViewsStore(changeSetsStore.headChangeSetId!);
-  // need to clear selections prior to applying, having them is causing bugs (BUG-725)
-  viewsStore.clearSelections();
-  viewsStore.syncSelectionIntoUrl();
   const resp = await changeSetsStore.APPLY_CHANGE_SET(
     authStore.user?.email ?? "",
   );
   if (resp.result.success) {
-    router.replace({
-      name: route.name,
-      params: {
-        ...route.params,
-        changeSetId: "head",
-      },
-    });
+    if (routerStore.currentRoute) {
+      router.replace({
+        name: routerStore.currentRoute.name,
+        params: {
+          ...routerStore.currentRoute.params,
+          changeSetId: "head",
+        },
+      });
+    }
   } else if (resp.result.statusCode === 428) {
     toast({
       component: RetryApply,

app/web/src/components/ApprovalFlowModal2.vue

@@ -48,7 +48,6 @@ import { ChangeSetStatus } from "@/api/sdf/dal/change_set";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { useAuthStore } from "@/store/auth.store";
 import ApprovalFlowCancelled from "@/components/toasts/ApprovalFlowCancelled.vue";
-import { useViewsStore } from "@/store/views.store";
 import ActionsList from "./Actions/ActionsList.vue";
 
 const changeSetsStore = useChangeSetsStore();
@@ -74,11 +73,6 @@ function closeModalHandler() {
 function applyButtonHandler() {
   if (userIsApprover.value) {
     if (authStore.user) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const viewsStore = useViewsStore(changeSetsStore.headChangeSetId!);
-      // need to clear selections prior to applying, having them is causing bugs (BUG-725)
-      viewsStore.clearSelections();
-      viewsStore.syncSelectionIntoUrl();
       changeSetsStore.FORCE_APPLY_CHANGE_SET(authStore.user.name);
       closeModalHandler();
     }

app/web/src/components/AssetCard.vue

@@ -131,7 +131,6 @@ import {
   ErrorMessage,
   IconButton,
 } from "@si/vue-lib/design-system";
-import { useRouter } from "vue-router";
 import { format as dateFormat } from "date-fns";
 import { useAssetStore } from "@/store/asset.store";
 import { SchemaVariantId, SchemaVariant } from "@/api/sdf/dal/schema";
@@ -148,7 +147,6 @@ const props = defineProps({
 
 const assetStore = useAssetStore();
 const moduleStore = useModuleStore();
-const router = useRouter();
 const { theme } = useTheme();
 
 const installStatus = moduleStore.getRequestStatus(
@@ -215,9 +213,7 @@ const updateAsset = () => {
   }
 
   moduleStore.INSTALL_REMOTE_MODULE([module.id]);
-  router.replace({
-    name: "workspace-lab-assets",
-  });
+  assetStore.clearSchemaVariantSelection();
 
   return;
 };
@@ -252,14 +248,7 @@ const createUnlockedVariantReqStatus = assetStore.getRequestStatus(
 );
 
 const unlock = async () => {
-  if (asset.value) {
-    const resp = await assetStore.CREATE_UNLOCKED_COPY(
-      asset.value.schemaVariantId,
-    );
-    if (resp.result.success) {
-      assetStore.setSchemaVariantSelection(resp.result.data?.schemaVariantId);
-    }
-  }
+  if (asset.value) assetStore.CREATE_UNLOCKED_COPY(asset.value.schemaVariantId);
 };
 
 const deleteUnlockedVariantReqStatus = assetStore.getRequestStatus(
@@ -273,9 +262,6 @@ const deleteUnlockedVariant = async () => {
     );
     if (resp.result.success) {
       assetStore.setSchemaVariantSelection("");
-      router.replace({
-        name: "workspace-lab-assets",
-      });
     }
   }
 };

app/web/src/components/AssetDetailsPanel.vue

@@ -649,9 +649,8 @@ const cloneAsset = async (name: string) => {
       name,
     );
     if (result.result.success) {
-      assetStore.setSchemaVariantSelection(result.result.data.schemaVariantId);
       cloneAssetModalRef.value?.modal?.close();
-    } else if (result.result.statusCode === 409) {
+    } else if (!result.result.success && result.result.statusCode === 409) {
       cloneAssetModalRef.value?.setError(
         "That name is already in use, please choose another",
       );

app/web/src/components/AssetFuncAttachModal.vue

@@ -442,15 +442,11 @@ const attachExistingFunc = async () => {
     bindings.push(attr);
   }
   if (bindings.length > 0 && selectedExistingFunc.value.value !== nilId()) {
-    const response = await funcStore.CREATE_BINDING(
+    const resp = await funcStore.CREATE_BINDING(
       selectedExistingFunc.value.value as string,
       bindings,
     );
-    if (response.result.success && props.schemaVariantId) {
-      const funcId = response.result.data.pop()?.funcId;
-      if (funcId) assetStore.setFuncSelection(funcId);
-      close();
-    }
+    if (resp.result.success) close();
   }
 };
 
@@ -476,18 +472,13 @@ const attachNewFunc = async () => {
         attributePrototypeId: null,
       } as Attribute;
     }
-    const result = await funcStore.CREATE_FUNC({
+    await funcStore.CREATE_FUNC({
       name: name.value,
       displayName: name.value,
       description: "",
       binding,
       kind: funcKind.value.value,
     });
-    if (result.result.success) {
-      funcStore.selectedFuncId = result.result.data.summary.funcId;
-      assetStore.addFuncSelection(result.result.data.summary.funcId);
-      if (props.schemaVariantId) close();
-    }
   }
 };
 

app/web/src/components/AssetListPanel.vue

@@ -128,7 +128,6 @@ import {
   SiSearch,
   Filter,
 } from "@si/vue-lib/design-system";
-import { useRouter } from "vue-router";
 import { useAssetStore } from "@/store/asset.store";
 import { SchemaVariant } from "@/api/sdf/dal/schema";
 import { getAssetIcon } from "@/store/components.store";
@@ -139,7 +138,6 @@ import SidebarSubpanelTitle from "./SidebarSubpanelTitle.vue";
 
 const assetStore = useAssetStore();
 const moduleStore = useModuleStore();
-const router = useRouter();
 
 const { variantList: assetList } = storeToRefs(assetStore);
 
@@ -222,7 +220,6 @@ const syncModules = async () => moduleStore.SYNC();
 const newAsset = async (newAssetName: string) => {
   const result = await assetStore.CREATE_VARIANT(newAssetName);
   if (result.result.success) {
-    assetStore.setSchemaVariantSelection(result.result.data.schemaVariantId);
     newAssetModalRef.value?.modal?.close();
   } else if (result.result.statusCode === 409) {
     newAssetModalRef.value?.setError("That name is already in use");
@@ -235,9 +232,7 @@ const updateAllAssets = () => {
     (m) => m.id,
   );
   moduleStore.INSTALL_REMOTE_MODULE(moduleIds);
-  router.replace({
-    name: "workspace-lab-assets",
-  });
+  assetStore.clearSchemaVariantSelection();
 };
 
 const filters = computed(() => [

app/web/src/components/DiagramOutline/DiagramOutline.vue

@@ -20,7 +20,11 @@
           </template>
           <div class="flex flex-row gap-xs items-center">
             <Icon
-              v-if="fetchComponentsReq.isPending || actionsAreRunning"
+              v-if="
+                initialFetch.isPending ||
+                actionsAreRunning ||
+                viewFetch.isPending
+              "
               tone="action"
               name="loader"
               size="md"
@@ -38,45 +42,40 @@
         />
       </template>
 
-      <template v-if="fetchComponentsReq.isError">
-        <ErrorMessage :requestStatus="fetchComponentsReq" />
+      <!-- filtered / search mode -->
+      <template v-if="filterModeActive">
+        <DiagramOutlineNode
+          v-for="component in filteredComponents"
+          :key="component.def.id"
+          :component="component"
+        />
       </template>
+
+      <!-- tree mode -->
       <template v-else>
-        <!-- filtered / search mode -->
-        <template v-if="filterModeActive">
+        <div v-if="!rootComponents.length" class="flex flex-col items-center">
+          <div class="w-52">
+            <EmptyStateIcon name="no-components" />
+          </div>
+          <div class="text-xl text-neutral-400 dark:text-neutral-300 mt-2">
+            Drag & Drop
+          </div>
+          <div class="text-sm px-xs pt-3 text-neutral-400 text-center italic">
+            Drag & Drop assets on to the canvas and start modeling your
+            infrastructure
+          </div>
+          <div class="text-sm px-xs pt-3 text-neutral-400 text-center italic">
+            Assets are reusable infrastructure components such as key pairs,
+            docker images EC2 instances etc.
+          </div>
+        </div>
+        <template v-else>
           <DiagramOutlineNode
-            v-for="component in filteredComponents"
+            v-for="component in rootComponents"
             :key="component.def.id"
             :component="component"
           />
         </template>
-
-        <!-- tree mode -->
-        <template v-else>
-          <div v-if="!rootComponents.length" class="flex flex-col items-center">
-            <div class="w-52">
-              <EmptyStateIcon name="no-components" />
-            </div>
-            <div class="text-xl text-neutral-400 dark:text-neutral-300 mt-2">
-              Drag & Drop
-            </div>
-            <div class="text-sm px-xs pt-3 text-neutral-400 text-center italic">
-              Drag & Drop assets on to the canvas and start modeling your
-              infrastructure
-            </div>
-            <div class="text-sm px-xs pt-3 text-neutral-400 text-center italic">
-              Assets are reusable infrastructure components such as key pairs,
-              docker images EC2 instances etc.
-            </div>
-          </div>
-          <template v-else>
-            <DiagramOutlineNode
-              v-for="component in rootComponents"
-              :key="component.def.id"
-              :component="component"
-            />
-          </template>
-        </template>
       </template>
     </ScrollArea>
   </div>
@@ -120,7 +119,6 @@ import {
 } from "vue";
 import * as _ from "lodash-es";
 import {
-  ErrorMessage,
   Icon,
   PillCounter,
   ScrollArea,
@@ -164,12 +162,13 @@ const componentsStore = useComponentsStore();
 const viewStore = useViewsStore();
 const qualificationsStore = useQualificationsStore();
 
-const fetchComponentsReq = viewStore.getRequestStatus("FETCH_VIEW");
-
 const viewId = computed(
   () => viewStore.outlinerViewId || viewStore.selectedViewId,
 );
 
+const initialFetch = viewStore.getRequestStatus("FETCH_VIEW");
+const viewFetch = viewStore.getRequestStatus("FETCH_VIEW_GEOMETRY", viewId);
+
 const viewComponentIds = computed<ComponentId[] | null>(() => {
   if (viewId.value) {
     return Object.keys(

app/web/src/components/FuncEditor/FuncDetails.vue

@@ -405,33 +405,10 @@ const unlock = async () => {
   if (editingFunc.value?.funcId === undefined) return;
 
   unlocking.value = true;
-  const resp = await funcStore.CREATE_UNLOCKED_COPY(
+  await funcStore.CREATE_UNLOCKED_COPY(
     editingFunc.value.funcId,
     assetStore.selectedVariantId,
   );
-  if (resp.result.success) {
-    try {
-      let unlockedAssetId =
-        assetStore.unlockedVariantIdForId[assetStore.selectedVariantId ?? ""];
-      if (!unlockedAssetId) {
-        await assetStore.LOAD_SCHEMA_VARIANT_LIST();
-      }
-      unlockedAssetId =
-        assetStore.unlockedVariantIdForId[assetStore.selectedVariantId ?? ""];
-
-      if (!unlockedAssetId) {
-        unlocking.value = false;
-        throw Error("Unlocked asset without unlocking variant?");
-      }
-
-      assetStore.setSchemaVariantSelection(unlockedAssetId);
-
-      await assetStore.setFuncSelection(resp.result.data.summary.funcId);
-    } catch (err) {
-      unlocking.value = false;
-      throw err;
-    }
-  }
 
   unlocking.value = false;
 };

app/web/src/components/FuncEditor/FuncTest.vue

@@ -525,6 +525,9 @@ const startTest = async () => {
 
   readyToTest.value = true;
 
+  // TODO: @brit - currently test does not create a changeset
+  // so this will work fine
+  // but once we force a change set, this will need to change
   if (response.result.success) {
     const funcRunId = response.result.data.funcRunId;
     await funcRunsStore.GET_FUNC_RUN(funcRunId);

app/web/src/components/InsetApprovalModal.vue

@@ -121,7 +121,6 @@ import { useRoute, useRouter } from "vue-router";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import { useAuthStore } from "@/store/auth.store";
 import { ChangeSetStatus } from "@/api/sdf/dal/change_set";
-import { useViewsStore } from "@/store/views.store";
 import ActionsList from "./Actions/ActionsList.vue";
 
 export type InsetApprovalModalMode =
@@ -249,11 +248,6 @@ const confirmHandler = () => {
   } else if (mode.value === "approved") {
     if (authStore.user) {
       applyingChangeSet.value = true;
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const viewsStore = useViewsStore(changeSetsStore.headChangeSetId!);
-      // need to clear selections prior to applying, having them is causing bugs (BUG-725)
-      viewsStore.clearSelections();
-      viewsStore.syncSelectionIntoUrl();
       changeSetsStore.APPLY_CHANGE_SET(authStore.user.name);
     }
   } else if (mode.value === "rejected") {