Merge pull request #87 from tapis-project/task/TUI-75--listing-refresh

task/TUI-75 - listing refresh button
tapis-project · Jul 14, 2021 · fd7ddf0 · fd7ddf0
2 parents bfd18e5 + 2e2b833
commit fd7ddf0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/src/tapis-app/src/App/App.scss b/src/tapis-app/src/App/App.scss
@@ -46,6 +46,10 @@
 .workbench-content .wb-link {
   color: #9d85ef;
 }
+.workbench-content .btn-head {
+  color: #9d85ef;
+  cursor: pointer;
+}
 
 .workbench-content .btn-secondary {
   background-color: #F4F4F4;

diff --git a/src/tapis-app/src/Sections/Apps/Apps.tsx b/src/tapis-app/src/Sections/Apps/Apps.tsx
@@ -1,24 +1,25 @@
 import React, { useState, useCallback } from 'react';
 import { TapisApp } from '@tapis/tapis-typescript-apps';
+import { useDispatch } from 'react-redux';
+import { useApps, useJobs } from 'tapis-redux';
 import { Jobs } from '@tapis/tapis-typescript';
 import { AppsListing } from 'tapis-ui/components/apps';
 import { OnSelectCallback } from 'tapis-ui/components/apps/AppsListing';
 import JobLauncher from 'tapis-ui/components/jobs/JobLauncher';
-import { SectionMessage } from 'tapis-ui/_common';
+import { SectionMessage, Icon } from 'tapis-ui/_common';
 import { 
   ListSection, 
   ListSectionBody, 
   ListSectionDetail,
   ListSectionList,
   ListSectionHeader
 } from 'tapis-app/Sections/ListSection';
-import { useJobs } from 'tapis-redux';
-import { useDispatch } from 'react-redux';
 
 const Apps: React.FC = () => {
   const { resetSubmit } = useJobs();
   const dispatch = useDispatch();
   const [initialValues, setInitialValues] = useState<Jobs.ReqSubmitJob>(null);
+  const { list } = useApps();
   const appSelectCallback = useCallback<OnSelectCallback>(
     (app: TapisApp) => {
       dispatch(resetSubmit());
@@ -33,10 +34,22 @@ const Apps: React.FC = () => {
     },
     [ setInitialValues, dispatch, resetSubmit ]
   )
+  const refresh = () => {
+    setInitialValues(null);
+    dispatch(list({}));
+}
 
   return (
     <ListSection>
-      <ListSectionHeader>Apps</ListSectionHeader>
+      <ListSectionHeader>
+      <div>
+        Apps
+        &nbsp;
+        <span className="btn-head" onClick={refresh}>
+            <Icon name="refresh" />
+        </span>
+      </div>
+      </ListSectionHeader>
       <ListSectionBody>
         <ListSectionList>
           <AppsListing onSelect={appSelectCallback} select="jobAttributes,version" />

diff --git a/src/tapis-app/src/Sections/Jobs/Jobs.tsx b/src/tapis-app/src/Sections/Jobs/Jobs.tsx
@@ -1,8 +1,10 @@
 import React, { useState, useCallback } from 'react';
 import { JobListDTO } from '@tapis/tapis-typescript-jobs';
 import { JobsListing } from 'tapis-ui/components/jobs';
+import { useDispatch } from 'react-redux';
+import { useJobs } from 'tapis-redux';
 import { JobDetail } from 'tapis-ui/components/jobs';
-import { SectionMessage } from 'tapis-ui/_common';
+import { SectionMessage, Icon } from 'tapis-ui/_common';
 import { OnSelectCallback } from 'tapis-ui/components/jobs/JobsListing';
 import { 
   ListSection, 
@@ -14,16 +16,30 @@ import {
 
 const Jobs: React.FC = () => {
   const [job, setJob] = useState<JobListDTO>(null);
+  const { list } = useJobs();
+  const dispatch = useDispatch();
   const jobSelectCallback = useCallback<OnSelectCallback>(
     (job: JobListDTO) => {
       setJob(job);
     },
     [ setJob ]
   )
+  const refresh = () => {
+    setJob(null);
+    dispatch(list({request: { orderBy: "created(desc)"}}));
+}
 
   return (
     <ListSection>
-      <ListSectionHeader>Jobs</ListSectionHeader>
+      <ListSectionHeader>
+      <div>
+        Jobs
+        &nbsp;
+        <span className="btn-head" onClick={refresh}>
+            <Icon name="refresh" />
+        </span>
+      </div>
+      </ListSectionHeader>
       <ListSectionBody>
         <ListSectionList>
           <JobsListing onSelect={jobSelectCallback} />

diff --git a/src/tapis-app/src/Sections/Systems/Systems.tsx b/src/tapis-app/src/Sections/Systems/Systems.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useSystems } from 'tapis-redux';
 import { SystemList } from 'tapis-ui/components/systems';
 import { FileListing } from 'tapis-ui/components/files';
-import { SystemsListCallback } from 'tapis-redux/systems/types';
 import { TapisSystem } from '@tapis/tapis-typescript-systems';
-import { SectionMessage } from 'tapis-ui/_common';
+import { SectionMessage, Icon } from 'tapis-ui/_common';
 import { 
   ListSection, 
   ListSectionBody, 
@@ -20,17 +21,31 @@ interface SystemsProps  {
 
 const Systems: React.FC<SystemsProps> = ({config}) => {
     const [selectedSystem, setSelectedSystem] = useState<TapisSystem>(null);
+    const { list } = useSystems();
+    const dispatch = useDispatch();
     const systemSelectCallback = useCallback(
         (system: TapisSystem) => {
-          /* eslint-disable */
-          setSelectedSystem(system);
+            /* eslint-disable */
+            setSelectedSystem(system);
         },
         [setSelectedSystem]
     )
+    const refresh = () => {
+        setSelectedSystem(null);
+        dispatch(list({}));
+    }
 
     return (
         <ListSection>
-        <ListSectionHeader>System List</ListSectionHeader>
+        <ListSectionHeader>
+            <div>
+                System List
+                &nbsp;
+                <span className="btn-head" onClick={refresh}>
+                    <Icon name="refresh" />
+                </span>
+            </div>
+        </ListSectionHeader>
         <ListSectionBody>
             <ListSectionList>
                 <SystemList config={config} onSelect={systemSelectCallback} />