ExpandableAlert

frontend/public/components/utils/webhooks.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import * as _ from 'lodash-es';
 import { Base64 } from 'js-base64';
 import { PasteIcon } from '@patternfly/react-icons';
-import { Button } from '@patternfly/react-core';
+import { Button, AlertVariant } from '@patternfly/react-core';
 import * as classNames from 'classnames';
 
 import { K8sResourceKind, k8sGet } from '../../module/k8s';
-import { SectionHeading, ResourceLink, useAccessReview } from '.';
+import { ExpandableAlert, LoadingBox, SectionHeading, ResourceLink, useAccessReview } from '.';
 import { SecretModel } from '../../models';
 import { errorModal } from '../modals/error-modal';
 
@@ -56,7 +56,8 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
   });
   const tableColumnClasses = getTableColumnClasses(canGetSecret);
   const [webhookSecrets, setWebhookSecrets] = React.useState<K8sResourceKind[]>([]);
-  const [isLoaded, setIsLoaded] = React.useState<boolean>(false);
+  const [secretErrors, setSecretErrors] = React.useState<string[]>([]);
+  const [isLoaded, setIsLoaded] = React.useState(false);
 
   const webhooks: WebhookTrigger[] = _.filter(triggers, (trigger) =>
     webhookTriggers.has(trigger.type),
@@ -69,23 +70,36 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
   );
 
   React.useEffect(() => {
-    Promise.all(
-      webhookNames.map(
-        (webhookName: string): Promise<K8sResourceKind> => {
-          return k8sGet(SecretModel, webhookName, namespace).catch(() => {
-            return null;
-          });
-        },
-      ),
-    ).then((secrets) => {
-      setWebhookSecrets(_.compact(secrets));
+    if (canGetSecret) {
+      let errors = [];
+      Promise.all(
+        webhookNames.map(
+          (webhookName: string): Promise<K8sResourceKind> => {
+            return k8sGet(SecretModel, webhookName, namespace).then(
+              (secret) => secret,
+              (error) => {
+                errors = _.concat(errors, error.message);
+                return null;
+              },
+            );
+          },
+        ),
+      ).then((secrets) => {
+        setSecretErrors(errors);
+        setWebhookSecrets(_.compact(secrets));
+        setIsLoaded(true);
+      });
+    } else {
       setIsLoaded(true);
-    });
-  }, [isLoaded]);
+    }
+  }, [isLoaded, canGetSecret]);
 
-  if (!isLoaded || _.isEmpty(webhooks)) {
+  if (_.isEmpty(webhooks)) {
     return null;
   }
+  if (!isLoaded) {
+    <LoadingBox />;
+  }
 
   const getWebhookURL = (trigger: WebhookTrigger, secret?: string) => {
     const triggerProperty = getTriggerProperty(trigger);
@@ -122,7 +136,7 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
     );
     if (!webhookSecret) {
       errorModal({
-        error: `Secret ${secretName} was not found`,
+        error: `Could not get ${secretName} secret`,
       });
       return;
     }
@@ -139,6 +153,14 @@ export const WebhookTriggers: React.FC<WebhookTriggersProps> = (props) => {
 
   return (
     <div className="co-m-pane__body">
+      {!_.isEmpty(secretErrors) && (
+        <ExpandableAlert
+          variant={AlertVariant.warning}
+          alerts={_.map(secretErrors, (error, i) => (
+            <React.Fragment key={i}>{error}</React.Fragment>
+          ))}
+        />
+      )}
       <SectionHeading text="Webhooks" />
       <div className="co-table-container">
         <table className="table table--layout-fixed">