OCPBUGS-44505: Exclude crypto from node polyfill, update console-telemetry-plugin to use browsers crypto, refactor

Author: Mylanos

frontend/packages/console-shared/src/hooks/useUserSettings.ts

@@ -32,6 +32,56 @@ const useCounterRef = (initialValue: number = 0): [boolean, () => void, () => vo
   return [counterRef.current !== initialValue, increment, decrement];
 };
 
+const useUserUid = () => {
+  // Unique username
+  const uniqueUsernameRef = React.useRef<string>('');
+  const [userUidLoading, setUserUidLoading] = React.useState<boolean>(true);
+
+  // User id and impersonate name
+  const userImpersonateNameOrUID = useSelector((state: RootState) => {
+    const impersonateName = getImpersonate(state)?.name;
+    const uid = getUser(state)?.uid;
+    return impersonateName || uid || '';
+  });
+
+  // Username
+  const username = useSelector((state: RootState) => {
+    return getUser(state)?.username;
+  });
+
+  // construct unique username
+  React.useEffect(() => {
+    let activeGenerate = true;
+
+    if (username === 'kube:admin') {
+      uniqueUsernameRef.current = 'kubeadmin';
+      setUserUidLoading(false);
+    } else if (username) {
+      setUserUidLoading(true);
+      generateHash('SHA-256', username)
+        .then((hash) => {
+          if (activeGenerate) {
+            uniqueUsernameRef.current = hash;
+            setUserUidLoading(false);
+          }
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.error('Could not generate unique username hash:', err);
+          setUserUidLoading(false);
+        });
+    } else {
+      setUserUidLoading(false);
+    }
+
+    return () => {
+      activeGenerate = false;
+    };
+  }, [username]);
+
+  return { userUidLoading, userUid: userImpersonateNameOrUID || uniqueUsernameRef.current || '' };
+};
+
 export const useUserSettings: UseUserSettings = <T>(key, defaultValue, sync = false) => {
   // Mount status for safety state updates
   const mounted = React.useRef(true);
@@ -64,50 +114,7 @@ export const useUserSettings: UseUserSettings = <T>(key, defaultValue, sync = fa
   // Request counter
   const [isRequestPending, increaseRequest, decreaseRequest] = useCounterRef();
 
-  // Unique username
-  const [uniqueUsername, setUniqueUsernameUnsafe] = React.useState<string>('');
-  const setUniqueUsername: typeof setUniqueUsernameUnsafe = React.useCallback(
-    (...args) => mounted.current && setUniqueUsernameUnsafe(...args),
-    [setUniqueUsernameUnsafe],
-  );
-  // User id and impersonate name
-  const userImpersonateNameOrUID = useSelector((state: RootState) => {
-    const impersonateName = getImpersonate(state)?.name;
-    const uid = getUser(state)?.uid;
-    return impersonateName || uid || '';
-  });
-
-  // Username
-  const username = useSelector((state: RootState) => {
-    return getUser(state)?.username;
-  });
-
-  // construct unique username
-  React.useEffect(() => {
-    let activeGenerate = true;
-
-    if (!username) {
-      setUniqueUsername('');
-    } else if (username === 'kube:admin') {
-      setUniqueUsername('kubeadmin');
-    } else {
-      generateHash('SHA-256', username)
-        .then((hash) => {
-          if (activeGenerate) {
-            setUniqueUsername(hash);
-          }
-        })
-        .catch((err) => {
-          // eslint-disable-next-line no-console
-          console.error('Could not generate unique username hash:', err);
-        });
-    }
-    return () => {
-      activeGenerate = false;
-    };
-  }, [username, setUniqueUsername]);
-
-  const userUid = userImpersonateNameOrUID || uniqueUsername || '';
+  const { userUidLoading, userUid } = useUserUid();
 
   const impersonate: boolean = useSelector((state: RootState) => !!getImpersonate(state));
 
@@ -122,7 +129,7 @@ export const useUserSettings: UseUserSettings = <T>(key, defaultValue, sync = fa
 
   const isLocalStorage = fallbackLocalStorage || impersonate;
   const [lsData, setLsDataCallback] = useUserSettingsLocalStorage(
-    alwaysUseFallbackLocalStorage && !impersonate
+    (alwaysUseFallbackLocalStorage || userUidLoading) && !impersonate && !userUidLoading
       ? 'console-user-settings'
       : `console-user-settings-${userUid}`,
     keyRef.current,

frontend/packages/console-shared/src/utils/utils.ts

@@ -33,16 +33,19 @@ export const createLookup = <A extends K8sResourceKind>(
 type HashingAlgorithm = 'SHA-1' | 'SHA-256' | 'SHA-384' | 'SHA-512';
 
 export const generateHash = async (algorithm: HashingAlgorithm, data: string): Promise<string> => {
+  if (!data) {
+    return '';
+  }
+
   try {
     const msgUint8 = new TextEncoder().encode(data);
     const hashBuffer = await window.crypto.subtle.digest(algorithm, msgUint8);
     const hashArray = Array.from(new Uint8Array(hashBuffer));
-    // converts bytes to a hexadecimal string, ensures that each hex is two characters long (e.g. 0f instead f)
     return hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
   } catch (e) {
     // eslint-disable-next-line no-console
     console.error(`Failed to generate hash with ${algorithm}:`, e);
-    return '';
+    throw e; // Re-throw the error to be handled by the caller
   }
 };
 

frontend/webpack.config.ts

@@ -96,6 +96,7 @@ const config: Configuration = {
       prettier: false,
       'prettier/parser-yaml': false,
     },
+    fallback: { crypto: false },
   },
   node: {
     global: true, // see https://github.com/browserify/randombytes/issues/36
@@ -267,6 +268,7 @@ const config: Configuration = {
     }),
     new NodePolyfillPlugin({
       additionalAliases: ['process'],
+      excludeAliases: ['crypto'],
     }),
     new CopyWebpackPlugin({
       patterns: [