Merge pull request #4203 from systeminit/victor/bug-463-issue-with-mo…

…dule-sync-not-understanding-past-hashes Fix tab picker for new assets
systeminit · Jul 23, 2024 · f674e4c · f674e4c
2 parents 3ba088e + 5f47a16
commit f674e4c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/app/web/src/components/InstallAssetsPanel.vue b/app/web/src/components/InstallAssetsPanel.vue
@@ -7,11 +7,7 @@
     />
     <template #top>
       <SidebarSubpanelTitle icon="component">
-        <template #label>
-          <div class="flex flex-row gap-xs">
-            <div>Install New Assets</div>
-          </div>
-        </template>
+        <template #label> Install New Assets</template>
       </SidebarSubpanelTitle>
       <SiSearch
         ref="searchRef"

diff --git a/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue b/app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue
@@ -10,7 +10,7 @@
     <template #subpanel1>
       <div class="flex flex-col h-full">
         <div class="relative flex-grow">
-          <CustomizeTabs ref="tabs" tabContentSlug="assets">
+          <CustomizeTabs ref="tabs" :tabContentSlug="tabContentSlug">
             <template #assets>
               <AssetListPanel />
             </template>
@@ -141,6 +141,7 @@ import {
   DropdownMenu,
   DropdownMenuItemObjectDef,
 } from "@si/vue-lib/design-system";
+import { useRoute } from "vue-router";
 import { useAssetStore } from "@/store/asset.store";
 import { useFuncStore } from "@/store/func/funcs.store";
 import router from "@/router";
@@ -249,4 +250,20 @@ watch(
     }
   },
 );
+
+const route = useRoute();
+// Compute the initial tab content based on the route. This is necessary because the "packages" tab is mounted on a
+// different parent, so moving to other tabs from it causes a remount
+const tabContentSlug = computed<"assets" | "newassets">(() => {
+  const lab_type =
+    route.name?.toString().match(/workspace-lab-(.*)/)?.[1] ?? "";
+
+  // This looks awkward because of the strict return type. We can't return a generic string from this func.
+  switch (lab_type) {
+    case "newassets":
+      return "newassets";
+    default:
+      return "assets";
+  }
+});
 </script>
diff --git a/lib/vue-lib/src/design-system/tabs/TabGroup.vue b/lib/vue-lib/src/design-system/tabs/TabGroup.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="absolute inset-0 flex flex-col">
     <!-- TabGroupItems go in this slot but are not rendered here. -->
-    <div class="hidden"><slot /></div>
+    <div class="hidden">
+      <slot />
+    </div>
 
     <!-- special slot for when no tabs exist - mostly useful for dynamic tab situations -->
     <slot v-if="isNoTabs" name="noTabs">No tabs.</slot>
@@ -49,7 +51,6 @@
                 tabRefs[tab.props.slug] = el as HTMLElement;
               }
             "
-            href="#"
             :class="
               clsx(
                 'focus:outline-none whitespace-nowrap',
@@ -62,6 +63,7 @@
                 variantStyles(tab.props.slug),
               )
             "
+            href="#"
             @click="clickedTab($event, tab.props.slug)"
             @auxclick.prevent.stop="closeTab(tab)"
           >
@@ -73,7 +75,6 @@
             </div>
             <button
               v-if="closeable && !tab.props.uncloseable"
-              class="inline-block rounded-full text-neutral-400 ml-1"
               :class="
                 clsx(
                   themeClasses(
@@ -82,6 +83,7 @@
                   ),
                 )
               "
+              class="inline-block rounded-full text-neutral-400 ml-1"
               @click.prevent.stop="closeTab(tab)"
             >
               <Icon name="x" size="xs" />
@@ -310,6 +312,7 @@ function registerTab(slug: string, component: TabGroupItemDefinition) {
     selectTab(slug);
   }
 }
+
 function unregisterTab(slug: string) {
   if (unmounting.value) return;
   orderedTabSlugs.value = _.without(orderedTabSlugs.value, slug);
@@ -345,6 +348,7 @@ function clickedTab(event: MouseEvent, slug?: string | null) {
 
 const pendingTabSlug = ref<string | undefined>();
 const lastSelectedTabIndex = ref(0);
+
 function selectTab(slug?: string | null) {
   if (unmounting.value) return;
   if (selectedTabSlug.value === slug) return;
@@ -478,6 +482,7 @@ function fixOverflowDropdown() {
   if (!tabListEl) return;
   showOverflowDropdown.value = tabListEl.scrollWidth > tabListEl.clientWidth;
 }
+
 onMounted(fixOverflowDropdown);
 onMounted(() => {
   selectTab(selectedTabSlug.value);