Fixed component loading issues and updated dynamic plugin SDK version (#26)

Signed-off-by: Yi Cai <[email protected]>

Author: ciiay

package.json

@@ -16,7 +16,7 @@
     "lint": "eslint ./src --fix"
   },
   "devDependencies": {
-    "@openshift-console/dynamic-plugin-sdk": "0.0.18",
+    "@openshift-console/dynamic-plugin-sdk": "0.0.21",
     "@openshift-console/dynamic-plugin-sdk-internal": "0.0.11",
     "@openshift-console/dynamic-plugin-sdk-webpack": "0.0.9",
     "@openshift-console/plugin-shared": "^0.0.1",

src/components/ApplicationListPage.tsx

@@ -7,21 +7,19 @@ import {
   ListPageHeader,
   useK8sWatchResource,
 } from '@openshift-console/dynamic-plugin-sdk';
+import { ProjectModel } from '@openshift-console/dynamic-plugin-sdk/lib/models';
 import { LoadingBox } from '@patternfly/quickstarts';
 
 import { fetchDataFrequency, pipelinesBaseURI } from '../const';
 
 import DevPreviewBadge from './import/badges/DevPreviewBadge';
 import ApplicationList from './list/ApplicationList';
 import { fetchAllAppGroups, getManifestURLs } from './utils/gitops-utils';
+import EnvironmentEmptyState from './EnvironmentEmptyState';
 
 import './ApplicationListPage.scss';
 
-// TODO: check and match the latest code when uncomment out these imports
-// import { ProjectModel } from '@console/internal/models';
-
-// const projectRes = { isList: true, kind: ProjectModel.kind, optional: true };
-const projectRes = { isList: true, kind: 'Project', optional: true };
+const projectRes = { isList: true, kind: ProjectModel.kind, optional: true };
 
 const ApplicationListPage: React.FC = () => {
   const [appGroups, setAppGroups] = React.useState(null);
@@ -65,7 +63,13 @@ const ApplicationListPage: React.FC = () => {
               `plugin__gitops-plugin~Select an application to view the environment it's deployed in.`,
             )}
           </ListPageBody>
-          <ApplicationList appGroups={appGroups} emptyStateMsg={emptyStateMsg} />
+          {emptyStateMsg ? (
+            <div className="gitops-plugin__application-list">
+              <EnvironmentEmptyState emptyStateMsg={emptyStateMsg} />
+            </div>
+          ) : (
+            <ApplicationList appGroups={appGroups} />
+          )}
         </>
       )}
     </div>

src/components/details/EnvironmentDetailsPageHeading.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useHistory } from 'react-router';
 
-import { Breadcrumb, BreadcrumbItem } from '@patternfly/react-core';
+import { Breadcrumb, BreadcrumbItem, Button } from '@patternfly/react-core';
 
 import { routeDecoratorIcon } from '../import/render-utils';
 import ExternalLink from '../utils/ExternalLink/ExternalLink';
@@ -20,13 +21,16 @@ const EnvironmentDetailsPageHeading: React.FC<EnvironmentDetailsPageHeadingProps
   badge,
 }) => {
   const { t } = useTranslation('plugin__gitops-plugin');
+  const history = useHistory();
 
   return (
     <>
       <div className="pf-c-page__main-breadcrumb">
         <Breadcrumb className="co-breadcrumb">
-          <BreadcrumbItem to="/envdynamic">
-            {t('plugin__gitops-plugin~Environments')}
+          <BreadcrumbItem>
+            <Button onClick={() => history.push('/envdynamic')} isInline variant="link">
+              {t('plugin__gitops-plugin~Environments')}
+            </Button>
           </BreadcrumbItem>
           <BreadcrumbItem>{t('plugin__gitops-plugin~Application environments')}</BreadcrumbItem>
         </Breadcrumb>

src/components/list/ApplicationList.tsx

@@ -8,7 +8,6 @@ import {
   VirtualizedTable,
 } from '@openshift-console/dynamic-plugin-sdk';
 
-import EnvironmentEmptyState from '../EnvironmentEmptyState';
 import { GitOpsAppGroupData } from '../utils/gitops-types';
 
 import { ApplicationColumns } from './ApplicationColumns';
@@ -18,10 +17,9 @@ import './ApplicationList.scss';
 
 interface ApplicationListProps {
   appGroups: GitOpsAppGroupData[];
-  emptyStateMsg: string;
 }
 
-const ApplicationList: React.FC<ApplicationListProps> = ({ appGroups, emptyStateMsg }) => {
+const ApplicationList: React.FC<ApplicationListProps> = ({ appGroups }) => {
   const { t } = useTranslation('plugin__gitops-plugin');
 
   const filters: RowFilter[] = [
@@ -45,27 +43,21 @@ const ApplicationList: React.FC<ApplicationListProps> = ({ appGroups, emptyState
 
   return (
     <div className="gitops-plugin__application-list">
-      {!emptyStateMsg && appGroups ? (
-        <>
-          <ListPageFilter
-            data={staticData}
-            loaded={!emptyStateMsg}
-            onFilterChange={onFilterChange}
-            nameFilterPlaceholder={t('plugin__gitops-plugin~by name')}
-            hideLabelFilter
-          />
-          <VirtualizedTable<GitOpsAppGroupData>
-            data={filteredData || []}
-            unfilteredData={staticData || []}
-            loaded={!emptyStateMsg}
-            loadError={null}
-            columns={ApplicationColumns(hasSyncStatus)}
-            Row={ApplicationTableRow}
-          />
-        </>
-      ) : (
-        <EnvironmentEmptyState emptyStateMsg={emptyStateMsg} />
-      )}
+      <ListPageFilter
+        data={staticData}
+        loaded
+        onFilterChange={onFilterChange}
+        nameFilterPlaceholder={t('plugin__gitops-plugin~by name')}
+        hideLabelFilter
+      />
+      <VirtualizedTable<GitOpsAppGroupData>
+        data={filteredData || []}
+        unfilteredData={staticData || []}
+        loaded
+        loadError={false}
+        columns={ApplicationColumns(hasSyncStatus)}
+        Row={ApplicationTableRow}
+      />
     </div>
   );
 };

src/components/utils/flags/index.ts

@@ -1 +1 @@
-export { enableGitOpsDynamicFlag } from './enableGitOpsDynamicFlag';
+export { enableGitOpsDynamicFlag } from './enableGitOpsDynamicFlag';