From ff48c88d0dd0b00fef36fc01ad7fae7d5eafc8a4 Mon Sep 17 00:00:00 2001
From: John Obelenus <jobelenus@systeminit.com>
Date: Tue, 25 Jun 2024 15:36:14 -0400
Subject: [PATCH] Fix authoring empty states when selecting multiple assets

---
 app/web/src/components/AssetEditorTabs.vue    | 12 ++++++++++-
 app/web/src/components/AssetFuncListPanel.vue | 20 +++++++++++++------
 .../WorkspaceCustomizeEmptyState.vue          |  9 ++++++++-
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/app/web/src/components/AssetEditorTabs.vue b/app/web/src/components/AssetEditorTabs.vue
index 344532aa90..953bb5f71a 100644
--- 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
index 2a9cf250f7..629e95ddc8 100644
--- 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
index f631ed2cf0..285555e5c3 100644
--- 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>