refactor(webui): add property summary

expo · Apr 19, 2024 · 773b8f8 · 773b8f8
1 parent f64203d
commit 773b8f8
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 75 deletions.
diff --git a/webui/src/app/(atlas)/[entry]/folders/[path].tsx b/webui/src/app/(atlas)/[entry]/folders/[path].tsx
@@ -6,6 +6,7 @@ import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
+import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
 import { EntryDeltaToast, useEntry } from '~/providers/entries';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
@@ -29,7 +30,18 @@ export default function FolderPage() {
       <LayoutHeader>
         <LayoutTitle>
           <BreadcrumbLinks entry={entry} path={absolutePath!} />
-          {!!modules.data && <FolderSummary data={modules.data} />}
+          {!!modules.data && (
+            <PropertySummary>
+              <Tag variant={entry.platform} />
+              <span>folder</span>
+              <span>
+                {modules.data.filtered.moduleFiles === 1
+                  ? `${modules.data.filtered.moduleFiles} module`
+                  : `${modules.data.filtered.moduleFiles} modules`}
+              </span>
+              <span>{formatFileSize(modules.data.filtered.moduleSize)}</span>
+            </PropertySummary>
+          )}
         </LayoutTitle>
         <ModuleFiltersForm disableNodeModules />
       </LayoutHeader>
@@ -51,28 +63,6 @@ export default function FolderPage() {
   );
 }
 
-function FolderSummary({ data }: { data: ModuleGraphResponse }) {
-  return (
-    <div className="font-sm text-secondary">
-      {!!data.entry.platform && (
-        <>
-          <Tag variant={data.entry.platform} />
-          <span className="text-tertiary mx-2 select-none">-</span>
-        </>
-      )}
-      <span>folder</span>
-      <span className="text-tertiary mx-2 select-none">-</span>
-      <span>
-        {data.filtered.moduleFiles === 1
-          ? `${data.filtered.moduleFiles} module`
-          : `${data.filtered.moduleFiles} modules`}
-      </span>
-      <span className="text-tertiary mx-2 select-none">-</span>
-      <span>{formatFileSize(data.filtered.moduleSize)}</span>
-    </div>
-  );
-}
-
 /** Load the folder data from API, by path reference only */
 function useModuleGraphDataInFolder(entryId: string, path: string, filters: ModuleFilters) {
   return useQuery<ModuleGraphResponse>({

diff --git a/webui/src/app/(atlas)/[entry]/index.tsx b/webui/src/app/(atlas)/[entry]/index.tsx
@@ -4,6 +4,7 @@ import type { ModuleGraphResponse } from '~/app/--/entries/[entry]/modules/graph
 import { BundleGraph } from '~/components/BundleGraph';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleFiltersForm } from '~/components/ModuleFilterForm';
+import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
 import { EntryDeltaToast, useEntry } from '~/providers/entries';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
@@ -27,7 +28,22 @@ export default function BundlePage() {
       <LayoutHeader>
         <LayoutTitle>
           <h1 className="text-lg font-bold mr-8">Bundle</h1>
-          {!!modules.data && <BundleSummary data={modules.data} />}
+          {!!modules.data && (
+            <PropertySummary>
+              <Tag variant={entry.platform} />
+              <span>{modules.data.entry.moduleFiles} modules</span>
+              <span>{formatFileSize(modules.data.entry.moduleSize)}</span>
+              {modules.data.filtered.moduleFiles !== modules.data.entry.moduleFiles && (
+                <PropertySummary
+                  className="text-tertiary italic"
+                  prefix={<span className="select-none mr-2">visible:</span>}
+                >
+                  <span>{modules.data.filtered.moduleFiles} modules</span>
+                  <span>{formatFileSize(modules.data.filtered.moduleSize)}</span>
+                </PropertySummary>
+              )}
+            </PropertySummary>
+          )}
         </LayoutTitle>
         <ModuleFiltersForm />
       </LayoutHeader>
@@ -53,27 +69,6 @@ export default function BundlePage() {
   );
 }
 
-function BundleSummary({ data }: { data: ModuleGraphResponse }) {
-  return (
-    <div className="font-sm text-secondary inline-block">
-      <Tag variant={data.entry.platform} />
-      <span className="text-tertiary mx-2 select-none">-</span>
-      <span>{data.entry.moduleFiles} modules</span>
-      <span className="text-tertiary mx-2 select-none">-</span>
-      <span>{formatFileSize(data.entry.moduleSize)}</span>
-      {data.filtered.moduleFiles !== data.entry.moduleFiles && (
-        <div className="text-tertiary italic inline">
-          <span className="mx-2 select-none">—</span>
-          <span className="mr-2 select-none italic ">visible:</span>
-          <span>{data.filtered.moduleFiles} modules</span>
-          <span className="mx-2 select-none">-</span>
-          <span>{formatFileSize(data.filtered.moduleSize)}</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
 /** Load the bundle graph data from API, with default or custom filters */
 function useModuleGraphData(entryId: string, filters: ModuleFilters) {
   return useQuery<ModuleGraphResponse>({

diff --git a/webui/src/app/(atlas)/[entry]/modules/[path].tsx b/webui/src/app/(atlas)/[entry]/modules/[path].tsx
@@ -4,6 +4,7 @@ import { Link, useLocalSearchParams } from 'expo-router';
 import { BreadcrumbLinks } from '~/components/BreadcrumbLinks';
 import { BundleSelectForm } from '~/components/BundleSelectForm';
 import { ModuleCode } from '~/components/ModuleCode';
+import { PropertySummary } from '~/components/PropertySummary';
 import { StateInfo } from '~/components/StateInfo';
 import { EntryDeltaToast, useEntry } from '~/providers/entries';
 import { Layout, LayoutHeader, LayoutNavigation, LayoutTitle } from '~/ui/Layout';
@@ -12,7 +13,7 @@ import { Tag } from '~/ui/Tag';
 import { fetchApi } from '~/utils/api';
 import { relativeEntryPath } from '~/utils/entry';
 import { formatFileSize } from '~/utils/formatString';
-import { type PartialAtlasEntry, type AtlasModule } from '~core/data/types';
+import { type AtlasModule } from '~core/data/types';
 
 export default function ModulePage() {
   const { entry } = useEntry();
@@ -27,7 +28,14 @@ export default function ModulePage() {
       <LayoutHeader>
         <LayoutTitle>
           <BreadcrumbLinks entry={entry} path={absolutePath!} />
-          {!!module.data && <ModuleSummary platform={entry?.platform} module={module.data} />}
+          {!!module.data && (
+            <PropertySummary>
+              <Tag variant={entry.platform} />
+              {!!module.data.package && <span>{module.data.package}</span>}
+              <span>{getModuleType(module.data)}</span>
+              <span>{formatFileSize(module.data.size)}</span>
+            </PropertySummary>
+          )}
         </LayoutTitle>
       </LayoutHeader>
       <EntryDeltaToast entryId={entry.id} modulePath={absolutePath} />
@@ -68,34 +76,6 @@ export default function ModulePage() {
   );
 }
 
-function ModuleSummary({
-  module,
-  platform,
-}: {
-  module: AtlasModule;
-  platform?: PartialAtlasEntry['platform'];
-}) {
-  return (
-    <div className="font-sm text-secondary">
-      {!!platform && (
-        <>
-          <Tag variant={platform} />
-          <span className="text-tertiary mx-2 select-none">-</span>
-        </>
-      )}
-      {!!module.package && (
-        <>
-          <span>{module.package}</span>
-          <span className="text-tertiary mx-2 select-none">-</span>
-        </>
-      )}
-      <span>{getModuleType(module)}</span>
-      <span className="text-tertiary mx-2 select-none">-</span>
-      <span>{formatFileSize(module.size)}</span>
-    </div>
-  );
-}
-
 function getModuleType(module: AtlasModule) {
   const type = module.path.includes('?ctx=') ? 'require.context' : 'file';
   return module.package ? `package ${type}` : type;

diff --git a/webui/src/components/PropertySummary.tsx b/webui/src/components/PropertySummary.tsx
@@ -0,0 +1,26 @@
+import cn from 'classnames';
+import { Children, ReactNode, type PropsWithChildren } from 'react';
+
+/**
+ * Render various properties or attributes of a certain entity.
+ * This renders each of these properties with a separator in between.
+ */
+export function PropertySummary(
+  props: PropsWithChildren<{ className?: string; prefix?: ReactNode }>
+) {
+  return (
+    <div className={cn('inline font-sm text-secondary', props.className)}>
+      {props.prefix}
+      {Children.map(props.children, (child, index) => {
+        if (index === 0) return child;
+        if (!child) return null;
+        return (
+          <>
+            <span className="text-tertiary mx-2 select-none">-</span>
+            {child}
+          </>
+        );
+      })}
+    </div>
+  );
+}