Merge pull request #4239 from systeminit/wendy/eng-2613-new-assets-ta…

…b-styling

feat(web) - better UI for New Assets tab in Customize screen

app/web/src/components/CodeViewer.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="flex flex-col w-full max-h-full overflow-hidden">
+  <div
+    :class="
+      clsx(
+        'flex flex-col w-full overflow-hidden',
+        !disableScroll && 'max-h-full',
+      )
+    "
+  >
     <div
       v-if="showTitle"
       class="flex flex-row items-center justify-between p-xs text-base align-middle"
@@ -94,6 +101,7 @@ const props = defineProps({
   title: { type: String },
   titleClasses: { type: String, default: "h-10" },
   border: { type: Boolean, default: false },
+  disableScroll: { type: Boolean },
 });
 
 const numberOfLinesInCode = computed(() => {

app/web/src/components/InstallAsset.vue

@@ -3,71 +3,78 @@
     class="flex flex-col h-full border border-t-0 border-neutral-300 dark:border-neutral-600"
   >
     <template #top>
-      <div class="p-xs">
-        <TruncateWithTooltip
-          class="text-2xl font-bold pb-2xs flex flex-row items-center gap-xs"
-        >
-          <Icon name="component" size="xl" />
-          <div class="flex flex-row items-center gap-xs">
+      <div class="flex flex-col py-xs">
+        <div class="flex flex-row items-center gap-xs text-2xl font-bold px-xs">
+          <Icon name="component" size="xl" class="flex-none" />
+          <TruncateWithTooltip class="flex-grow">
             {{ $props.moduleName }}
-          </div>
-        </TruncateWithTooltip>
-        <VButton
-          icon="component-plus"
-          label="Install Module"
-          :loading="installReqStatus.isPending"
-          loadingText="Installing..."
-          :requestStatus="installReqStatus"
-          successText="Successfully Installed"
-          tone="action"
-          @click="install"
-        />
-      </div>
-      <div
-        v-if="moduleObj"
-        class="text-xs italic flex flex-row flex-wrap gap-x-lg text-neutral-600 dark:text-neutral-200"
-      >
-        <div>
-          <span class="font-bold">Name: </span>
-          {{ moduleObj.name }}
+          </TruncateWithTooltip>
+          <VButton
+            class="flex-none"
+            icon="component-plus"
+            label="Install Module"
+            :loading="installReqStatus.isPending"
+            loadingText="Installing..."
+            :requestStatus="installReqStatus"
+            successText="Successfully Installed"
+            tone="action"
+            @click="install"
+          />
         </div>
-        <div>
-          <span class="font-bold">Module Created At: </span>
-          <Timestamp :date="moduleObj.createdAt" size="long" />
-        </div>
-        <div>
-          <span class="font-bold">Created By: </span>{{ moduleObj.createdBy }}
-        </div>
-        <div>
-          <span class="font-bold">Version: </span>{{ moduleObj.version }}
+        <div
+          v-if="moduleObj"
+          class="px-xs text-xs italic flex flex-row flex-wrap gap-x-lg text-neutral-600 dark:text-neutral-200"
+        >
+          <div>
+            <span class="font-bold">Name: </span>
+            {{ moduleObj.name }}
+          </div>
+          <div>
+            <span class="font-bold">Module Created At: </span>
+            <Timestamp :date="moduleObj.createdAt" size="long" />
+          </div>
+          <div>
+            <span class="font-bold">Created By: </span>{{ moduleObj.createdBy }}
+          </div>
+          <div>
+            <span class="font-bold">Version: </span>{{ moduleObj.version }}
+          </div>
         </div>
       </div>
     </template>
 
     <div
       v-if="loadModuleReqStatus.isError || !loadModuleReqStatus.isRequested"
-      class="p-2 text-center text-neutral-400 dark:text-neutral-300"
+      class="p-xs text-center text-neutral-400 dark:text-neutral-300"
     >
-      <template v-if="moduleId">
-        Cannot retrieve details for "{{ moduleId }}"
-      </template>
+      Unable to retrieve details for
+      {{ moduleId ? `"${moduleId}"` : "unknown module" }}
     </div>
     <template v-else-if="moduleObj">
-      <CodeEditor
-        :id="`module-asset-${moduleId}`"
-        v-model="assetFn.code"
-        disabled
-        :recordId="moduleId"
-      />
-      <template v-for="func in functions" :key="func.id">
-        <h2 class="text-xl">{{ func.name }}</h2>
-        <CodeEditor
-          :id="`module-${func.name}-${moduleId}`"
-          v-model="func.code"
-          disabled
-          :recordId="moduleId"
-        />
-      </template>
+      <TreeNode
+        v-if="functions.length > 0"
+        alwaysShowArrow
+        enableGroupToggle
+        :defaultOpen="false"
+        noIndentationOrLeftBorder
+        enableDefaultHoverClasses
+        :label="assetFn.name"
+      >
+        <CodeViewer :code="assetFn.code" disableScroll />
+      </TreeNode>
+      <CodeViewer v-else :code="assetFn.code" disableScroll />
+      <TreeNode
+        v-for="func in functions"
+        :key="func.id"
+        alwaysShowArrow
+        enableGroupToggle
+        :defaultOpen="false"
+        noIndentationOrLeftBorder
+        enableDefaultHoverClasses
+        :label="func.name"
+      >
+        <CodeViewer :code="func.code" disableScroll />
+      </TreeNode>
     </template>
     <RequestStatusMessage
       v-else
@@ -86,12 +93,13 @@ import {
   Timestamp,
   VButton,
   Icon,
+  TreeNode,
 } from "@si/vue-lib/design-system";
 import { useModuleStore, ModuleSpec } from "@/store/module.store";
 import { nilId } from "@/utils/nilId";
 import { ModuleId } from "@/api/sdf/dal/module";
 import TruncateWithTooltip from "./TruncateWithTooltip.vue";
-import CodeEditor from "./CodeEditor.vue";
+import CodeViewer from "./CodeViewer.vue";
 
 const props = defineProps<{
   moduleId: ModuleId;

app/web/src/components/InstallAssetsPanel.vue

@@ -1,10 +1,5 @@
 <template>
   <ScrollArea>
-    <RequestStatusMessage
-      v-if="syncModulesReqStatus.isPending"
-      :requestStatus="syncModulesReqStatus"
-      loadingMessage="Loading modules..."
-    />
     <template #top>
       <SidebarSubpanelTitle icon="component">
         <template #label> Install New Assets</template>
@@ -15,33 +10,35 @@
         @search="onSearch"
       />
     </template>
-    <ul
-      v-if="moduleStore.installableModules.length > 0"
-      :class="
-        clsx(
-          'dark:text-white text-black dark:bg-neutral-800 py-[1px]',
-          'hover:dark:outline-action-300 hover:outline-action-500 hover:outline hover:z-10 hover:-outline-offset-1 hover:outline-1',
-        )
-      "
+    <RequestStatusMessage
+      v-if="syncModulesReqStatus.isPending"
+      :requestStatus="syncModulesReqStatus"
+      loadingMessage="Loading modules..."
+    />
+    <div
+      v-else-if="moduleStore.installableModules.length > 0"
+      class="flex flex-col dark:text-white text-black dark:bg-neutral-800 py-[1px]"
     >
-      <li
+      <div
         v-for="module in filteredModules"
         :key="module.id"
         :class="
           clsx(
             'text-xs w-full p-2xs truncate flex flex-row items-center gap-1 hover:text-action-500 dark:hover:text-action-300 cursor-pointer',
+            'hover:dark:outline-action-300 hover:outline-action-500 hover:outline hover:z-10 hover:-outline-offset-1 hover:outline-1',
             selectedModule &&
               module.id === selectedModule.id &&
               themeClasses('bg-action-100', 'bg-action-900'),
           )
         "
         @click="() => selectModule(module)"
       >
+        <Icon name="component" size="sm" />
         <div class="truncate">
           {{ module.name }}
         </div>
-      </li>
-    </ul>
+      </div>
+    </div>
     <EmptyStateCard
       v-else
       iconName="no-assets"
@@ -59,6 +56,7 @@ import {
   ScrollArea,
   RequestStatusMessage,
   themeClasses,
+  Icon,
 } from "@si/vue-lib/design-system";
 import SiSearch from "@/components/SiSearch.vue";
 import router from "@/router";

app/web/src/components/Workspace/WorkspaceCustomizeAssets.vue

@@ -7,21 +7,26 @@
     rememberSizeKey="func-picker"
     side="left"
   >
-    <template #subpanel1>
+    <CustomizeTabs
+      v-if="tabContentSlug === 'newassets'"
+      :tabContentSlug="tabContentSlug"
+    >
+      <template #newassets>
+        <InstallAssetsPanel ref="install" />
+      </template>
+    </CustomizeTabs>
+    <template v-if="tabContentSlug === 'assets'" #subpanel1>
       <div class="flex flex-col h-full">
         <div class="relative flex-grow">
-          <CustomizeTabs ref="tabs" :tabContentSlug="tabContentSlug">
+          <CustomizeTabs :tabContentSlug="tabContentSlug">
             <template #assets>
               <AssetListPanel />
             </template>
-            <template #newassets>
-              <InstallAssetsPanel ref="install" />
-            </template>
           </CustomizeTabs>
         </div>
       </div>
     </template>
-    <template v-if="tabs?.group?.selectedTabSlug !== 'newassets'" #subpanel2>
+    <template v-if="tabContentSlug === 'assets'" #subpanel2>
       <AssetFuncListPanel :schemaVariantId="selectedVariantId" />
     </template>
   </component>
@@ -32,24 +37,16 @@
     <div class="absolute left-0 right-0 top-0 bottom-0">
       <FuncEditor
         v-if="
-          router.currentRoute.value.name === 'workspace-lab-assets' &&
-          selectedVariantId &&
-          selectedFuncId
+          tabContentSlug === 'assets' && selectedVariantId && selectedFuncId
         "
         :funcId="selectedFuncId"
       />
       <AssetEditor
-        v-else-if="
-          router.currentRoute.value.name === 'workspace-lab-assets' &&
-          selectedVariantId
-        "
+        v-else-if="tabContentSlug === 'assets' && selectedVariantId"
         :schemaVariantId="selectedVariantId"
       />
       <InstallAsset
-        v-else-if="
-          router.currentRoute.value.name === 'workspace-lab-newassets' &&
-          !!install?.selectedModule
-        "
+        v-else-if="tabContentSlug === 'newassets' && !!install?.selectedModule"
         :moduleId="install?.selectedModule.id"
         :moduleName="install?.selectedModule.name"
       />
@@ -68,6 +65,7 @@
 
   <component
     :is="ResizablePanel"
+    v-if="tabContentSlug === 'assets'"
     ref="rightResizablePanelRef"
     :minSize="300"
     rememberSizeKey="func-details"
@@ -145,7 +143,6 @@ import { useRoute } from "vue-router";
 import { useAssetStore } from "@/store/asset.store";
 import { useFuncStore } from "@/store/func/funcs.store";
 import { useModuleStore } from "@/store/module.store";
-import router from "@/router";
 import AssetCard from "../AssetCard.vue";
 import AssetListPanel from "../AssetListPanel.vue";
 import InstallAssetsPanel from "../InstallAssetsPanel.vue";
@@ -175,8 +172,6 @@ const install = ref<InstanceType<typeof InstallAssetsPanel>>();
 const leftResizablePanelRef = ref<InstanceType<typeof ResizablePanel>>();
 const rightResizablePanelRef = ref<InstanceType<typeof ResizablePanel>>();
 
-const tabs = ref<InstanceType<typeof CustomizeTabs>>();
-
 const contextMenuRef = ref<InstanceType<typeof DropdownMenu>>();
 
 const open = (mouse: MouseEvent) => {

app/web/src/components/modules/ModuleListItem.vue

@@ -10,10 +10,11 @@
     showSelection
     labelClasses="w-full"
     leftBorderSize="none"
+    primaryIconClasses=""
     :isSelected="isSelected"
     @mousedown.left.stop="onClick"
   >
-    <template #primaryIcon><Icon name="component" /></template>
+    <template #primaryIcon><Icon name="component" size="sm" /></template>
     <template #label>
       <div class="w-full truncate text-xs">
         {{ moduleSummary.name }}

app/web/src/components/modules/ModuleListPanel.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="flex flex-col overflow-hidden h-full relative">
+    <SidebarSubpanelTitle icon="component">
+      <template #label>Modules</template>
+    </SidebarSubpanelTitle>
+
     <SiSearch
       v-model="textSearch"
       class="flex-none"
@@ -31,6 +35,7 @@ import { computed, onMounted, ref } from "vue";
 import SiSearch from "@/components/SiSearch.vue";
 import { useModuleStore } from "@/store/module.store";
 import ModuleList from "./ModuleList.vue";
+import SidebarSubpanelTitle from "../SidebarSubpanelTitle.vue";
 
 const moduleStore = useModuleStore();
 const loadLocalModulesReqStatus =

lib/vue-lib/src/design-system/tree/TreeNode.vue

@@ -89,7 +89,8 @@
           size="md"
           :class="
             clsx(
-              'mr-xs flex-none',
+              'flex-none',
+              primaryIconClasses,
               enableGroupToggle &&
                 !alwaysShowArrow &&
                 'group-hover:scale-0 transition-all',