Task/t UI 411 mixed page headers (#432)

* create apps and files help. * add indexes * work on headers * fix headers * Make apps (create new app) and systems (create new system) buttons uniform * create layout for jobs, update layout-module for jobs and files. * npm run prettier * Remove commented code, fix apps and systems toolbar to reflect create system, create app, accordingly.
tapis-project · Nov 11, 2024 · becdfa9 · becdfa9
1 parent 13d5fc6
commit becdfa9
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 50 deletions.
diff --git a/src/app/Apps/_Layout/Layout.module.scss b/src/app/Apps/_Layout/Layout.module.scss
diff --git a/src/app/Apps/_Layout/Layout.tsx b/src/app/Apps/_Layout/Layout.tsx
@@ -9,11 +9,17 @@ import {
 import AppsToolbar from '../_components/AppsToolbar';
 
 import { Router } from '../_Router';
+import AppsHelp from 'app/_components/Help/AppsHelp';
 
 const Layout: React.FC = () => {
   const header = (
     <LayoutHeader>
-      <div>Apps</div>
+      <span>
+        Apps
+        <span style={{ marginLeft: '16px' }}>
+          <AppsHelp />
+        </span>
+      </span>
       <AppsToolbar />
     </LayoutHeader>
   );

diff --git a/src/app/Apps/_components/AppsToolbar/AppsToolbar.module.scss b/src/app/Apps/_components/AppsToolbar/AppsToolbar.module.scss
@@ -3,16 +3,13 @@
   margin: 0;
   margin-top: 0.5em;
   display: flex !important;
+  gap: 8px;
 }
 
 .toolbar-btn {
   height: 2rem;
   align-items: center;
-  margin-left: 0.5em;
   font-size: 0.7em !important;
-  border-radius: 0 !important;
-  background-color: #f4f4f4 !important;
-  color: #333333 !important;
 }
 
 .toolbar-btn:disabled {

diff --git a/src/app/Apps/_components/AppsToolbar/AppsToolbar.tsx b/src/app/Apps/_components/AppsToolbar/AppsToolbar.tsx
@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { Button } from 'reactstrap';
+// import { Button } from 'reactstrap';
 import { Icon } from '@tapis/tapisui-common';
 import styles from './AppsToolbar.module.scss';
 import { useLocation } from 'react-router-dom';
 import CreateAppModal from './CreateAppModal';
+import { Button } from '@mui/material';
+import { Add } from '@mui/icons-material';
 
 type ToolbarButtonProps = {
   text: string;
-  icon: string;
+  icon: any;
   onClick: () => void;
   disabled: boolean;
 };
@@ -29,10 +31,12 @@ export const ToolbarButton: React.FC<ToolbarButtonProps> = ({
         disabled={disabled}
         onClick={onClick}
         className={styles['toolbar-btn']}
+        startIcon={icon}
+        variant="outlined"
+        size="small"
         {...rest}
       >
-        <Icon name={icon}></Icon>
-        <span> {text}</span>
+        <span>{text}</span>
       </Button>
     </div>
   );
@@ -50,13 +54,12 @@ const AppsToolbar: React.FC = () => {
       {pathname && (
         <div className={styles['toolbar-wrapper']}>
           <ToolbarButton
-            text="Create a New App"
-            icon="add"
+            text="Create App"
+            icon={<Add />}
             disabled={false}
             onClick={() => setModal('createApp')}
             aria-label="createApp"
           />
-
           {modal === 'createApp' && <CreateAppModal toggle={toggle} />}
         </div>
       )}

diff --git a/src/app/Files/_Layout/Layout.module.scss b/src/app/Files/_Layout/Layout.module.scss
@@ -3,3 +3,15 @@
   font-size: 0.8em;
   line-height: 1.8em;
 }
+
+.Files {
+  margin: 9px;
+  // margin-top: 1cqi;
+  position: relative;
+  top: 10px;
+  right: 08px;
+}
+
+.Files-Help {
+  padding-left: 1cap;
+}
diff --git a/src/app/Files/_Layout/Layout.tsx b/src/app/Files/_Layout/Layout.tsx
@@ -13,6 +13,7 @@ import { useLocation } from 'react-router-dom';
 import { breadcrumbsFromPathname } from '@tapis/tapisui-common';
 import styles from './Layout.module.scss';
 import { FilesProvider } from '../_components/FilesContext';
+import FilesHelp from 'app/_components/Help/FilesHelp';
 
 const Layout: React.FC = () => {
   const { pathname } = useLocation();
@@ -21,7 +22,12 @@ const Layout: React.FC = () => {
   const crumbs = breadcrumbsFromPathname(pathname).splice(1);
   const header = (
     <LayoutHeader>
-      Files
+      <span className={`${styles['Files']}`}>
+        Files
+        <span className={`${styles['Files-Help']}`}>
+          <FilesHelp />
+        </span>
+      </span>
       {/* <div className={styles.breadcrumbs}>
         
         <Breadcrumbs breadcrumbs={[{ text: 'Files' }, ...crumbs]} />

diff --git a/src/app/Jobs/_Layout/Layout.module.scss b/src/app/Jobs/_Layout/Layout.module.scss
@@ -0,0 +1,11 @@
+.Jobs {
+  margin: 9px;
+  // margin-top: 1cqi;
+  position: relative;
+  top: 10px;
+  right: 10px;
+}
+
+.Jobs-Help {
+  padding-left: 1cap;
+}
diff --git a/src/app/Jobs/_Layout/Layout.tsx b/src/app/Jobs/_Layout/Layout.tsx
@@ -8,18 +8,19 @@ import {
   SectionHeader,
 } from '@tapis/tapisui-common';
 import { Link } from 'react-router-dom';
+import styles from './Layout.module.scss';
 import { JobsHelp } from 'app/_components/Help';
 
 const Layout: React.FC = () => {
   const header = (
     <SectionHeader>
-      <span>
+      <span className={`${styles['Jobs']}`}>
         <span>
           <Link to="/jobs" style={{ color: '#444444' }}>
             Jobs
           </Link>
         </span>
-        <span style={{ marginLeft: '16px', marginTop: '-1px' }}>
+        <span className={`${styles['Jobs-Help']}`}>
           <JobsHelp />
         </span>
       </span>

diff --git a/src/app/Systems/_components/SystemToolbar/SystemToolbar.tsx b/src/app/Systems/_components/SystemToolbar/SystemToolbar.tsx
@@ -59,47 +59,13 @@ const SystemToolbar: React.FC = () => {
       {pathname && (
         <div className={styles['toolbar-wrapper']}>
           <ToolbarButton
-            text="Create"
+            text="Create System"
             icon={<Add />}
             disabled={false}
             onClick={() => setModal('createsystem')}
             aria-label="createSystem"
           />
-          {/* <ToolbarButton
-            text="Undelete"
-            icon={<Add />}
-            disabled={false}
-            onClick={() => setModal('undeletesystem')}
-            aria-label="undeleteSystem"
-          />
-          <ToolbarButton
-            color="error"
-            text="Delete"
-            icon={<Delete />}
-            disabled={false}
-            onClick={() => setModal('deletesystem')}
-            aria-label="deleteSystem"
-          /> */}
-          {/* New button for creating user credentials */}
-          {/* <ToolbarButton
-            text="Create User Credential"
-            icon="add" // Assuming 'add' is the icon for user credentials
-            disabled={false}
-            onClick={() => setModal('createusercredential')}
-            aria-label="createUserCredential"
-          /> */}
-          {/* Conditionally rendered modals */}
           {modal === 'createsystem' && <CreateSystemModal toggle={toggle} />}
-          {/* {modal === 'deletesystem' && <DeleteSystemModal toggle={toggle} />}
-          {modal === 'undeletesystem' && (
-            <UndeleteSystemModal toggle={toggle} />
-          )} */}
-          {/* {modal === 'createusercredential' && (
-            <CreateUserCredentialModal
-              toggle={toggle}
-              isOpen={modal === 'createusercredential'}
-            />
-          )} */}
         </div>
       )}
     </div>

diff --git a/src/app/_components/Help/AppsHelp/AppsHelp.tsx b/src/app/_components/Help/AppsHelp/AppsHelp.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Help } from '@tapis/tapisui-common';
+
+const AppsHelp: React.FC = () => {
+  return (
+    <Help
+      title="Tapis Apps"
+      iframeUrl="https://tapis.readthedocs.io/en/latest/technical/apps.html"
+    />
+  );
+};
+
+export default AppsHelp;
diff --git a/src/app/_components/Help/AppsHelp/index.ts b/src/app/_components/Help/AppsHelp/index.ts
@@ -0,0 +1 @@
+export { default } from './AppsHelp';
diff --git a/src/app/_components/Help/FilesHelp/FilesHelp.tsx b/src/app/_components/Help/FilesHelp/FilesHelp.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Help } from '@tapis/tapisui-common';
+
+const FilesHelp: React.FC = () => {
+  return (
+    <Help
+      title="Tapis Files"
+      iframeUrl="https://tapis.readthedocs.io/en/latest/technical/files.html"
+    />
+  );
+};
+
+export default FilesHelp;
diff --git a/src/app/_components/Help/FilesHelp/index.ts b/src/app/_components/Help/FilesHelp/index.ts
@@ -0,0 +1 @@
+export { default } from './FilesHelp';