merge: #4040

4040: Fix authoring empty states when selecting multiple assets r=jobelenus a=jobelenus <img src="https://media0.giphy.com/media/Az1CJ2MEjmsp2/giphy.gif"/> Co-authored-by: John Obelenus <[email protected]>
systeminit · Jun 25, 2024 · a71ac66 · a71ac66
2 parents ed2133a + ff48c88
commit a71ac66
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 8 deletions.
diff --git a/app/web/src/components/AssetEditorTabs.vue b/app/web/src/components/AssetEditorTabs.vue
@@ -14,6 +14,11 @@
         <WorkspaceCustomizeEmptyState
           :requestStatus="loadAssetsRequestStatus"
           loadingMessage="Loading assets..."
+          :instructions="
+            assetStore.selectedAssets.length > 1
+              ? 'You have selected multiple assets, use the right pane!'
+              : undefined
+          "
         />
       </template>
       <TabGroupItem
@@ -71,7 +76,12 @@ watch(
     assetStore.openAssetFuncIds,
   ],
   ([requestStatus, assetId, openAssetFuncIds]) => {
-    if (!requestStatus.isSuccess || !assetId) {
+    // no asset/multiple assets selected, don't show tabs
+    if (!assetId) {
+      currentTabs.value = [];
+      return;
+    }
+    if (!requestStatus.isSuccess) {
       return;
     }
 

diff --git a/app/web/src/components/AssetFuncListPanel.vue b/app/web/src/components/AssetFuncListPanel.vue
@@ -25,12 +25,20 @@
         context="workspace-lab-assets"
         defaultOpen
       />
-      <EmptyStateCard
-        v-else
-        iconName="funcs"
-        primaryText="Select Asset, View Functions"
-        secondaryText="Select an asset from the list above to view its attached functions here."
-      />
+      <template v-else>
+        <EmptyStateCard
+          v-if="assetStore.selectedAssets.length > 1"
+          iconName="funcs"
+          primaryText=""
+          secondaryText="You have selected multiple assets above"
+        />
+        <EmptyStateCard
+          v-else
+          iconName="funcs"
+          primaryText="Select Asset, View Functions"
+          secondaryText="Select an asset from the list above to view its attached functions here."
+        />
+      </template>
     </ScrollArea>
     <AssetFuncAttachModal ref="attachModalRef" :assetId="assetId" />
   </div>

diff --git a/app/web/src/components/WorkspaceCustomizeEmptyState.vue b/app/web/src/components/WorkspaceCustomizeEmptyState.vue
@@ -13,7 +13,7 @@
     <div
       class="text-sm italic text-neutral-500 dark:text-neutral-400 text-center"
     >
-      Use the left panel to get started!
+      {{ $props.instructions }}
     </div>
     <div>
       <RequestStatusMessage
@@ -35,5 +35,12 @@ import EmptyStateIcon from "./EmptyStateIcon.vue";
 defineProps({
   requestStatus: { type: Object as PropType<ApiRequestStatus>, required: true },
   loadingMessage: { type: String, required: true },
+  instructions: {
+    type: String,
+    required: false,
+    default() {
+      return "Use the left panel to get started!";
+    },
+  },
 });
 </script>