Merge pull request #4106 from systeminit/victor/bug-437-unlocking-a-f…

…unc-redirects-you-to-the-new-func-page-within

fix(web): Redirect to unlocked function correctly

app/web/src/components/AssetCard.vue

@@ -11,8 +11,8 @@
       }"
     >
       <div class="flex gap-xs items-center">
-        <Icon :name="getAssetIcon(asset.category)" size="lg" class="shrink-0" />
-        <Stack spacing="xs" class="">
+        <Icon :name="getAssetIcon(asset.category)" class="shrink-0" size="lg" />
+        <Stack class="" spacing="xs">
           <div
             ref="componentNameRef"
             v-tooltip="componentNameTooltip"
@@ -33,31 +33,31 @@
           <IconButton
             v-if="asset.canContribute"
             class="hover:scale-125"
-            variant="simple"
             icon="cloud-upload"
             tooltip="Contribute"
             tooltipPlacement="top"
+            variant="simple"
           />
 
           <IconButton
             v-if="asset.canUpdate"
             class="hover:scale-125"
-            variant="simple"
             icon="code-deployed"
             tooltip="Update"
             tooltipPlacement="top"
+            variant="simple"
           />
 
           <IconButton
             v-if="asset.isLocked && editingVersionDoesNotExist"
             class="hover:scale-125"
-            variant="simple"
             icon="sliders-vertical"
             tooltip="Edit"
             tooltipPlacement="top"
+            variant="simple"
             @click="unlock"
           />
-          <Icon v-if="!asset.isLocked" tone="action" name="sliders-vertical" />
+          <Icon v-if="!asset.isLocked" name="sliders-vertical" tone="action" />
         </div>
 
         <!-- Slot for additional icons/buttons -->
@@ -68,8 +68,8 @@
       <ErrorMessage
         v-if="asset && asset.isLocked"
         icon="lock"
-        variant="block"
         tone="warning"
+        variant="block"
       >
         <template v-if="editingVersionDoesNotExist">
           Click edit to create a new editable version of this asset.
@@ -100,12 +100,10 @@ const props = defineProps({
 
 const { theme } = useTheme();
 
-const editingVersionDoesNotExist = computed<boolean>(() => {
-  const unlockedExists = assetStore.variantList.some(
-    (v) => v.schemaId === asset.value?.schemaId && !v.isLocked,
-  );
-  return !unlockedExists;
-});
+const editingVersionDoesNotExist = computed<boolean>(
+  () =>
+    assetStore.unlockedAssetIdForId[asset.value?.schemaId ?? ""] === undefined,
+);
 
 const assetStore = useAssetStore();
 const asset = computed(

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

@@ -6,10 +6,10 @@
     >
       <VButton
         :disabled="disabled || variant?.isLocked"
-        tone="success"
         icon="plus"
         label="Add Binding"
         size="md"
+        tone="success"
         @click="openModal()"
       />
     </div>
@@ -70,18 +70,18 @@
           <div class="w-full flex p-xs gap-1 border-b dark:border-neutral-600">
             <VButton
               :disabled="disabled || bind.schemaVariant?.isLocked"
-              tone="neutral"
               label="Edit Binding"
               size="md"
+              tone="neutral"
               @click="openModal(bind)"
             />
             <VButton
               :disabled="disabled || bind.schemaVariant?.isLocked"
-              variant="transparent"
-              tone="destructive"
               icon="x"
               label="Remove Binding"
               size="md"
+              tone="destructive"
+              variant="transparent"
               @click="removeBinding(bind)"
             />
           </div>

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

@@ -18,9 +18,19 @@
         <div class="flex flex-row">
           <EditingPill v-if="!editingFunc.isLocked" color="#666"></EditingPill>
           <IconButton
-            v-if="!editingFunc.isLocked"
+            v-if="editingFunc.isLocked"
+            :class="clsx(!unlocking && 'hover:scale-125')"
+            :loading="unlocking"
+            icon="sliders-vertical"
+            tooltip="Edit"
+            tooltipPlacement="top"
+            variant="simple"
+            @click="unlock"
+          />
+          <IconButton
+            v-else
+            :class="clsx('mx-xs', !isDeleting && 'hover:scale-125')"
             :loading="isDeleting"
-            class="mx-xs hover:scale-125"
             icon="trash"
             iconTone="destructive"
             loadingTooltip="Deleting..."
@@ -29,15 +39,6 @@
             tooltipPlacement="top"
             @click="deleteFunc"
           />
-          <IconButton
-            v-else
-            class="hover:scale-125"
-            icon="sliders-vertical"
-            tooltip="Edit"
-            tooltipPlacement="top"
-            variant="simple"
-            @click="unlock"
-          />
         </div>
       </SidebarSubpanelTitle>
       <ErrorMessage
@@ -320,16 +321,40 @@ const updateFunc = () => {
   if (editingFunc.value) funcStore.UPDATE_FUNC(editingFunc.value);
 };
 
+const unlocking = ref(false);
 const unlock = async () => {
-  if (editingFunc.value?.funcId) {
-    const resp = await funcStore.CREATE_UNLOCKED_COPY(
-      editingFunc.value.funcId,
-      assetStore.selectedVariantId,
-    );
-    if (resp.result.success) {
+  if (editingFunc.value?.funcId === undefined) return;
+
+  unlocking.value = true;
+  const resp = await funcStore.CREATE_UNLOCKED_COPY(
+    editingFunc.value.funcId,
+    assetStore.selectedVariantId,
+  );
+  if (resp.result.success) {
+    try {
+      let unlockedAssetId =
+        assetStore.unlockedAssetIdForId[assetStore.selectedVariantId ?? ""];
+      if (!unlockedAssetId) {
+        await assetStore.LOAD_SCHEMA_VARIANT_LIST();
+      }
+      unlockedAssetId =
+        assetStore.unlockedAssetIdForId[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;
 };
 
 const isConnectedToOtherSchemas = computed<boolean>(() => {

app/web/src/components/IconButton.vue

@@ -42,11 +42,11 @@
         ],
       )
     "
-    @mouseover="onHover"
-    @mouseleave="onEndHover"
-    @click.stop="onClick"
     @mousedown="startActive"
+    @mouseleave="onEndHover"
+    @mouseover="onHover"
     @mouseup="endActive"
+    @click.stop="onClick"
   >
     <Icon :name="iconShowing" :rotate="rotate" :size="size" />
 
@@ -89,7 +89,7 @@ const props = defineProps({
   },
   disabled: { type: Boolean },
   loading: { type: Boolean },
-  loadingIcon: { type: String as PropType<IconNames> },
+  loadingIcon: { type: String as PropType<IconNames>, default: "loader" },
   loadingTooltip: { type: String },
   variant: { type: String as PropType<IconButtonVariant>, default: "classic" },
   requestStatus: {

app/web/src/store/asset.store.ts

@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import * as _ from "lodash-es";
 import { addStoreHooks, ApiRequest } from "@si/vue-lib/pinia";
 import { useWorkspacesStore } from "@/store/workspaces.store";
-import { FuncKind, FuncId } from "@/api/sdf/dal/func";
+import { FuncId, FuncKind } from "@/api/sdf/dal/func";
 import { SchemaId, SchemaVariant, SchemaVariantId } from "@/api/sdf/dal/schema";
 import { Visibility } from "@/api/sdf/dal/visibility";
 import keyedDebouncer from "@/utils/keyedDebouncer";
@@ -136,6 +136,28 @@ export const useAssetStore = () => {
           if (state.selectedFuncs.length === 1) return state.selectedFuncs[0];
           else return undefined;
         },
+        unlockedAssetIdForId: (state) => {
+          const record = {} as Record<
+            SchemaVariantId,
+            SchemaVariantId | undefined
+          >;
+
+          for (const variantListElement of state.variantList) {
+            let unlockedId;
+            if (variantListElement.isLocked) {
+              unlockedId = state.variantList.find(
+                (v) =>
+                  v.schemaId === variantListElement.schemaId && !v.isLocked,
+              )?.schemaVariantId;
+            } else {
+              unlockedId = variantListElement.schemaVariantId;
+            }
+
+            record[variantListElement.schemaVariantId] = unlockedId;
+          }
+
+          return record;
+        },
       },
       actions: {
         addSchemaVariantSelection(id: SchemaVariantId) {
@@ -244,6 +266,57 @@ export const useAssetStore = () => {
           ])}`;
         },
 
+        replaceFuncForVariant(
+          schemaVariantId: SchemaVariantId,
+          oldFuncId: FuncId,
+          newFuncId: FuncId,
+        ) {
+          // TODO assets should be represented in a single state variable, we shouldn't be doing this operation twice here
+          // Copy bindings for list variant
+          const listVariantIdx = this.variantList.findIndex(
+            (v) => v.schemaVariantId === schemaVariantId,
+          );
+          const listVariant = this.variantList[listVariantIdx];
+
+          if (!listVariant) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `could not find variant ${schemaVariantId}, for binding with ${newFuncId} (previously ${oldFuncId})`,
+            );
+            return;
+          }
+
+          const funcIdxForListVariant = listVariant.funcIds.findIndex(
+            (f) => f === oldFuncId,
+          );
+
+          if (funcIdxForListVariant === -1) {
+            listVariant.funcIds.push(newFuncId);
+          } else {
+            listVariant.funcIds[funcIdxForListVariant] = newFuncId;
+          }
+
+          // Reflect binding on variantsById Variant
+          const variant = this.variantsById[schemaVariantId];
+          if (!variant) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `could not find variant ${schemaVariantId}, for binding with ${newFuncId} (previously ${oldFuncId})`,
+            );
+            return;
+          }
+
+          const funcIdxForVariant = variant.funcIds.findIndex(
+            (f) => f === oldFuncId,
+          );
+
+          if (funcIdxForVariant === -1) {
+            variant.funcIds.push(newFuncId);
+          } else {
+            variant.funcIds[funcIdxForVariant] = newFuncId;
+          }
+        },
+
         async CREATE_VARIANT(name: string) {
           if (changeSetsStore.creatingChangeSet)
             throw new Error("race, wait until the change set is created");

app/web/src/store/func/funcs.store.ts

@@ -213,6 +213,16 @@ export const useFuncStore = () => {
               schemaVariantId,
             },
             onSuccess: (response) => {
+              for (const binding of response.summary.bindings) {
+                if (!binding.schemaVariantId || !binding.funcId) continue;
+
+                useAssetStore().replaceFuncForVariant(
+                  binding.schemaVariantId,
+                  funcId,
+                  binding.funcId,
+                );
+              }
+
               this.funcsById[response.summary.funcId] = response.summary;
               this.funcCodeById[response.code.funcId] = response.code;
             },