Do not render create page if CRD model is missing

openshift · Aug 3, 2021 · e686b48 · e686b48
1 parent 10788fd
commit e686b48
Showing 1 changed file with 47 additions and 32 deletions.
diff --git a/frontend/packages/operator-lifecycle-manager/src/components/operand/create-operand.tsx b/frontend/packages/operator-lifecycle-manager/src/components/operand/create-operand.tsx
@@ -4,12 +4,14 @@ import * as _ from 'lodash';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 import { match as RouterMatch } from 'react-router';
+import { ErrorPage404 } from '@console/internal/components/error';
 import {
   PageHeading,
   StatusBox,
   BreadCrumbs,
   resourcePathFromModel,
   AsyncComponent,
+  LoadingBox,
 } from '@console/internal/components/utils';
 import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { CustomResourceDefinitionModel } from '@console/internal/models';
@@ -161,45 +163,58 @@ const CreateOperandPage: React.FC<CreateOperandPageProps> = ({ match }) => {
     namespace: match.params.ns,
     isList: false,
   });
-  const [model] = useK8sModel(match.params.plural);
+  const [model, modelsLoading] = useK8sModel(match.params.plural);
 
   return (
     <>
       <Helmet>
         <title>{t('olm~Create {{item}}', { item: kindForReference(match.params.plural) })}</title>
       </Helmet>
-      {loaded && !_.isEmpty(csv) && model && (
-        <div className="co-create-operand__breadcrumbs">
-          <BreadCrumbs
-            breadcrumbs={[
-              {
-                name: csv.spec.displayName,
-                path: resourcePathFromModel(
-                  ClusterServiceVersionModel,
-                  csv.metadata.name,
-                  csv.metadata.namespace,
-                ),
-              },
-              {
-                name: t('olm~Create {{item}}', { item: model.label }),
-                path: window.location.pathname,
-              },
-            ]}
-          />
-        </div>
-      )}
-      {createResourceExtension ? (
-        <AsyncComponent
-          loader={createResourceExtension.properties.component}
-          namespace={match.params.ns}
-        />
+      {modelsLoading ? (
+        <LoadingBox />
+      ) : model ? (
+        <>
+          {loaded && !_.isEmpty(csv) && (
+            <div className="co-create-operand__breadcrumbs">
+              <BreadCrumbs
+                breadcrumbs={[
+                  {
+                    name: csv.spec.displayName,
+                    path: resourcePathFromModel(
+                      ClusterServiceVersionModel,
+                      csv.metadata.name,
+                      csv.metadata.namespace,
+                    ),
+                  },
+                  {
+                    name: t('olm~Create {{item}}', { item: model.label }),
+                    path: window.location.pathname,
+                  },
+                ]}
+              />
+            </div>
+          )}
+          {createResourceExtension ? (
+            <AsyncComponent
+              loader={createResourceExtension.properties.component}
+              namespace={match.params.ns}
+            />
+          ) : (
+            <CreateOperand
+              match={match}
+              initialEditorType={EditorType.Form}
+              csv={csv}
+              loaded={loaded}
+              loadError={loadError}
+            />
+          )}
+        </>
       ) : (
-        <CreateOperand
-          match={match}
-          initialEditorType={EditorType.Form}
-          csv={csv}
-          loaded={loaded}
-          loadError={loadError}
+        <ErrorPage404
+          message={t(
+            "olm~The server doesn't have a resource type {{kind}}. Try refreshing the page if it was recently added.",
+            { kind: kindForReference(match.params.plural) },
+          )}
         />
       )}
     </>