fix settings title

Signed-off-by: BenHesketh21 <[email protected]>
akuity · Dec 13, 2024 · ea28bbc · ea28bbc
1 parent 042472c
commit ea28bbc
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 79 deletions.
diff --git a/ui/src/features/project/analysis-templates/analysis-templates-list.tsx b/ui/src/features/project/analysis-templates/analysis-templates-list.tsx
@@ -31,83 +31,85 @@ export const AnalysisTemplatesList = () => {
   });
 
   return (
-    <Table<AnalysisTemplate>
-      dataSource={data?.analysisTemplates}
-      pagination={{ hideOnSinglePage: true }}
-      rowKey={(i) => i.metadata?.name || ''}
-      loading={isLoading}
-      expandable={descriptionExpandable()}
-    >
-      <Table.Column<AnalysisTemplate>
-        title='Creation Date'
-        width={200}
-        render={(_, template) => {
-          const date = template.metadata?.creationTimestamp?.toDate();
-          return date ? format(date, 'MMM do yyyy HH:mm:ss') : '';
-        }}
-      />
-      <Table.Column<AnalysisTemplate> title='Name' dataIndex={['metadata', 'name']} />
-      <Table.Column<AnalysisTemplate>
-        width={260}
-        title={
-          <div className='text-right'>
-            <Button
-              type='primary'
-              className='ml-auto text-xs font-semibold'
-              icon={<FontAwesomeIcon icon={faPlus} />}
-              onClick={() => showCreate()}
-            >
-              ADD TEMPLATE
-            </Button>
-          </div>
-        }
-        render={(_, template) => (
-          <div className='flex gap-2 justify-end'>
-            <Button
-              icon={<FontAwesomeIcon icon={faPencil} />}
-              className='mr-2 ml-auto'
-              onClick={() => {
-                showEdit((p) => (
-                  <EditAnalysisTemplateModal
-                    {...p}
-                    templateName={template.metadata?.name || ''}
-                    projectName={name || ''}
-                  />
-                ));
-              }}
-            >
-              Edit
-            </Button>
-            <Button
-              icon={<FontAwesomeIcon icon={faTrash} />}
-              danger
-              loading={isDeleting}
-              onClick={() => {
-                confirm({
-                  title: (
-                    <div className='flex items-center'>
-                      <FontAwesomeIcon icon={faTrash} className='mr-2' />
-                      Delete Analysis Template
-                    </div>
-                  ),
-                  content: (
-                    <p>
-                      Are you sure you want to delete AnalysisTemplate{' '}
-                      <b>{template?.metadata?.name}</b>?
-                    </p>
-                  ),
-                  onOk: () => {
-                    deleteTemplate({ project: name || '', name: template?.metadata?.name || '' });
-                  },
-                  hide: () => {}
-                });
-              }}
-            >
-              Delete
-            </Button>
-          </div>
-        )}
-      />
-    </Table>
+    <div className='p-4'>
+      <Table<AnalysisTemplate>
+        dataSource={data?.analysisTemplates}
+        pagination={{ hideOnSinglePage: true }}
+        rowKey={(i) => i.metadata?.name || ''}
+        loading={isLoading}
+        expandable={descriptionExpandable()}
+      >
+        <Table.Column<AnalysisTemplate>
+          title='Creation Date'
+          width={200}
+          render={(_, template) => {
+            const date = template.metadata?.creationTimestamp?.toDate();
+            return date ? format(date, 'MMM do yyyy HH:mm:ss') : '';
+          }}
+        />
+        <Table.Column<AnalysisTemplate> title='Name' dataIndex={['metadata', 'name']} />
+        <Table.Column<AnalysisTemplate>
+          width={260}
+          title={
+            <div className='text-right'>
+              <Button
+                type='primary'
+                className='ml-auto text-xs font-semibold'
+                icon={<FontAwesomeIcon icon={faPlus} />}
+                onClick={() => showCreate()}
+              >
+                ADD TEMPLATE
+              </Button>
+            </div>
+          }
+          render={(_, template) => (
+            <div className='flex gap-2 justify-end'>
+              <Button
+                icon={<FontAwesomeIcon icon={faPencil} />}
+                className='mr-2 ml-auto'
+                onClick={() => {
+                  showEdit((p) => (
+                    <EditAnalysisTemplateModal
+                      {...p}
+                      templateName={template.metadata?.name || ''}
+                      projectName={name || ''}
+                    />
+                  ));
+                }}
+              >
+                Edit
+              </Button>
+              <Button
+                icon={<FontAwesomeIcon icon={faTrash} />}
+                danger
+                loading={isDeleting}
+                onClick={() => {
+                  confirm({
+                    title: (
+                      <div className='flex items-center'>
+                        <FontAwesomeIcon icon={faTrash} className='mr-2' />
+                        Delete Analysis Template
+                      </div>
+                    ),
+                    content: (
+                      <p>
+                        Are you sure you want to delete AnalysisTemplate{' '}
+                        <b>{template?.metadata?.name}</b>?
+                      </p>
+                    ),
+                    onOk: () => {
+                      deleteTemplate({ project: name || '', name: template?.metadata?.name || '' });
+                    },
+                    hide: () => {}
+                  });
+                }}
+              >
+                Delete
+              </Button>
+            </div>
+          )}
+        />
+      </Table>
+    </div>
   );
 };
diff --git a/ui/src/pages/settings.tsx b/ui/src/pages/settings.tsx
@@ -30,11 +30,18 @@ export const Settings = ({ section = 'verification' }: { section?: string }) =>
     }
   };
 
+  const getSectionTitle = (section: string) => {
+    switch (section) {
+      case 'verification':
+        return 'Cluster Analysis Templates';
+    }
+  };
+
   return (
     <div className='p-6'>
       <Flex justify='space-between'>
         <PageTitle title='Settings' />
-        <div className='text-2xl font-semibold flex items-center'>Cluster Analysis Templates</div>
+        <div className='text-2xl font-semibold flex items-top'>{getSectionTitle(section)}</div>
       </Flex>
       <Flex justify='space-between'>
         <Menu mode='vertical' items={items} />