feat(trust-roots): add error state pages (#60)

* feat(trust-roots): add error state pages

* feat(trust-root): fix lint errors

Author: abhinandan13jan

client/src/app/pages/TrustRoot/TrustRoot.tsx

@@ -9,6 +9,7 @@ import { useFetchTrustRootMetadataInfo, useFetchTrustTargetCertificates } from "
 import { CertificatesTable } from "./components/Certificates";
 import { Overview } from "./components/Overview";
 import { RootDetails } from "./components/RootDetails";
+import { MetadataNotAvailable } from "./components/ErrorStates/MetadataNotAvailable";
 
 export const TrustRoots: React.FC = () => {
   const {
@@ -81,6 +82,7 @@ export const TrustRoots: React.FC = () => {
             certificates={certificates?.data ?? []}
             isFetching={isFetchingCertificates}
             fetchError={fetchErrorCertificates}
+            rootLink={rootMetadataList?.["repo-url"]}
           />
         </TabContent>
         <TabContent eventKey={1} id="certificatesTabSection" ref={certificatesTabRef} aria-label="Certificates" hidden>
@@ -92,7 +94,11 @@ export const TrustRoots: React.FC = () => {
         </TabContent>
         <TabContent eventKey={2} id="rootDetailsTabSection" ref={rootDetailsTabRef} aria-label="Root details" hidden>
           <LoadingWrapper isFetching={isFetchingRootMetadata} fetchError={fetchErrorRootMetadata}>
-            {rootMetadataList && <RootDetails rootMetadataList={rootMetadataList} />}
+            {rootMetadataList ? (
+              <RootDetails rootMetadataList={rootMetadataList} />
+            ) : (
+              <MetadataNotAvailable errorInfo="No metadata list found" />
+            )}
           </LoadingWrapper>
         </TabContent>
       </PageSection>

client/src/app/pages/TrustRoot/components/Certificates.tsx

@@ -27,6 +27,8 @@ import { ConditionalTableBody } from "@app/components/TableControls/ConditionalT
 import { useWithUiId } from "@app/hooks/query-utils";
 import { usePFToolbarTable } from "@app/hooks/usePFToolbarTable";
 import { formatDate, stringMatcher } from "@app/utils/utils";
+import { CertificateDoesNotExist } from "./ErrorStates/CertificateDoesNotExist";
+import { ErrorRetrievingCertificate } from "./ErrorStates/ErrorRetrievingCertificate";
 
 interface ICertificatesTableProps {
   certificates: CertificateInfo[];
@@ -78,6 +80,14 @@ export const CertificatesTable: React.FC<ICertificatesTableProps> = ({ certifica
     },
   });
 
+  if (fetchError) {
+    return <ErrorRetrievingCertificate />;
+  }
+
+  if (certificates.length === 0) {
+    return <CertificateDoesNotExist />;
+  }
+
   const {
     tableState: { currentPageItems },
     propHelpers: {

client/src/app/pages/TrustRoot/components/ErrorStates/CertificateDoesNotExist.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateStatus } from "@patternfly/react-core";
+
+export const CertificateDoesNotExist: React.FC = () => {
+  return (
+    <Bullseye>
+      <EmptyState titleText="Certificate does not exist" headingLevel="h6" status={EmptyStateStatus.info}>
+        <EmptyStateBody>Currently this trust root does not have any have certificates to display</EmptyStateBody>
+      </EmptyState>
+    </Bullseye>
+  );
+};

client/src/app/pages/TrustRoot/components/ErrorStates/ErrorRetrievingCertificate.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateStatus, EmptyStateVariant } from "@patternfly/react-core";
+
+export const ErrorRetrievingCertificate: React.FC = () => (
+  <Bullseye>
+    <EmptyState
+      headingLevel="h4"
+      titleText="Error retrieving certificate information"
+      status={EmptyStateStatus.danger}
+      variant={EmptyStateVariant.lg}
+    >
+      <EmptyStateBody className="pf-v6-u-font-size--xs">
+        Due to issues with extracting certificate information, we could not find any valid certificates. The system will
+        automatically retry again in 30 seconds.
+      </EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);

client/src/app/pages/TrustRoot/components/ErrorStates/MetadataNotAvailable.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateStatus, EmptyStateVariant } from "@patternfly/react-core";
+
+interface MetadataNotAvailableProps {
+  errorInfo?: string;
+}
+
+export const MetadataNotAvailable: React.FC<MetadataNotAvailableProps> = ({ errorInfo }) => (
+  <Bullseye>
+    <EmptyState
+      variant={EmptyStateVariant.sm}
+      titleText="Latest root metadata not available"
+      status={EmptyStateStatus.danger}
+      headingLevel="h4"
+    >
+      <EmptyStateBody>{errorInfo} </EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);

client/src/app/pages/TrustRoot/components/ErrorStates/RepositoryNotInitialized.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Bullseye, EmptyState, EmptyStateBody, EmptyStateStatus, EmptyStateVariant } from "@patternfly/react-core";
+
+interface RepositoryNotInitiatedProps {
+  rootLink?: string;
+}
+
+export const RepositoryNotInitiated: React.FC<RepositoryNotInitiatedProps> = ({ rootLink }) => (
+  <Bullseye>
+    <EmptyState
+      variant={EmptyStateVariant.lg}
+      titleText="Repository not initialized"
+      headingLevel="h4"
+      status={EmptyStateStatus.danger}
+    >
+      <EmptyStateBody>
+        {rootLink
+          ? `
+          Failed to build trust root options for ${rootLink}. The system will retry again in 30 seconds.`
+          : "Failed to build trust root options. The system will retry again in 30 seconds."}
+      </EmptyStateBody>
+    </EmptyState>
+  </Bullseye>
+);

client/src/app/pages/TrustRoot/components/Overview.tsx

@@ -22,14 +22,16 @@ import { InfoAltIcon } from "@patternfly/react-icons";
 import type { _Error, CertificateInfo } from "@app/client";
 import { LoadingWrapper } from "@app/components/LoadingWrapper";
 import { formatDate } from "@app/utils/utils";
+import { RepositoryNotInitiated } from "./ErrorStates/RepositoryNotInitialized";
 
 interface IOverviewProps {
   certificates: CertificateInfo[];
   isFetching: boolean;
   fetchError: AxiosError<_Error> | null;
+  rootLink?: string;
 }
 
-export const Overview: React.FC<IOverviewProps> = ({ certificates, isFetching, fetchError }) => {
+export const Overview: React.FC<IOverviewProps> = ({ certificates, isFetching, fetchError, rootLink }) => {
   const chartDonutData = React.useMemo(() => {
     return certificates.reduce(
       (prev, current) => {
@@ -52,6 +54,8 @@ export const Overview: React.FC<IOverviewProps> = ({ certificates, isFetching, f
       .sort((a, b) => dayjs(a.expiration).valueOf() - dayjs(b.expiration).valueOf());
   }, [certificates]);
 
+  if (Array.isArray(certificates) && certificates.length === 0) return <RepositoryNotInitiated rootLink={rootLink} />;
+
   return (
     <LoadingWrapper isFetching={isFetching} fetchError={fetchError}>
       <Flex direction={{ default: "column", md: "row" }}>