refactor(webui): replace Tag with BundleTag versions

expo · Aug 28, 2024 · abdea62 · abdea62
1 parent 559acf5
commit abdea62
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/webui/src/app/(atlas)/[bundle].tsx b/webui/src/app/(atlas)/[bundle].tsx
@@ -3,6 +3,7 @@ import { keepPreviousData, useQuery } from '@tanstack/react-query';
 import type { ModuleGraphResponse } from '~/app/--/bundles/[bundle]/modules/graph+api';
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { BundleTag } from '~/components/BundleTag';
 import { FileSize } from '~/components/FileSize';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
@@ -15,7 +16,6 @@ import {
 import { useModuleFilters } from '~/hooks/useModuleFilters';
 import { useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
-import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type ModuleFilters, moduleFiltersToParams } from '~/utils/filters';
 
@@ -38,7 +38,7 @@ export default function BundlePage() {
         <LayoutTitle>
           <h1 className="text-lg font-bold mr-8">Bundle</h1>
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <BundleTag platform={bundle.platform} environment={bundle.environment} />
             {!!modules.data && <span>{modules.data.bundle.moduleFiles} modules</span>}
             {!!modules.data && <FileSize byteSize={modules.data.bundle.moduleSize} />}
             {!!modules.data && modulesAreFiltered && (

diff --git a/webui/src/app/(atlas)/[bundle]/folders/[path].tsx b/webui/src/app/(atlas)/[bundle]/folders/[path].tsx
@@ -5,6 +5,7 @@ import type { ModuleGraphResponse } from '~/app/--/bundles/[bundle]/modules/grap
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { BundleTag } from '~/components/BundleTag';
 import { FileSize } from '~/components/FileSize';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
 import { PropertySummary } from '~/components/PropertySummary';
@@ -17,7 +18,6 @@ import {
 import { useModuleFilters } from '~/hooks/useModuleFilters';
 import { useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
-import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type ModuleFilters, moduleFiltersToParams } from '~/utils/filters';
 
@@ -37,7 +37,7 @@ export default function FolderPage() {
         <LayoutTitle>
           <BreadcrumbLinks bundle={bundle} path={relativePath!} />
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <BundleTag platform={bundle.platform} environment={bundle.environment} />
             <span>folder</span>
             {!!modules.data?.filtered.moduleFiles && (
               <span>

diff --git a/webui/src/app/(atlas)/[bundle]/modules/[path].tsx b/webui/src/app/(atlas)/[bundle]/modules/[path].tsx
@@ -3,6 +3,7 @@ import { useLocalSearchParams } from 'expo-router';
 
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
+import { BundleTag } from '~/components/BundleTag';
 import { FileSize } from '~/components/FileSize';
 import { ModuleCode } from '~/components/ModuleCode';
 import { ModuleReference } from '~/components/ModuleReference';
@@ -11,7 +12,6 @@ import { DataErrorState, NoDataState } from '~/components/StateInfo';
 import { useBundle } from '~/providers/bundle';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
 import { Skeleton } from '~/ui/Skeleton';
-import { Tag } from '~/ui/Tag';
 import { fetchApi, handleApiError } from '~/utils/api';
 import { type AtlasModule } from '~core/data/types';
 
@@ -29,7 +29,7 @@ export default function ModulePage() {
         <LayoutTitle>
           <BreadcrumbLinks bundle={bundle} path={relativePath!} />
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <BundleTag platform={bundle.platform} environment={bundle.environment} />
             {!!module.data?.package && <span>{module.data.package}</span>}
             {!!module.data && <span>{getModuleType(module.data)}</span>}
             {!!module.data && <FileSize byteSize={module.data.size} />}

diff --git a/webui/src/components/BundleSelectForm.tsx b/webui/src/components/BundleSelectForm.tsx
@@ -4,9 +4,9 @@ import { useRouter } from 'expo-router';
 // @ts-expect-error
 import ChevronDownIcon from 'lucide-react/dist/esm/icons/chevron-down';
 
+import { BundleTag } from '~/components/BundleTag';
 import { useBundle } from '~/providers/bundle';
 import { Button } from '~/ui/Button';
-import { Tag } from '~/ui/Tag';
 import { relativeBundlePath } from '~/utils/bundle';
 
 export function BundleSelectForm() {
@@ -17,7 +17,12 @@ export function BundleSelectForm() {
     <Select.Root value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
       <Select.Trigger asChild>
         <Button variant="quaternary" size="sm">
-          <Tag variant={bundle.platform} size="xs" className="mr-2" />
+          <BundleTag
+            className="mr-2"
+            size="xs"
+            platform={bundle.platform}
+            environment={bundle.environment}
+          />
           <Select.Value placeholder="Select bundle to inspect" />
           <Select.Icon className="text-icon-default">
             <ChevronDownIcon size={16} className="m-1 mr-0 align-middle" />
@@ -39,7 +44,12 @@ export function BundleSelectForm() {
               <div key={item.id}>
                 <Select.Item value={item.id} asChild>
                   <Button variant="quaternary" size="sm" className="w-full !justify-start my-0.5">
-                    <Tag variant={item.platform} size="xs" className="mr-2" />
+                    <BundleTag
+                      className="mr-2"
+                      size="xs"
+                      platform={item.platform}
+                      environment={item.environment}
+                    />
                     <Select.ItemText>{relativeBundlePath(item, item.entryPoint)}</Select.ItemText>
                   </Button>
                 </Select.Item>