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<
-  modalBody: string;
+  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,18 +77,68 @@ 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_set
-    `Commit Hash: ${data.version.commit_hash}\nCommit Date: ${data.version.commit_date}\nCommit Branch: ${data.version.commit_branch}\n`
+      ? `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${
+  }\nPlatform: ${server.platform}\nInstaller: ${server.installer ? server.installer : ''}\n${
-    server.target && `Target: ${server.target}\n`
+    server.target ? `Target: ${server.target}\n` : ''
   }Active plugins: ${JSON.stringify(server.active_plugins)}`;
+
+  const tableData = [
+    {
+      ref: 'server',
+      title: <Trans>InvenTree Version</Trans>,
+      link: 'https://github.com/inventree/InvenTree/releases',
+      copy: true
+    },
+    {
+      ref: 'api',
+      title: <Trans>API Version</Trans>,
+      link: generateUrl('/api-doc/'),
+      copy: true
+    },
+    {
+      ref: 'python',
+      title: <Trans>Python Version</Trans>,
+      copy: true
+    },
+    {
+      ref: 'django',
+      title: <Trans>Django Version</Trans>,
+      link: 'https://www.djangoproject.com/',
+      copy: true
+    }
+  ];
+  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 />
@@ -94,66 +146,10 @@ export function AboutInvenTreeModal({
         <StylishText size='lg'>
           <Trans>Version Information</Trans>
         </StylishText>
-        {data.dev ? (
+        {renderVersionBadge(data)}
-          <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>
+        <Table.Tbody>{fillTable(tableData, data.version)}</Table.Tbody>
-          {fillTable(
-            [
-              {
-                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>,
-                link: generateUrl('/api-doc/'),
-                copy: true
-              },
-              {
-                ref: 'python',
-                title: <Trans>Python Version</Trans>,
-                copy: true
-              },
-              {
-                ref: 'django',
-                title: <Trans>Django Version</Trans>,
-                link: 'https://www.djangoproject.com/',
-                copy: true
-              }
-            ],
-            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>;
+}