refactor gridrow

Author: fiskus

catalog/app/containers/Bucket/PackageCompare/Diff/Entries.tsx

@@ -16,14 +16,12 @@ import type { Revision, RevisionResult } from '../useRevision'
 
 import Change from './Change'
 import type { Dir, Order } from './Change'
+import GridRow from './GridRow'
 
 const useAddedStyles = M.makeStyles((t) => ({
   root: {
     ...t.typography.body2,
   },
-  cell: {
-    padding: t.spacing(1.5, 1),
-  },
 }))
 
 interface AddedProps {
@@ -35,13 +33,9 @@ interface AddedProps {
 function Added({ className, dir, logicalKey }: AddedProps) {
   const classes = useAddedStyles()
   return (
-    <GridRow className={cx(classes.root, className)}>
-      <div className={classes.cell}>
-        <Change order={dir === 'forward' ? 'former' : 'latter'}>{logicalKey}</Change>
-      </div>
-      <div className={classes.cell}>
-        <Change order={dir === 'forward' ? 'latter' : 'former'}>{logicalKey}</Change>
-      </div>
+    <GridRow className={cx(classes.root, className)} divided>
+      <Change order={dir === 'forward' ? 'former' : 'latter'}>{logicalKey}</Change>
+      <Change order={dir === 'forward' ? 'latter' : 'former'}>{logicalKey}</Change>
     </GridRow>
   )
 }
@@ -50,10 +44,6 @@ const useUnmodifiedStyles = M.makeStyles((t) => ({
   root: {
     ...t.typography.body2,
     color: t.palette.text.secondary,
-    padding: t.spacing(1.5, 1),
-  },
-  label: {
-    paddingLeft: t.spacing(1),
   },
 }))
 
@@ -66,43 +56,90 @@ function Unmodified({ className, logicalKey }: UnmodifiedProps) {
   const classes = useUnmodifiedStyles()
   return (
     <GridRow className={cx(classes.root, className)}>
-      <span>{logicalKey}</span>
-      <i className={classes.label}>Unmodified</i>
+      {logicalKey}
+      <i>Unmodified</i>
     </GridRow>
   )
 }
 
-const useGridRowStyles = M.makeStyles({
-  root: {
-    display: 'grid',
-    gridTemplateColumns: '1fr 1fr',
-  },
-})
+type Modifications = Record<keyof Model.PackageEntry, boolean>
 
-interface GridRowProps {
+function getEntryChanges(
+  entry: Model.PackageEntry,
+  modified: Modifications,
+): Partial<Model.PackageEntry> {
+  return {
+    physicalKey: modified.physicalKey ? entry.physicalKey : undefined,
+    hash: modified.hash ? entry.hash : undefined,
+    size: modified.size ? entry.size : undefined,
+    meta: modified.meta ? entry.meta : undefined,
+  }
+}
+
+interface ModifiedProps {
+  className: string
+  logicalKey: string
+  dir: Dir
+  left: Model.PackageEntry
+  right: Model.PackageEntry
+  modified: Modifications
+}
+
+function Modified({ className, dir, logicalKey, left, right, modified }: ModifiedProps) {
+  const changes = React.useMemo(
+    () => ({
+      left: getEntryChanges(left, modified),
+      right: getEntryChanges(right, modified),
+    }),
+    [left, right, modified],
+  )
+  return (
+    <GridRow className={className} dense divided>
+      <EntrySide
+        logicalKey={logicalKey}
+        order={dir === 'forward' ? 'former' : 'latter'}
+        changes={changes.left}
+      />
+      <EntrySide
+        logicalKey={logicalKey}
+        order={dir === 'forward' ? 'latter' : 'former'}
+        changes={changes.right}
+      />
+    </GridRow>
+  )
+}
+
+interface PhysicalKeyProps {
   className?: string
-  children: React.ReactNode
+  url: string
 }
 
-function GridRow({ className, children }: GridRowProps) {
-  const classes = useGridRowStyles()
-  return <div className={cx(className, classes.root)}>{children}</div>
+function PhysicalKey({ className, url }: PhysicalKeyProps) {
+  const { urls } = NamedRoutes.use()
+  const to = React.useMemo(() => {
+    const { bucket, key, version } = s3paths.parseS3Url(url)
+    return urls.bucketFile(bucket, key, version)
+  }, [url, urls])
+  return (
+    <StyledLink className={className} to={to}>
+      {url}
+    </StyledLink>
+  )
 }
 
 type Changes =
-  | { _tag: 'unmodified'; logicalKey: string }
-  | { _tag: 'added'; logicalKey: string; entry: Model.PackageEntry; dir: Dir }
+  | { _tag: 'added'; entry: Model.PackageEntry }
+  | { _tag: 'unmodified' }
   | {
       _tag: 'modified'
-      logicalKey: string
-      left: Partial<Model.PackageEntry>
-      right: Partial<Model.PackageEntry>
+      modified: Modifications
+      left: Model.PackageEntry
+      right: Model.PackageEntry
     }
 
 const useEntrySideStyles = M.makeStyles((t) => ({
   root: {
-    overflow: 'hidden',
-    padding: t.spacing(1),
+    ...t.typography.body1,
   },
   hash: {
     fontFamily: t.typography.monospace.fontFamily,
@@ -111,7 +148,7 @@ const useEntrySideStyles = M.makeStyles((t) => ({
     whiteSpace: 'nowrap',
     display: 'flex',
     alignItems: 'center',
-    marginTop: t.spacing(1),
+    margin: t.spacing(1, 0, 0),
   },
   value: {
     overflow: 'hidden',
@@ -130,39 +167,39 @@ interface EntrySideProps {
   order: Order
 }
 
-function EntrySide({ className, changes, logicalKey, order }: EntrySideProps) {
+function EntrySide({ changes, logicalKey, order }: EntrySideProps) {
   const classes = useEntrySideStyles()
   return (
-    <div className={cx(classes.root, className)}>
+    <div className={classes.root}>
       <M.Typography variant="subtitle2" color="textSecondary">
         {logicalKey}
       </M.Typography>
 
       {changes.physicalKey && (
-        <M.Typography className={classes.property}>
+        <p className={classes.property}>
           <Icons.LinkOutlined className={classes.icon} fontSize="small" />
           <Change order={order} className={classes.value}>
             <PhysicalKey url={changes.physicalKey} />
           </Change>
-        </M.Typography>
+        </p>
       )}
 
       {changes.hash && (
-        <M.Typography className={classes.property}>
+        <p className={classes.property}>
           <Icons.LockOutlined className={classes.icon} fontSize="small" />
           <Change order={order} className={cx(classes.hash, classes.value)}>
             {changes.hash.value}
           </Change>
-        </M.Typography>
+        </p>
       )}
 
       {changes.size && (
-        <M.Typography variant="body2" className={classes.property}>
+        <p className={classes.property}>
           <Icons.InsertDriveFileOutlined className={classes.icon} fontSize="small" />
           <Change order={order} className={classes.value}>
             {readableBytes(changes.size)}
           </Change>
-        </M.Typography>
+        </p>
       )}
 
       {changes.meta && (
@@ -175,85 +212,34 @@ function EntrySide({ className, changes, logicalKey, order }: EntrySideProps) {
   )
 }
 
-interface PhysicalKeyProps {
-  className?: string
-  url: string
-}
-
-function PhysicalKey({ className, url }: PhysicalKeyProps) {
-  const { urls } = NamedRoutes.use()
-  const to = React.useMemo(() => {
-    const { bucket, key, version } = s3paths.parseS3Url(url)
-    return urls.bucketFile(bucket, key, version)
-  }, [url, urls])
-  return (
-    <StyledLink className={className} to={to}>
-      {url}
-    </StyledLink>
-  )
-}
-
-function getEntryChanges(
-  entry: Model.PackageEntry,
-  modified: Record<keyof Model.PackageEntry, boolean>,
-) {
-  return {
-    physicalKey: modified.physicalKey ? entry.physicalKey : undefined,
-    hash: modified.hash ? entry.hash : undefined,
-    size: modified.size ? entry.size : undefined,
-    meta: modified.meta ? entry.meta : undefined,
-  }
-}
-
-function getChanges(
-  dir: Dir,
-  logicalKey: string,
-  left?: Model.PackageEntry,
-  right?: Model.PackageEntry,
-): Changes {
+function getChanges(left?: Model.PackageEntry, right?: Model.PackageEntry): Changes {
   if (!left || !right) {
     const entry = left || right
     if (!entry) {
       throw new Error('Must be at least one entry')
     }
-    return { _tag: 'added', logicalKey, entry, dir }
+    return { _tag: 'added', entry }
   }
 
   const physicalKey = left.physicalKey !== right.physicalKey
   const hash = left.hash.value !== right.hash.value
   const size = left.size !== right.size
   const meta = JSON.stringify(left.meta) !== JSON.stringify(right.meta)
-  if (!physicalKey && !hash && !size && !meta) return { _tag: 'unmodified', logicalKey }
-  const modified = { physicalKey, hash, size, meta }
-  return {
-    _tag: 'modified',
-    logicalKey,
-    left: getEntryChanges(left, modified),
-    right: getEntryChanges(right, modified),
-  }
-}
+  if (!physicalKey && !hash && !size && !meta) return { _tag: 'unmodified' }
 
-const useEntriesRowStyles = M.makeStyles((t) => ({
-  side: {
-    borderLeft: `1px solid ${t.palette.divider}`,
-  },
-}))
+  return { _tag: 'modified', modified: { physicalKey, hash, size, meta }, left, right }
+}
 
-interface EntriesRowProps {
+interface RowProps {
   className: string
   logicalKey: string
   left?: Model.PackageEntry
   right?: Model.PackageEntry
   dir: Dir
 }
 
-function EntriesRow({ className, dir, logicalKey, left, right }: EntriesRowProps) {
-  const classes = useEntriesRowStyles()
-
-  const changes = React.useMemo(
-    () => getChanges(dir, logicalKey, left, right),
-    [dir, logicalKey, left, right],
-  )
+function Row({ className, dir, logicalKey, left, right }: RowProps) {
+  const changes = React.useMemo(() => getChanges(left, right), [left, right])
 
   switch (changes._tag) {
     case 'unmodified':
@@ -262,19 +248,14 @@ function EntriesRow({ className, dir, logicalKey, left, right }: EntriesRowProps
       return <Added className={className} dir={dir} logicalKey={logicalKey} />
     case 'modified':
       return (
-        <GridRow className={className}>
-          <EntrySide
-            logicalKey={logicalKey}
-            order={dir === 'forward' ? 'former' : 'latter'}
-            changes={changes.left}
-          />
-          <EntrySide
-            className={classes.side}
-            logicalKey={logicalKey}
-            order={dir === 'forward' ? 'latter' : 'former'}
-            changes={changes.right}
-          />
-        </GridRow>
+        <Modified
+          className={className}
+          dir={dir}
+          logicalKey={logicalKey}
+          left={changes.left}
+          right={changes.right}
+          modified={changes.modified}
+        />
       )
     default:
       assertNever(changes)
@@ -284,14 +265,20 @@ function EntriesRow({ className, dir, logicalKey, left, right }: EntriesRowProps
 const useStyles = M.makeStyles((t) => ({
   row: {
     borderBottom: `1px solid ${t.palette.divider}`,
+    '&:last-child': {
+      borderBottom: 'none',
+    },
   },
   head: {
-    overflow: 'hidden',
-    padding: t.spacing(1),
     background: t.palette.background.default,
-    '& + &': {
-      borderLeft: `1px solid ${t.palette.divider}`,
-    },
+    ...t.typography.caption,
+  },
+  empty: {
+    ...t.typography.body2,
+    color: t.palette.text.secondary,
+    fontStyle: 'italic',
+    textAlign: 'center',
+    padding: t.spacing(2),
   },
 }))
 
@@ -321,25 +308,17 @@ function EntriesDiff({ left, right }: EntriesDiffProps) {
   )
 
   if (entries.keys.length === 0) {
-    return (
-      <M.Typography
-        variant="body2"
-        color="textSecondary"
-        style={{ fontStyle: 'italic', textAlign: 'center', padding: 16 }}
-      >
-        No entries found
-      </M.Typography>
-    )
+    return <div className={classes.empty}>No entries found</div>
   }
 
   return (
     <div>
-      <GridRow className={classes.row}>
-        <div className={classes.head}>{left.hash}</div>
-        <div className={classes.head}>{right.hash}</div>
+      <GridRow className={cx(classes.row, classes.head)} dense divided>
+        {left.hash}
+        {right.hash}
       </GridRow>
       {entries.keys.map((logicalKey) => (
-        <EntriesRow
+        <Row
           className={classes.row}
           key={logicalKey}
           logicalKey={logicalKey}