merge: #4026

4026: fix(web):Letting a user know an attribute func isn't attached to this schema variant r=stack72 a=stack72 Co-authored-by: stack72 <[email protected]>
systeminit · Jun 22, 2024 · 56a7e7b · 56a7e7b
2 parents c0790d7 + fb61089
commit 56a7e7b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 64 deletions.
diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
@@ -37,6 +37,7 @@
 </template>
 
 <script lang="ts" setup>
+import * as _ from "lodash-es";
 import { computed, ref } from "vue";
 import groupBy from "lodash-es/groupBy";
 import { RequestStatusMessage, ScrollArea } from "@si/vue-lib/design-system";
@@ -51,11 +52,13 @@ const props = defineProps<{ assetId?: string }>();
 
 const assetStore = useAssetStore();
 
-const funcsByKind = computed(() =>
-  props.assetId
-    ? groupBy(assetStore.assetsById[props.assetId]?.funcs ?? [], (f) => f.kind)
-    : {},
-);
+const funcsByKind = computed(() => {
+  if (!props.assetId) return {};
+  const funcsList = _.uniq(_.map(assetStore.assetsById[props.assetId]?.funcs));
+  const funcs = groupBy(funcsList, (f) => f.kind);
+
+  return funcs;
+});
 
 const loadAssetReqStatus = assetStore.getRequestStatus(
   "LOAD_ASSET",

diff --git a/app/web/src/components/FuncEditor/AttributeBindings.vue b/app/web/src/components/FuncEditor/AttributeBindings.vue
@@ -13,69 +13,80 @@
         @click="openModal()"
       />
     </div>
-    <ul class="flex flex-col p-3 gap-2xs break-words">
-      <li v-for="proto in prototypeViews" :key="proto.id">
-        <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
-          Asset:
-        </h1>
-        <h2 class="pb-xs text-sm">{{ proto.schemaVariant }}</h2>
+    <template v-if="prototypeViews.length > 0">
+      <ul class="flex flex-col p-3 gap-2xs break-words">
+        <li v-for="proto in prototypeViews" :key="proto.id">
+          <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
+            Asset:
+          </h1>
+          <h2 class="pb-xs text-sm">{{ proto.schemaVariant }}</h2>
 
-        <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
-          Component:
-        </h1>
-        <h2 class="pb-xs text-sm">{{ proto.component }}</h2>
+          <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
+            Component:
+          </h1>
+          <h2 class="pb-xs text-sm">{{ proto.component }}</h2>
 
-        <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
-          Output location:
-        </h1>
-        <h2 class="pb-xs text-sm">
-          {{ proto.outputLocation?.label ?? "no output location set" }}
-        </h2>
+          <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
+            Output location:
+          </h1>
+          <h2 class="pb-xs text-sm">
+            {{ proto.outputLocation?.label ?? "no output location set" }}
+          </h2>
 
-        <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
-          Expected Function Arguments:
-        </h1>
-        <h2 class="pb-xs text-sm">
-          Below is the source of the data for each function argument listed.
-        </h2>
-        <ul>
-          <li v-for="arg in proto.args" :key="arg.name">
-            <h1
-              class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50"
-            >
-              {{ arg.name }}
-            </h1>
-            <h2 class="pb-xs text-sm">{{ arg.path }}</h2>
-          </li>
-        </ul>
-        <div class="w-full flex p-xs gap-1 border-b dark:border-neutral-600">
-          <VButton
-            :disabled="disabled"
-            tone="neutral"
-            label="Edit Binding"
-            size="md"
-            @click="openModal(proto.id)"
-          />
-          <VButton
-            v-if="!schemaVariantId"
-            :disabled="disabled"
-            variant="transparent"
-            tone="destructive"
-            icon="x"
-            label="Remove Binding"
-            size="md"
-            @click="removeBinding(proto.id)"
-          />
-        </div>
-      </li>
+          <h1 class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50">
+            Expected Function Arguments:
+          </h1>
+          <h2 class="pb-xs text-sm">
+            Below is the source of the data for each function argument listed.
+          </h2>
+          <ul>
+            <li v-for="arg in proto.args" :key="arg.name">
+              <h1
+                class="pt-xs text-neutral-700 type-bold-sm dark:text-neutral-50"
+              >
+                {{ arg.name }}
+              </h1>
+              <h2 class="pb-xs text-sm">{{ arg.path }}</h2>
+            </li>
+          </ul>
+          <div class="w-full flex p-xs gap-1 border-b dark:border-neutral-600">
+            <VButton
+              :disabled="disabled"
+              tone="neutral"
+              label="Edit Binding"
+              size="md"
+              @click="openModal(proto.id)"
+            />
+            <VButton
+              v-if="!schemaVariantId"
+              :disabled="disabled"
+              variant="transparent"
+              tone="destructive"
+              icon="x"
+              label="Remove Binding"
+              size="md"
+              @click="removeBinding(proto.id)"
+            />
+          </div>
+        </li>
 
-      <AttributeBindingsModal
-        ref="bindingsModalRef"
-        :schemaVariantId="schemaVariantId"
-        type="save"
-        @save="saveModal"
-      />
-    </ul>
+        <AttributeBindingsModal
+          ref="bindingsModalRef"
+          :schemaVariantId="schemaVariantId"
+          type="save"
+          @save="saveModal"
+        />
+      </ul>
+    </template>
+    <template v-else>
+      <div v-if="schemaVariantId">
+        <p class="text-neutral-400 dark:text-neutral-300 text-sm p-xs">
+          This function is not attached to this schema variant. Use the Attach
+          Existing functionality to re-attach it.
+        </p>
+      </div>
+      <div v-else></div>
+    </template>
   </div>
 </template>