chore: fix project data flow issue

Signed-off-by: Frank Flitton <[email protected]>
flyteorg · Jun 1, 2023 · 3e93280 · 3e93280
1 parent aee4063
commit 3e93280
Show file tree

Hide file tree

Showing 10 changed files with 292 additions and 274 deletions.
diff --git a/packages/console/src/components/App/App.tsx b/packages/console/src/components/App/App.tsx
@@ -99,7 +99,10 @@ export const AppComponent: React.FC<AppComponentProps> = (
                     </SkeletonTheme>
                   </APIContext.Provider>
                 </FlyteApiProvider>
-                <ReactQueryDevtools initialIsOpen={false} />
+                <ReactQueryDevtools
+                  initialIsOpen={false}
+                  position="bottom-right"
+                />
               </QueryClientProvider>
             </SnackbarProvider>
           </ThemeProvider>

diff --git a/packages/console/src/components/Entities/EntityDetails.tsx b/packages/console/src/components/Entities/EntityDetails.tsx
@@ -1,12 +1,12 @@
+import * as React from 'react';
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { contentMarginGridUnits } from 'common/layout';
-import { WaitForData } from 'components/common/WaitForData';
 import { EntityDescription } from 'components/Entities/EntityDescription';
 import { useProject } from 'components/hooks/useProjects';
 import { useChartState } from 'components/hooks/useChartState';
 import { ResourceIdentifier } from 'models/Common/types';
-import * as React from 'react';
 import { Grid } from '@material-ui/core';
+import { LoadingSpinner } from 'components/common';
 import { entitySections } from './constants';
 import { EntityDetailsHeader } from './EntityDetailsHeader';
 import { EntityInputs } from './EntityInputs';
@@ -63,60 +63,70 @@ interface EntityDetailsProps {
  */
 export const EntityDetails: React.FC<EntityDetailsProps> = ({ id }) => {
   const sections = entitySections[id.resourceType];
-  const project = useProject(id.project);
+  const [project] = useProject(id.project);
   const styles = useStyles();
   const { chartIds, onToggle, clearCharts } = useChartState();
 
   return (
     <Grid container direction="column" className={styles.entityDetailsWrapper}>
-      <WaitForData {...project}>
-        <EntityDetailsHeader
-          project={project.value}
-          id={id}
-          launchable={!!sections.launch}
-        />
+      {project?.id ? (
+        <>
+          <EntityDetailsHeader
+            project={project}
+            id={id}
+            launchable={!!sections.launch}
+          />
+
+          <div className={styles.metadataContainer}>
+            {sections.description ? (
+              <div className={styles.descriptionContainer}>
+                <EntityDescription id={id} />
+              </div>
+            ) : null}
+            {!sections.inputs && sections.schedules ? (
+              <div className={styles.schedulesContainer}>
+                <EntitySchedules id={id} />
+              </div>
+            ) : null}
+          </div>
 
-        <div className={styles.metadataContainer}>
-          {sections.description ? (
-            <div className={styles.descriptionContainer}>
-              <EntityDescription id={id} />
+          {sections.inputs ? (
+            <div className={styles.inputsContainer}>
+              <EntityInputs id={id} />
             </div>
           ) : null}
-          {!sections.inputs && sections.schedules ? (
-            <div className={styles.schedulesContainer}>
-              <EntitySchedules id={id} />
+
+          {sections.versions ? (
+            <div className={styles.versionsContainer}>
+              <EntityVersions id={id} />
             </div>
           ) : null}
-        </div>
 
-        {sections.inputs ? (
-          <div className={styles.inputsContainer}>
-            <EntityInputs id={id} />
-          </div>
-        ) : null}
+          <EntityExecutionsBarChart
+            onToggle={onToggle}
+            chartIds={chartIds}
+            id={id}
+          />
 
-        {sections.versions ? (
-          <div className={styles.versionsContainer}>
-            <EntityVersions id={id} />
-          </div>
-        ) : null}
-
-        <EntityExecutionsBarChart
-          onToggle={onToggle}
-          chartIds={chartIds}
-          id={id}
-        />
-
-        {sections.executions ? (
-          <div className={styles.executionsContainer}>
-            <EntityExecutions
-              chartIds={chartIds}
-              id={id}
-              clearCharts={clearCharts}
-            />
-          </div>
-        ) : null}
-      </WaitForData>
+          {sections.executions ? (
+            <div className={styles.executionsContainer}>
+              <EntityExecutions
+                chartIds={chartIds}
+                id={id}
+                clearCharts={clearCharts}
+              />
+            </div>
+          ) : (
+            <>
+              <LoadingSpinner />
+            </>
+          )}
+        </>
+      ) : (
+        <>
+          <LoadingSpinner />
+        </>
+      )}
     </Grid>
   );
 };
diff --git a/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx b/packages/console/src/components/Entities/VersionDetails/EntityVersionDetailsContainer.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { withRouteParams } from 'components/common/withRouteParams';
 import { ResourceIdentifier, ResourceType } from 'models/Common/types';
 import { makeStyles, Theme } from '@material-ui/core/styles';
-import { WaitForData } from 'components/common/WaitForData';
 import { useProject } from 'components/hooks/useProjects';
 import { StaticGraphContainer } from 'components/Workflow/StaticGraphContainer';
 import { WorkflowId } from 'models/Workflow/types';
@@ -11,6 +10,7 @@ import { EntityDetailsHeader } from 'components/Entities/EntityDetailsHeader';
 import { EntityVersions } from 'components/Entities/EntityVersions';
 import { RouteComponentProps } from 'react-router-dom';
 import { Box } from '@material-ui/core';
+import { LoadingSpinner } from 'components/common';
 import { typeNameToEntityResource } from '../constants';
 import { versionsDetailsSections } from './constants';
 import { EntityVersionDetails } from './EntityVersionDetails';
@@ -86,35 +86,43 @@ const EntityVersionsDetailsContainerImpl: React.FC<
   const id = workflowId as ResourceIdentifier;
   const sections = entitySections[id.resourceType];
   const versionsSections = versionsDetailsSections[id.resourceType];
-  const project = useProject(workflowId.project);
+  const [project] = useProject(workflowId.project);
   const styles = useStyles({ resourceType: id.resourceType });
 
   return (
-    <WaitForData {...project}>
-      <Box pl={2} pr={2}>
-        <EntityDetailsHeader
-          project={project.value}
-          id={id}
-          launchable={sections.launch}
-          backToWorkflow
-        />
-      </Box>
-      <div className={styles.verionDetailsContainer}>
-        {versionsSections.details && (
-          <div className={styles.versionDetailsContainer}>
-            <EntityVersionDetails id={id} />
+    <>
+      {project?.id ? (
+        <>
+          <Box pl={2} pr={2}>
+            <EntityDetailsHeader
+              project={project.value}
+              id={id}
+              launchable={sections.launch}
+              backToWorkflow
+            />
+          </Box>
+          <div className={styles.verionDetailsContainer}>
+            {versionsSections.details && (
+              <div className={styles.versionDetailsContainer}>
+                <EntityVersionDetails id={id} />
+              </div>
+            )}
+            {versionsSections.graph && (
+              <div className={styles.staticGraphContainer}>
+                <StaticGraphContainer workflowId={workflowId} />
+              </div>
+            )}
+            <div className={styles.versionsContainer}>
+              <EntityVersions id={id} showAll />
+            </div>
           </div>
-        )}
-        {versionsSections.graph && (
-          <div className={styles.staticGraphContainer}>
-            <StaticGraphContainer workflowId={workflowId} />
-          </div>
-        )}
-        <div className={styles.versionsContainer}>
-          <EntityVersions id={id} showAll />
-        </div>
-      </div>
-    </WaitForData>
+        </>
+      ) : (
+        <>
+          <LoadingSpinner />
+        </>
+      )}
+    </>
   );
 };