feat(frontend): Hide empty args in about dialog (#9033)

* clean up version info text

* feat(frontend): Hide empty args in about dialog

* simplify

* simplify more

src/frontend/src/components/modals/AboutInvenTreeModal.tsx

@@ -31,13 +31,15 @@ type AboutLookupRef = {
 export function AboutInvenTreeModal({
   context,
   id
-}: ContextModalProps<{
+}: Readonly<
+  ContextModalProps<{
     modalBody: string;
-}>) {
+  }>
+>) {
   const [user] = useUserState((state) => [state.user]);
   const [server] = useServerApiState((state) => [state.server]);
 
-  if (user?.is_staff != true)
+  if (!user?.is_staff)
     return (
       <Text>
         <Trans>This information is only available for staff users</Trans>
@@ -75,64 +77,30 @@ export function AboutInvenTreeModal({
   /* renderer */
   if (isLoading) return <Trans>Loading</Trans>;
 
+  const commit_set: boolean =
+    data.version.commit_hash && data.version.commit_date;
+
   const copyval = `InvenTree-Version: ${data.version.server}\nDjango Version: ${
     data.version.django
   }\n${
-    data.version.commit_hash &&
-    `Commit Hash: ${data.version.commit_hash}\nCommit Date: ${data.version.commit_date}\nCommit Branch: ${data.version.commit_branch}\n`
+    commit_set
+      ? `Commit Hash: ${data.version.commit_hash}\nCommit Date: ${data.version.commit_date}\nCommit Branch: ${data.version.commit_branch}\n`
+      : ''
   }Database: ${server.database}\nDebug-Mode: ${
     server.debug_mode ? 'True' : 'False'
   }\nDeployed using Docker: ${
     server.docker_mode ? 'True' : 'False'
-  }\nPlatform: ${server.platform}\nInstaller: ${server.installer}\n${
-    server.target && `Target: ${server.target}\n`
+  }\nPlatform: ${server.platform}\nInstaller: ${server.installer ? server.installer : ''}\n${
+    server.target ? `Target: ${server.target}\n` : ''
   }Active plugins: ${JSON.stringify(server.active_plugins)}`;
-  return (
-    <Stack>
-      <Divider />
-      <Group justify='space-between' wrap='nowrap'>
-        <StylishText size='lg'>
-          <Trans>Version Information</Trans>
-        </StylishText>
-        {data.dev ? (
-          <Badge color='blue'>
-            <Trans>Development Version</Trans>
-          </Badge>
-        ) : data.up_to_date ? (
-          <Badge color='green'>
-            <Trans>Up to Date</Trans>
-          </Badge>
-        ) : (
-          <Badge color='teal'>
-            <Trans>Update Available</Trans>
-          </Badge>
-        )}
-      </Group>
-      <Table striped>
-        <Table.Tbody>
-          {fillTable(
-            [
+
+  const tableData = [
     {
       ref: 'server',
       title: <Trans>InvenTree Version</Trans>,
       link: 'https://github.com/inventree/InvenTree/releases',
       copy: true
     },
-              {
-                ref: 'commit_hash',
-                title: <Trans>Commit Hash</Trans>,
-                copy: true
-              },
-              {
-                ref: 'commit_date',
-                title: <Trans>Commit Date</Trans>,
-                copy: true
-              },
-              {
-                ref: 'commit_branch',
-                title: <Trans>Commit Branch</Trans>,
-                copy: true
-              },
     {
       ref: 'api',
       title: <Trans>API Version</Trans>,
@@ -150,10 +118,38 @@ export function AboutInvenTreeModal({
       link: 'https://www.djangoproject.com/',
       copy: true
     }
-            ],
-            data.version
-          )}
-        </Table.Tbody>
+  ];
+  if (commit_set) {
+    tableData.push(
+      {
+        ref: 'commit_hash',
+        title: <Trans>Commit Hash</Trans>,
+        copy: true
+      },
+      {
+        ref: 'commit_date',
+        title: <Trans>Commit Date</Trans>,
+        copy: true
+      },
+      {
+        ref: 'commit_branch',
+        title: <Trans>Commit Branch</Trans>,
+        copy: true
+      }
+    );
+  }
+
+  return (
+    <Stack>
+      <Divider />
+      <Group justify='space-between' wrap='nowrap'>
+        <StylishText size='lg'>
+          <Trans>Version Information</Trans>
+        </StylishText>
+        {renderVersionBadge(data)}
+      </Group>
+      <Table striped>
+        <Table.Tbody>{fillTable(tableData, data.version)}</Table.Tbody>
       </Table>
       <Divider />
       <StylishText size='lg'>
@@ -189,3 +185,17 @@ export function AboutInvenTreeModal({
     </Stack>
   );
 }
+
+function renderVersionBadge(data: any) {
+  const badgeType = () => {
+    if (data.dev) {
+      return { color: 'blue', label: <Trans>Development Version</Trans> };
+    } else if (data.up_to_date) {
+      return { color: 'green', label: <Trans>Up to Date</Trans> };
+    } else {
+      return { color: 'teal', label: <Trans>Update Available</Trans> };
+    }
+  };
+  const { color, label } = badgeType();
+  return <Badge color={color}>{label}</Badge>;
+}