merge: #3985

3985: fix(web) - many bug fixes and UI improvements pt 2! r=wendybujalski a=wendybujalski - New "Compact" VormInput style for giving the UI a unified compact look - Compactified various forms in the UI using it to replace the "web form" look - Fixed a few truncation bugs with the TruncateWithTooltip component - Fixed a few TabGroup bugs in the CustomizeAssets screen - Added filters to the AssetPalette, minor improvements to FilterPill - Minor padding fixes in AttributesPanelItem - Fixed ColorPicker so it doesn't get hidden via overflow-hidden - Fixed language consistency in the ModelingRightClickMenu - Prevented NodeSkeleton from shrinking in flex containers - Fixed truncation and overflow issues in AttributeBindings Co-authored-by: wendybujalski <[email protected]>
systeminit · Jun 14, 2024 · d12feb4 · d12feb4
2 parents a8ba157 + cfc8d87
commit d12feb4
Show file tree

Hide file tree

Showing 18 changed files with 501 additions and 132 deletions.
diff --git a/app/web/src/components/AssetDetailsPanel.vue b/app/web/src/components/AssetDetailsPanel.vue
@@ -52,7 +52,7 @@
         <AssetFuncAttachModal ref="attachModalRef" :assetId="props.assetId" />
       </template>
 
-      <Stack class="p-xs py-sm">
+      <Stack class="p-xs" spacing="none">
         <div>
           <ErrorMessage :requestStatus="execAssetReqStatus" />
         </div>
@@ -62,6 +62,7 @@
           v-model="editingAsset.name"
           type="text"
           label="Name"
+          compact
           placeholder="(mandatory) Provide the asset a name"
           @blur="updateAsset"
         />
@@ -70,6 +71,7 @@
           v-model="editingAsset.displayName"
           type="text"
           label="Display name"
+          compact
           placeholder="(optional) Provide the asset a shorter display name"
           @blur="updateAsset"
         />
@@ -78,6 +80,7 @@
           v-model="editingAsset.category"
           type="text"
           label="Category"
+          compact
           placeholder="(mandatory) Provide a category for the asset"
           @blur="updateAsset"
         />
@@ -86,6 +89,7 @@
           v-model="editingAsset.componentType"
           type="dropdown"
           :options="componentTypeOptions"
+          compact
           label="Component Type"
           @change="updateAsset"
         />
@@ -94,10 +98,11 @@
           v-model="editingAsset.description"
           type="textarea"
           label="Description"
+          compact
           placeholder="(optional) Provide a brief description of the asset"
           @blur="updateAsset"
         />
-        <VormInput type="container" label="color" :disabled="disabled">
+        <VormInput type="container" compact label="color" :disabled="disabled">
           <ColorPicker
             id="color"
             v-model="editingAsset.color"
@@ -110,6 +115,7 @@
           v-model="editingAsset.link"
           type="url"
           label="Documentation Link"
+          compact
           placeholder="(optional) Provide a documentation link for the asset"
           @blur="updateAsset"
         />

diff --git a/app/web/src/components/AssetEditor.vue b/app/web/src/components/AssetEditor.vue
@@ -10,10 +10,10 @@
     <template #top>
       <div class="p-sm">
         <div class="flex flex-row items-center gap-xs pb-sm">
-          <NodeSkeleton :color="`#${selectedAsset.color}`" />
-          <div class="text-3xl font-bold truncate">
+          <NodeSkeleton :color="selectedAsset.color" />
+          <TruncateWithTooltip class="text-3xl font-bold">
             {{ assetDisplayName(selectedAsset) }}
-          </div>
+          </TruncateWithTooltip>
         </div>
         <div class="text-sm italic flex flex-row flex-wrap gap-x-lg">
           <div>
@@ -59,6 +59,7 @@ import SiChip from "@/components/SiChip.vue";
 import { useChangeSetsStore } from "@/store/change_sets.store";
 import CodeEditor from "./CodeEditor.vue";
 import NodeSkeleton from "./NodeSkeleton.vue";
+import TruncateWithTooltip from "./TruncateWithTooltip.vue";
 
 const changeSetsStore = useChangeSetsStore();
 

diff --git a/app/web/src/components/AssetEditorTabs.vue b/app/web/src/components/AssetEditorTabs.vue
@@ -42,7 +42,7 @@
 
 <script lang="ts" setup>
 import isEqual from "lodash-es/isEqual";
-import { watch, ref, computed } from "vue";
+import { watch, ref, computed, onMounted } from "vue";
 import { TabGroup, TabGroupItem } from "@si/vue-lib/design-system";
 import { useAssetStore } from "@/store/asset.store";
 import { useFuncStore } from "@/store/func/funcs.store";
@@ -97,8 +97,30 @@ watch(
   },
 );
 
+const doneLoading = ref(false);
+
+onMounted(async () => {
+  if (assetStore.urlSelectedAssetId && !assetStore.selectedAsset) {
+    await assetStore.LOAD_ASSET(assetStore.urlSelectedAssetId);
+  }
+  if (assetStore.urlSelectedFuncId && !assetStore.selectedFunc) {
+    await funcStore.FETCH_FUNC(assetStore.urlSelectedFuncId);
+  }
+  if (assetStore.selectedAssetId && assetStore.selectedFuncId) {
+    assetStore.openFunc(assetStore.selectedAssetId, assetStore.selectedFuncId);
+    if (tabGroupRef.value) {
+      tabGroupRef.value.selectTab(assetStore.selectedFuncId);
+    }
+  }
+  doneLoading.value = true;
+});
+
 const onTabChange = async (tabSlug: string | undefined) => {
   // tabSlugs are just func ids here, besides the asset tab, which is just "asset"
+  if (!doneLoading.value) {
+    return;
+  }
+
   if (tabSlug === "asset") {
     tabSlug = undefined;
   } else if (!tabSlug || tabSlug === selectedFuncId.value) {
@@ -131,9 +153,19 @@ watch([() => assetStore.selectedFuncId, loadFuncDetailsReqStatus], () => {
     !assetStore.selectedFuncId &&
     loadFuncDetailsReqStatus.value.isSuccess
   ) {
+    // TODO - This watcher seems to be the source of BUG-385
     tabGroupRef.value?.selectTab("asset");
   } else if (assetStore.selectedAssetId && assetStore.selectedFuncId) {
     tabGroupRef.value?.selectTab(assetStore.selectedFuncId);
   }
 });
+
+watch(
+  [() => assetStore.selectedAssetId, () => funcStore.selectedFuncId],
+  () => {
+    if (assetStore.selectedAssetId && !funcStore.selectedFuncId) {
+      tabGroupRef.value?.selectTab("asset");
+    }
+  },
+);
 </script>
diff --git a/app/web/src/components/AssetListItem.vue b/app/web/src/components/AssetListItem.vue
@@ -9,16 +9,7 @@
     "
     :isSelected="selectedAssetId === a.id"
     showSelection
-    @mousedown.left.stop="
-      router.push({
-        name: 'workspace-lab-assets',
-        params: {
-          ...route.params,
-          assetId: a.id,
-          funcId: undefined,
-        },
-      })
-    "
+    @mousedown.left.stop="onClick"
     @click.right.prevent
   >
     <template #label>
@@ -63,4 +54,15 @@ const assetNameString = (a: AssetListEntry) => {
     return `${name} (${duplicates.indexOf(a)})`;
   } else return name;
 };
+
+const onClick = () => {
+  router.push({
+    name: "workspace-lab-assets",
+    params: {
+      ...route.params,
+      assetId: props.a.id,
+      funcId: undefined,
+    },
+  });
+};
 </script>
diff --git a/app/web/src/components/AssetPalette.vue b/app/web/src/components/AssetPalette.vue
@@ -29,7 +29,12 @@
             </div>
           </SidebarSubpanelTitle>
 
-          <SiSearch placeholder="search assets" @search="onSearchUpdated" />
+          <SiSearch
+            ref="searchRef"
+            placeholder="search assets"
+            :filters="searchFiltersWithCounts"
+            @search="onSearchUpdated"
+          />
         </template>
 
         <TreeNode
@@ -112,9 +117,11 @@ import {
 } from "@/store/components.store";
 import NodeSkeleton from "@/components/NodeSkeleton.vue";
 import SidebarSubpanelTitle from "@/components/SidebarSubpanelTitle.vue";
-import SiSearch from "@/components/SiSearch.vue";
+import SiSearch, { Filter } from "@/components/SiSearch.vue";
 import TruncateWithTooltip from "@/components/TruncateWithTooltip.vue";
 
+const searchRef = ref<InstanceType<typeof SiSearch>>();
+
 const componentsStore = useComponentsStore();
 
 const schemasReqStatus = componentsStore.getRequestStatus(
@@ -123,37 +130,38 @@ const schemasReqStatus = componentsStore.getRequestStatus(
 
 const collapsibleRefs = ref<InstanceType<typeof TreeNode>[]>([]);
 
-const filterString = ref("");
-const filterStringCleaned = computed(() =>
-  filterString.value.trim().toLowerCase(),
+const searchString = ref("");
+const searchStringCleaned = computed(() =>
+  searchString.value.trim().toLowerCase(),
+);
+const filterModeActive = computed(
+  () => !!(searchStringCleaned.value || searchRef.value?.filteringActive),
 );
-const filterModeActive = computed(() => !!filterStringCleaned.value);
 
 function onSearchUpdated(newFilterString: string) {
-  filterString.value = newFilterString;
+  searchString.value = newFilterString;
   collapsibleRefs.value.forEach((c) => {
     c.toggleIsOpen(true);
   });
 }
 const categories = computed(() => componentsStore.categories);
 
-const filteredCategoriesAndSchemas = computed(() => {
-  if (!filterModeActive.value) return categories.value;
-
+const filteredCategoriesBySearchString = (
+  categories: Categories,
+  searchString = searchStringCleaned.value,
+) => {
   const inProgress = [] as Categories;
-  _.each(categories.value, (c) => {
+  _.each(categories, (c) => {
     // if the string matches the group, add the whole thing
-    if (c.displayName.toLowerCase().includes(filterStringCleaned.value)) {
+    if (c.displayName.toLowerCase().includes(searchString)) {
       inProgress.push(c);
       return;
     }
 
     // otherwise, filter out the individual assets that don't match
     const matchingSchemas = _.filter(c.schemas, (s) => {
       const categoryAndSchemaName = `${c.displayName} ${s.name}`;
-      return categoryAndSchemaName
-        .toLowerCase()
-        .includes(filterStringCleaned.value);
+      return categoryAndSchemaName.toLowerCase().includes(searchString);
     });
 
     if (matchingSchemas.length > 0) {
@@ -164,17 +172,97 @@ const filteredCategoriesAndSchemas = computed(() => {
     }
   });
   return inProgress;
+};
+
+const filteredCategoriesBySearchStringAndFilters = (
+  categories: Categories,
+  searchString = searchStringCleaned.value,
+) => {
+  let filteredAssets = filteredCategoriesBySearchString(
+    categories,
+    searchString,
+  );
+
+  if (searchRef.value?.filteringActive) {
+    for (
+      let index = 0;
+      index < searchRef.value?.activeFilters.length;
+      index++
+    ) {
+      if (searchRef.value?.activeFilters[index]) {
+        const filterFunction = filterFunctions[index];
+        if (filterFunction) {
+          filteredAssets = filterFunction(filteredAssets);
+        }
+      }
+    }
+  }
+
+  return filteredAssets;
+};
+
+const filteredCategoriesAndSchemas = computed(() => {
+  if (!filterModeActive.value) return categories.value;
+  else return filteredCategoriesBySearchStringAndFilters(categories.value);
+});
+
+const searchFiltersWithCounts = computed(() => {
+  const searchFilters: Array<Filter> = [
+    {
+      name: "AWS",
+      iconColor: "#FF9900",
+      iconName: "logo-aws",
+      count: computed(() =>
+        getAssetCount(
+          filteredCategoriesBySearchStringAndFilters(
+            filteredCategoriesBySearchStringAndFilters(categories.value),
+            "aws",
+          ),
+        ),
+      ).value,
+    },
+    {
+      name: "Docker",
+      iconColor: "#4695e7",
+      iconName: "logo-docker",
+      count: computed(() =>
+        getAssetCount(
+          filteredCategoriesBySearchStringAndFilters(
+            filteredCategoriesBySearchStringAndFilters(categories.value),
+            "docker",
+          ),
+        ),
+      ).value,
+    },
+  ];
+
+  return searchFilters;
 });
 
-const assetCount = computed(() => {
+const filterFunctions = [
+  // AWS FILTER
+  (assets: Categories) => {
+    return filteredCategoriesBySearchString(assets, "aws");
+  },
+  // DOCKER FILTER
+  (assets: Categories) => {
+    return filteredCategoriesBySearchString(assets, "docker");
+  },
+];
+
+const getAssetCount = (categories: Categories) => {
   let count = 0;
 
-  filteredCategoriesAndSchemas.value.forEach((category) => {
+  categories.forEach((category) => {
     count += category.schemas.length;
   });
 
   return count;
-});
+};
+
+const assetCount = computed(() =>
+  getAssetCount(filteredCategoriesAndSchemas.value),
+);
 
 const schemasById = computed(() => {
   return categories.value.reduce((p, c) => {

diff --git a/app/web/src/components/AttributesPanel/AttributesPanelItem.vue b/app/web/src/components/AttributesPanel/AttributesPanelItem.vue
@@ -391,7 +391,7 @@
               (e) => (newValueBoolean = (e.target as HTMLInputElement)?.checked)
             "
           />
-          <div class="attributes-panel-item__input-value">
+          <div class="attributes-panel-item__input-value-checkbox">
             <Icon
               :name="newValueBoolean === true ? 'check-square' : 'empty-square'"
               class="attributes-panel-item__checkbox-icon"
@@ -414,7 +414,7 @@
               {{ o.label }}
             </option>
           </select>
-          <div class="attributes-panel-item__input-value">
+          <div class="attributes-panel-item__input-value-select">
             {{ currentValue }}
           </div>
           <Icon
@@ -1332,12 +1332,19 @@ const sourceSelectMenuRef = ref<InstanceType<typeof DropdownMenu>>();
     pointer-events: none;
   }
 }
-.attributes-panel-item__input-value {
+.attributes-panel-item__input-value-checkbox {
   padding: 5px 8px;
   display: flex;
   align-items: center;
 }
 
+.attributes-panel-item__input-value-select {
+  padding: 5px 24px 5px 8px;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
 .attributes-panel-item__action-icons {
   gap: 4px;
   padding: 4px;