Add status to card loading (#57)

* Add status to card loading

* Fix linting errors

Author: obgibson

src/components/MFCard/__tests__/useTaskCards.test.cypress.tsx

@@ -7,11 +7,11 @@ import { Task } from '../../../types';
 import { Decorator } from '../../DAG/DAGUtils';
 
 const MockComponent: React.FC<{ task?: Task | null; decos?: Decorator[] }> = ({ task = null, decos = [] }) => {
-  const cards = useTaskCards(task, decos);
+  const cardsResult = useTaskCards(task, decos);
 
   return (
-    <div data-testid="cardslist">
-      {cards.map((value) => (
+    <div data-testid="cardslist" className={cardsResult.status}>
+      {cardsResult.cards.map((value) => (
         <div key={value.hash} data-testid="card">{JSON.stringify(value)}</div>
       ))}
     </div>
@@ -51,12 +51,14 @@ describe('useTaskCards', () => {
       { name: 'card', attributes: {}, statically_defined: false }
     ]} />);
     gid('cardslist').children().should('have.length', 1);
+    cy.get('.loading').should('have.length', 1);
 
     // Lets mock so that second request will return two results
     cy.intercept('**/cards*', createDataModel([
       { id: '123', type: 'xd', hash: 'unique1' },
       { id: '321', type: 'xd', hash: 'unique2' }
     ], {}));
     gid('cardslist').children({ timeout: 6000 }).should('have.length', 2); 
+    cy.get('.success').should('have.length', 1);
   });
 });

src/components/MFCard/useTaskCards.ts

@@ -4,6 +4,13 @@ import { DataModel } from '../../hooks/useResource';
 import { Task } from '../../types';
 import { Decorator } from '../DAG/DAGUtils';
 
+type CardResultState = 'loading' | 'timeout' | 'success';
+
+export type CardResult = {
+  status: CardResultState;
+  cards: CardDefinition[];
+};
+
 export type CardDefinition = {
   // ID of custom card
   id?: string;
@@ -25,8 +32,13 @@ const POSTLOAD_POLL_INTERVAL = 5000;
 
 //
 // Fetch list of card definitions for given task according to the decorators.
+// Returns a status and a list of cards (if any)
 //
-export default function useTaskCards(task: Task | null, decorators: Decorator[]): CardDefinition[] {
+export default function useTaskCards(task: Task | null, decorators: Decorator[]): CardResult {
+  const [data, setData] = useState<CardDefinition[]>([]);
+  const [poll, setPoll] = useState(false);
+  const [status, setStatus] = useState<CardResultState>('loading');
+
   const url = task ? taskCardsPath(task) : '';
   const expectedCards = decorators.filter((item) => item.name === 'card');
   // timeout in seconds
@@ -36,8 +48,6 @@ export default function useTaskCards(task: Task | null, decorators: Decorator[])
     }
     return timeout;
   }, 0);
-  const [data, setData] = useState<CardDefinition[]>([]);
-  const [poll, setPoll] = useState(false);
 
   const aborter = useRef<AbortController>();
 
@@ -77,9 +87,14 @@ export default function useTaskCards(task: Task | null, decorators: Decorator[])
       // Timeout timer is: task.finished_at + timeout from decorator attributes + 30seconds extra time.
       const timeout = taskFinishedAt ? taskFinishedAt + (maxTimeout + 30) * 1000 : false;
       // if we have enough cards (as presented by decorators list) or timeout has passed, skip request.
-      if (expectedCards.length <= data.length || (timeout && timeout < Date.now())) {
+      if (expectedCards.length <= data.length) {
+        setPoll(false);
+        setStatus('success');
+      } else if (timeout && timeout < Date.now()) {
         setPoll(false);
+        setStatus('timeout');
       } else {
+        setStatus('loading');
         t = window.setTimeout(() => {
           fetchCards(url, true);
         }, POSTLOAD_POLL_INTERVAL);
@@ -89,7 +104,7 @@ export default function useTaskCards(task: Task | null, decorators: Decorator[])
     return () => {
       clearTimeout(t);
     };
-  }, [url, poll, data, expectedCards, maxTimeout, taskFinishedAt]);
+  }, [url, poll, data, expectedCards, maxTimeout, taskFinishedAt, status]);
 
   // Initial fetch
   useEffect(() => {
@@ -100,5 +115,5 @@ export default function useTaskCards(task: Task | null, decorators: Decorator[])
     };
   }, [url]);
 
-  return data;
+  return { status, cards: data };
 }

src/components/TitledSection/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 type HeaderProps = {
-  label?: string;
+  label?: React.ReactNode | string;
   actionbar?: React.ReactNode;
 };
 

src/pages/Task/components/AnchorMenu.tsx

@@ -8,7 +8,7 @@ import { HEADER_SIZE_PX } from '../../../constants';
 
 type AnchorItem = {
   key: string;
-  label: string;
+  label: React.ReactNode | string;
   position?: number;
 };
 

src/pages/Task/components/AnchoredView.tsx

@@ -10,7 +10,7 @@ import TaskSection from './TaskSection';
 
 type AnchoredViewSection = {
   key: string;
-  label: string;
+  label: React.ReactNode | string;
   order: number;
   noTitle?: boolean;
   actionbar?: React.ReactNode;

src/pages/Task/components/TaskSection.tsx

@@ -8,7 +8,7 @@ import { TitledSectionHeader } from '../../../components/TitledSection';
 
 type Props = {
   // Visible title for the section
-  label: string;
+  label: React.ReactNode | string;
   sectionkey: string;
   // Should title be hidden?
   noTitle?: boolean;

src/pages/Task/index.tsx

@@ -191,7 +191,7 @@ const Task: React.FC<TaskViewProps> = ({
   // Cards
   //
 
-  const cards = useTaskCards(
+  const cardsResult = useTaskCards(
     task,
     task && dagResult.data ? dagResult.data.steps[task.step_name]?.decorators || [] : [],
   );
@@ -351,7 +351,7 @@ const Task: React.FC<TaskViewProps> = ({
                   : []),
                 // Render cards at the end of sections if enabled by feature flags.
                 ...(FEATURE_FLAGS.CARDS
-                  ? cards.map((def) => ({
+                  ? cardsResult.cards.map((def) => ({
                       key: def.hash,
                       order: 99,
                       label: def.id ? `${t('card.card_id_title')}: ${def.id}` : `${t('card.card_title')}: ${def.type}`,
@@ -375,6 +375,37 @@ const Task: React.FC<TaskViewProps> = ({
                       component: <CardIframe path={`${taskCardPath(task, def.hash)}?embed=true`} />,
                     }))
                   : []),
+                // Show spinner if any cards are still loading
+                ...(FEATURE_FLAGS.CARDS
+                  ? cardsResult.status === 'loading'
+                    ? [
+                        {
+                          key: 'card_loading',
+                          order: 99,
+                          label: (
+                            <>
+                              <span>{t('card.card_loading')} </span>
+                              <Spinner sm />
+                            </>
+                          ),
+                          component: <></>,
+                        },
+                      ]
+                    : []
+                  : []),
+                // Show error if cards were not fetched before timeout
+                ...(FEATURE_FLAGS.CARDS
+                  ? cardsResult.status === 'timeout'
+                    ? [
+                        {
+                          key: 'card_timeout',
+                          order: 99,
+                          label: t('card.card_timeout'),
+                          component: <></>,
+                        },
+                      ]
+                    : []
+                  : []),
               ].sort((a, b) => a.order - b.order)}
             />
           </>

src/translations/en.ts

@@ -325,7 +325,9 @@ const en = {
     card: {
       card_id_title: 'Card ID',
       card_title: 'Card',
-      download_card: 'Download Card HTML file',
+      download_card: 'Download card HTML file',
+      card_timeout: 'Timeout: loading cards',
+      card_loading: 'Loading cards',
     },
   },
 };