convert health check alerts to user settings

openshift · Nov 24, 2020 · ce3e025 · ce3e025
1 parent 71dfd4e
commit ce3e025
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/frontend/packages/console-shared/src/components/health-checks/HealthChecksAlert.tsx b/frontend/packages/console-shared/src/components/health-checks/HealthChecksAlert.tsx
@@ -17,13 +17,15 @@ import {
   DaemonSetModel,
   StatefulSetModel,
 } from '@console/internal/models';
+import { useUserSettingsCompatibility } from '@console/shared/src/hooks/useUserSettingsCompatibility';
 import { STORAGE_PREFIX } from '../../constants';
 import './HealthChecksAlert.scss';
 
 type HealthChecksAlertProps = {
   resource: K8sResourceKind;
 };
 
+const HEALTH_CHECK_CONFIGMAP_KEY = 'console.healthChecks';
 const HIDE_HEALTH_CHECK_ALERT_FOR = `${STORAGE_PREFIX}/hide-health-check-alert-for`;
 
 const addHealthChecksRefs = [
@@ -39,7 +41,15 @@ const HealthChecksAlert: React.FC<HealthChecksAlertProps> = ({ resource }) => {
     kind,
     metadata: { name, namespace, uid },
   } = resource;
-  const [hideHealthCheckAlertFor, setHideHealthCheckAlertFor] = React.useState([]);
+  const [
+    hideHealthCheckAlertFor,
+    setHideHealthCheckAlertFor,
+    loaded,
+  ] = useUserSettingsCompatibility<string[]>(
+    HEALTH_CHECK_CONFIGMAP_KEY,
+    HIDE_HEALTH_CHECK_ALERT_FOR,
+    [],
+  );
   const { t } = useTranslation();
   const kindForCRDResource = referenceFor(resource);
   const resourceModel = modelFor(kindForCRDResource);
@@ -53,10 +63,6 @@ const HealthChecksAlert: React.FC<HealthChecksAlertProps> = ({ resource }) => {
     verb: 'update',
   });
 
-  React.useEffect(() => {
-    setHideHealthCheckAlertFor(JSON.parse(localStorage.getItem(HIDE_HEALTH_CHECK_ALERT_FOR)) || []);
-  }, []);
-
   if (!_.includes(addHealthChecksRefs, referenceFor(resource))) {
     return null;
   }
@@ -69,13 +75,13 @@ const HealthChecksAlert: React.FC<HealthChecksAlertProps> = ({ resource }) => {
   );
 
   const handleAlertAction = () => {
-    const hideHealthCheckAlert = [...hideHealthCheckAlertFor, uid];
-    setHideHealthCheckAlertFor(hideHealthCheckAlert);
-    localStorage.setItem(HIDE_HEALTH_CHECK_ALERT_FOR, JSON.stringify(hideHealthCheckAlert));
+    if (loaded) {
+      setHideHealthCheckAlertFor((state) => [...state, uid]);
+    }
   };
 
   const showAlert =
-    !healthCheckAdded && !_.includes(hideHealthCheckAlertFor, uid) && canAddHealthChecks;
+    loaded && !healthCheckAdded && !_.includes(hideHealthCheckAlertFor, uid) && canAddHealthChecks;
 
   const addHealthChecksLink = `/k8s/ns/${namespace}/${resourceKind}/${name}/containers/${containersName[0]}/health-checks`;
 

diff --git a/...packages/console-shared/src/components/health-checks/__tests__/HealthChecksAlert.spec.tsx b/...packages/console-shared/src/components/health-checks/__tests__/HealthChecksAlert.spec.tsx
@@ -13,6 +13,10 @@ jest.mock('react-i18next', () => {
   };
 });
 
+jest.mock('@console/shared/src/hooks/useUserSettingsCompatibility', () => ({
+  useUserSettingsCompatibility: () => [[], jest.fn(), true],
+}));
+
 describe('HealthChecksAlert', () => {
   const spyUseAccessReview = jest.spyOn(utils, 'useAccessReview');
   it('should show alert when health check probes not present', () => {