Use gitops-backend and remove mock-data

frontend/packages/dev-console/src/components/gitops/GitOpsDetailsPage.tsx

@@ -2,24 +2,24 @@ import * as React from 'react';
 import Helmet from 'react-helmet';
 import { RouteComponentProps } from 'react-router-dom';
 import * as _ from 'lodash';
-import { BreadCrumbs, ResourceIcon, LoadingBox } from '@console/internal/components/utils';
-import { Split, SplitItem, Label } from '@patternfly/react-core';
+import { LoadingBox } from '@console/internal/components/utils';
 import { GitOpsAppGroupData, GitOpsEnvironment } from './utils/gitops-types';
-import GitOpsDetailsController from './details/GitOpsDetailsController';
-import { routeDecoratorIcon } from '../import/render-utils';
 import {
   fetchAppGroups,
   getEnvData,
   getPipelinesBaseURI,
   getApplicationsBaseURI,
 } from './utils/gitops-utils';
 import useDefaultSecret from './utils/useDefaultSecret';
+import GitOpsDetails from './details/GitOpsDetails';
+import GitOpsDetailsPageHeading from './details/GitOpsDetailsPageHeading';
 
 type GitOpsDetailsPageProps = RouteComponentProps<{ appName?: string }>;
 
 const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }) => {
   const [envs, setEnvs] = React.useState<string[]>(null);
   const [envsData, setEnvsData] = React.useState<GitOpsEnvironment[]>(null);
+  const [emptyStateMsg, setEmptyStateMsg] = React.useState(null);
   const [secretNS, secretName] = useDefaultSecret();
   const { appName } = match.params;
   const searchParams = new URLSearchParams(location.search);
@@ -28,30 +28,23 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
   const applicationBaseURI = getApplicationsBaseURI(appName, secretNS, secretName, manifestURL);
   const environmentBaseURI = `/api/gitops/environments`;
 
-  const breadcrumbs = [
-    {
-      name: 'Application Stages',
-      path: '/applicationstages',
-    },
-    {
-      name: 'Application Details',
-      path: `${match.url}`,
-    },
-  ];
-
   React.useEffect(() => {
     let ignore = false;
 
     const getEnvs = async () => {
       if (!pipelinesBaseURI) return;
       let appGroups: GitOpsAppGroupData[];
+      let emptyMsg = null;
       try {
         appGroups = await fetchAppGroups(pipelinesBaseURI, manifestURL);
       } catch {} // eslint-disable-line no-empty
       if (ignore) return;
       const app = _.find(appGroups, (appObj) => appName === appObj?.name);
+      if (!app?.environments) {
+        emptyMsg = 'Environment(s) details not found';
+      }
+      setEmptyStateMsg(emptyMsg);
       setEnvs(app?.environments);
-      setEnvs(['dev', 'test', 'qa', 'stage', 'prod']); // will remove this once backend is ready
     };
 
     getEnvs();
@@ -82,37 +75,12 @@ const GitOpsDetailsPage: React.FC<GitOpsDetailsPageProps> = ({ match, location }
       <Helmet>
         <title>{`${appName} · Details`}</title>
       </Helmet>
-      <div className="co-m-nav-title co-m-nav-title--breadcrumbs">
-        <BreadCrumbs breadcrumbs={breadcrumbs} />
-        <h1>
-          <div className="co-m-pane__name co-resource-item">
-            <ResourceIcon kind="application" className="co-m-resource-icon--lg" />
-            <span className="co-resource-item__resource-name">{appName}</span>
-          </div>
-        </h1>
-        <Split style={{ alignItems: 'center' }} hasGutter>
-          <SplitItem style={{ fontWeight: 'bold', fontSize: '12px' }}>
-            Manifest File Repo:
-          </SplitItem>
-          <SplitItem isFilled>
-            <Label
-              style={{ fontSize: '12px' }}
-              color="blue"
-              icon={routeDecoratorIcon(manifestURL, 12)}
-            >
-              <a
-                style={{ color: 'var(--pf-c-label__content--Color)' }}
-                href={manifestURL}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                {manifestURL}
-              </a>
-            </Label>
-          </SplitItem>
-        </Split>
-      </div>
-      {envsData ? <GitOpsDetailsController envsData={envsData} /> : <LoadingBox />}
+      <GitOpsDetailsPageHeading url={match.url} appName={appName} manifestURL={manifestURL} />
+      {!envsData && !emptyStateMsg ? (
+        <LoadingBox />
+      ) : (
+        <GitOpsDetails envsData={envsData} emptyStateMsg={emptyStateMsg} />
+      )}
     </>
   );
 };

frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.scss

@@ -0,0 +1,9 @@
+.odc-gitops-empty-state {
+  &__msg {
+    font-size: var(--pf-global--FontSize--lg);
+  }
+  &__icon {
+    height: var(--pf-c-empty-state__icon--FontSize);
+    max-width: 100%;
+  }
+}

frontend/packages/dev-console/src/components/gitops/GitOpsEmptyState.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { EmptyState, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core';
+import * as gitopsIcon from '../../images/gitops.svg';
+import './GitOpsEmptyState.scss';
+
+interface GitOpsEmptyStateProps {
+  emptyStateMsg: string;
+}
+
+const gitopsImage = () => (
+  <img className="odc-gitops-empty-state__icon" src={gitopsIcon} alt="GitOps" />
+);
+
+const GitOpsEmptyState: React.FC<GitOpsEmptyStateProps> = ({ emptyStateMsg }) => (
+  <EmptyState variant={EmptyStateVariant.full}>
+    <p className="odc-gitops-empty-state__msg">{emptyStateMsg}</p>
+    <EmptyStateIcon variant="container" component={gitopsImage} />
+  </EmptyState>
+);
+
+export default GitOpsEmptyState;

frontend/packages/dev-console/src/components/gitops/GitOpsListPage.tsx

@@ -37,17 +37,17 @@ const GitOpsListPage: React.FC = () => {
     };
   }, [baseURL, namespaces, nsError, nsLoaded]);
 
-  if (!appGroups && !emptyStateMsg) {
-    return <LoadingBox />;
-  }
-
   return (
     <>
       <Helmet>
         <title>Application Stages</title>
       </Helmet>
       <PageHeading title="Application Stages" />
-      <GitOpsList appGroups={appGroups} emptyStateMsg={emptyStateMsg} />
+      {!appGroups && !emptyStateMsg ? (
+        <LoadingBox />
+      ) : (
+        <GitOpsList appGroups={appGroups} emptyStateMsg={emptyStateMsg} />
+      )}
     </>
   );
 };

frontend/packages/dev-console/src/components/gitops/details/CommitDetails.tsx

@@ -21,7 +21,7 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
     kind: 'ImageStreamImport',
     apiVersion: 'image.openshift.io/v1',
     metadata: {
-      name: 'gitops-app',
+      name: `gitops-app`,
       namespace,
     },
     spec: {
@@ -50,7 +50,7 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
       } catch {} // eslint-disable-line no-empty
       if (ignore) return;
       const status = imageStreamImport?.status?.images?.[0]?.status;
-      if (status.status === 'Success') {
+      if (status?.status === 'Success') {
         const imageLabels =
           imageStreamImport?.status?.images?.[0]?.image?.dockerImageMetadata?.Config?.Labels;
         lastCommitData = {
@@ -67,7 +67,6 @@ const CommitDetails: React.FC<CommitDetailsProps> = ({ imageName }) => {
     return () => {
       ignore = true;
     };
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.scss

@@ -23,6 +23,10 @@
       display: inline-flex;
       align-items: center;
     }
+    &__url-empty-state {
+      font-size: 12px;
+      color: var(--pf-global--palette--black-600);
+    }
     article {
       border: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
     }

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetails.tsx

@@ -4,52 +4,74 @@ import { Stack, StackItem, Card, CardTitle, SplitItem, Split, Label } from '@pat
 import { ResourceLink, ExternalLink } from '@console/internal/components/utils';
 import GitOpsServiceDetailsSection from './GitOpsServiceDetailsSection';
 import { GitOpsEnvironment } from '../utils/gitops-types';
+import useTransformedEnvsData from '../utils/useTransformedEnvsData';
+import GitOpsEmptyState from '../GitOpsEmptyState';
 import './GitOpsDetails.scss';
 
 interface GitOpsDetailsProps {
-  envs: GitOpsEnvironment[];
+  envsData: GitOpsEnvironment[];
+  emptyStateMsg: string;
 }
 
-const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envs }) => {
-  return (
+const GitOpsDetails: React.FC<GitOpsDetailsProps> = ({ envsData, emptyStateMsg }) => {
+  const envs = useTransformedEnvsData(envsData);
+  return emptyStateMsg ? (
+    <GitOpsEmptyState emptyStateMsg={emptyStateMsg} />
+  ) : (
     <div className="odc-gitops-details">
-      {_.map(envs, (env) => (
-        <Stack className="odc-gitops-details__env-section" key={env.environment}>
-          <StackItem>
-            <Card>
-              <CardTitle className="odc-gitops-details__env-section__header">
-                <Stack hasGutter>
-                  <StackItem>
-                    <Split style={{ alignItems: 'center' }}>
-                      <SplitItem className="odc-gitops-details__env-section__title" isFilled>
-                        {env.environment}
-                      </SplitItem>
-                      <SplitItem>
-                        <Label className="odc-gitops-details__env-section__timestamp" color="grey">
-                          <span style={{ color: 'var(--pf-global--palette--black-600)' }}>
-                            {env?.timestamp}
-                          </span>
-                        </Label>
-                      </SplitItem>
-                    </Split>
-                  </StackItem>
-                  <StackItem className="co-truncate co-nowrap">
-                    <ExternalLink
-                      additionalClassName="odc-gitops-details__env-section__url"
-                      href={env?.cluster}
-                      text={env?.cluster}
-                    />
-                  </StackItem>
-                  <StackItem>
-                    <ResourceLink kind="Project" name={env.environment} />
-                  </StackItem>
-                </Stack>
-              </CardTitle>
-            </Card>
-          </StackItem>
-          <GitOpsServiceDetailsSection services={env?.services} />
-        </Stack>
-      ))}
+      {_.map(
+        envs,
+        (env) =>
+          env && (
+            <Stack className="odc-gitops-details__env-section" key={env.environment}>
+              <StackItem>
+                <Card>
+                  <CardTitle className="odc-gitops-details__env-section__header">
+                    <Stack hasGutter>
+                      <StackItem>
+                        <Split style={{ alignItems: 'center' }} hasGutter>
+                          <SplitItem
+                            className="odc-gitops-details__env-section__title co-truncate co-nowrap"
+                            isFilled
+                          >
+                            {env.environment}
+                          </SplitItem>
+                          <SplitItem>
+                            <Label
+                              className="odc-gitops-details__env-section__timestamp"
+                              color="grey"
+                            >
+                              <span style={{ color: 'var(--pf-global--palette--black-600)' }}>
+                                {env.timestamp}
+                              </span>
+                            </Label>
+                          </SplitItem>
+                        </Split>
+                      </StackItem>
+                      <StackItem className="co-truncate co-nowrap">
+                        {env.cluster ? (
+                          <ExternalLink
+                            additionalClassName="odc-gitops-details__env-section__url"
+                            href={env.cluster}
+                            text={env.cluster}
+                          />
+                        ) : (
+                          <div className="odc-gitops-details__env-section__url-empty-state">
+                            Cluster URL not available
+                          </div>
+                        )}
+                      </StackItem>
+                      <StackItem className="co-truncate co-nowrap">
+                        <ResourceLink kind="Project" name={env.environment} />
+                      </StackItem>
+                    </Stack>
+                  </CardTitle>
+                </Card>
+              </StackItem>
+              <GitOpsServiceDetailsSection services={env.services} />
+            </Stack>
+          ),
+      )}
     </div>
   );
 };

frontend/packages/dev-console/src/components/gitops/details/GitOpsDetailsPageHeading.scss

@@ -0,0 +1,7 @@
+.odc-gitops-details-page-heading {
+  &__repo {
+    align-items: center;
+    font-weight: bold;
+    font-size: 12px;
+  }
+}