CONSOLE-3769: Remove allPluginsProcessedRef from usePluginInfo

because it is not in the SDK

Author: logonoff

frontend/packages/console-app/src/components/console-operator/ConsoleOperatorConfig.tsx

@@ -31,7 +31,7 @@ import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watc
 import { KebabAction } from '@console/internal/components/utils/kebab';
 import { asAccessReview, RequireCreatePermission } from '@console/internal/components/utils/rbac';
 import { ResourceLink } from '@console/internal/components/utils/resource-link';
-import { EmptyBox, LoadingBox } from '@console/internal/components/utils/status-box';
+import { EmptyBox } from '@console/internal/components/utils/status-box';
 import { ConsoleOperatorConfigModel, ConsolePluginModel } from '@console/internal/models';
 import {
   ConsolePluginKind,
@@ -155,7 +155,7 @@ export const ConsolePluginCSPStatus: React.FC<ConsolePluginCSPStatusProps> = ({
   );
 };
 
-const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, loaded }) => {
+const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows }) => {
   const { t } = useTranslation();
 
   const [sortBy, setSortBy] = React.useState<ISortBy>(() => ({
@@ -219,9 +219,7 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
 
   const sortedRows = React.useMemo(() => rows.sort(compare), [rows, compare]);
 
-  return !loaded ? (
-    <LoadingBox />
-  ) : (
+  return (
     <PaneBody>
       {obj.spec?.managementState === 'Unmanaged' && (
         <Alert
@@ -296,32 +294,30 @@ const ConsolePluginsTable: React.FC<ConsolePluginsTableProps> = ({ obj, rows, lo
 };
 
 const DevPluginsPage: React.FCC<ConsoleOperatorConfigPageProps> = (props) => {
-  const [pluginInfo, pluginInfoLoaded] = usePluginInfo();
+  const pluginInfo = usePluginInfo();
   const cspViolations = useSelector<RootState, PluginCSPViolations>(({ UI }) =>
     UI.get('pluginCSPViolations'),
   );
 
   const rows = React.useMemo<ConsolePluginTableRow[]>(
     () =>
-      !pluginInfoLoaded
-        ? []
-        : pluginInfo
-            .filter((plugin) => plugin?.status === 'loaded')
-            .map((plugin) => ({
-              name: plugin.metadata.name,
-              version: plugin.metadata.version,
-              description: plugin.metadata?.customProperties?.console?.description,
-              enabled: plugin.enabled,
-              status: plugin.status,
-              hasCSPViolations: cspViolations[plugin.metadata.name] ?? false,
-            })),
-    [pluginInfo, pluginInfoLoaded, cspViolations],
+      pluginInfo
+        .filter((plugin) => plugin?.status === 'loaded')
+        .map((plugin) => ({
+          name: plugin.metadata.name,
+          version: plugin.metadata.version,
+          description: plugin.metadata?.customProperties?.console?.description,
+          enabled: plugin.enabled,
+          status: plugin.status,
+          hasCSPViolations: cspViolations[plugin.metadata.name] ?? false,
+        })),
+    [pluginInfo, cspViolations],
   );
-  return <ConsolePluginsTable {...props} rows={rows} loaded={pluginInfoLoaded} />;
+  return <ConsolePluginsTable {...props} rows={rows} />;
 };
 
 const PluginsPage: React.FC<ConsoleOperatorConfigPageProps> = (props) => {
-  const [pluginInfo] = usePluginInfo();
+  const pluginInfo = usePluginInfo();
   const [consolePlugins, consolePluginsLoaded] = useK8sWatchResource<ConsolePluginKind[]>({
     isList: true,
     kind: referenceForModel(ConsolePluginModel),
@@ -423,7 +419,7 @@ export type ConsolePluginTableRow = {
   name: string;
   version?: string;
   description?: string;
-  status: DynamicPluginInfo['status'];
+  status: PluginInfoEntry['status'];
   enabled: boolean;
   errorMessage?: string;
   hasCSPViolations?: boolean;
@@ -437,7 +433,6 @@ type TableColumn = {
 
 type ConsolePluginsTableProps = ConsoleOperatorConfigPageProps & {
   rows: ConsolePluginTableRow[];
-  loaded: boolean;
 };
 
 type ConsolePluginStatusProps = {

frontend/packages/console-app/src/components/console-operator/ConsolePluginDescriptionDetail.tsx

@@ -6,7 +6,7 @@ import { DASH } from '@console/shared/src/constants';
 const ConsolePluginDescriptionDetail: React.FC<DetailsItemComponentProps> = ({ obj }) => {
   const pluginName = React.useMemo(() => obj?.metadata?.name, [obj?.metadata?.name]);
 
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const pluginInfo = React.useMemo(
     () =>
       pluginInfoEntries.find((entry) =>

frontend/packages/console-app/src/components/console-operator/ConsolePluginEnabledStatusDetail.tsx

@@ -9,7 +9,7 @@ import {
 } from './ConsoleOperatorConfig';
 
 const ConsolePluginEnabledStatusDetail: React.FC<DetailsItemComponentProps> = ({ obj }) => {
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const { consoleOperatorConfig, consoleOperatorConfigLoaded } = useConsoleOperatorConfigData();
 
   const pluginName = React.useMemo(() => obj?.metadata?.name, [obj?.metadata?.name]);

frontend/packages/console-app/src/components/console-operator/ConsolePluginStatusDetail.tsx

@@ -5,7 +5,7 @@ import { DASH } from '@console/shared/src/constants';
 import { ConsolePluginStatus } from './ConsoleOperatorConfig';
 
 const ConsolePluginStatusDetail: React.FC<DetailsItemComponentProps> = ({ obj }) => {
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const pluginName = React.useMemo(() => obj?.metadata?.name, [obj?.metadata?.name]);
 
   const pluginInfo = React.useMemo(

frontend/packages/console-app/src/components/console-operator/ConsolePluginVersionDetail.tsx

@@ -4,7 +4,7 @@ import { usePluginInfo } from '@console/plugin-sdk/src/api/usePluginInfo';
 import { DASH } from '@console/shared/src/constants';
 
 const ConsolePluginVersionDetail: React.FC<DetailsItemComponentProps> = ({ obj }) => {
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
 
   const pluginName = React.useMemo(() => obj?.metadata?.name, [obj?.metadata?.name]);
 

frontend/packages/console-app/src/components/dashboards-page/dynamic-plugins-health-resource/DynamicPluginsPopover.tsx

@@ -14,7 +14,7 @@ import NotLoadedDynamicPlugins from './NotLoadedDynamicPlugins';
 
 const DynamicPluginsPopover: React.FC<DynamicPluginsPopoverProps> = ({ consolePlugins }) => {
   const { t } = useTranslation();
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const cspViolations = useSelector<RootState, PluginCSPViolations>(({ UI }) =>
     UI.get('pluginCSPViolations'),
   );

frontend/packages/console-plugin-sdk/src/api/usePluginInfo.ts

@@ -13,7 +13,7 @@ import { subscribeToDynamicPlugins } from './pluginSubscriptionService';
  *
  * ```ts
  * const Example = () => {
- *   const [pluginInfoEntries, allPluginsProcessed] = usePluginInfo();
+ *   const pluginInfoEntries = usePluginInfo();
  *   // process plugin entries and render your component
  * };
  * ```
@@ -22,19 +22,17 @@ import { subscribeToDynamicPlugins } from './pluginSubscriptionService';
  *
  * @returns Console dynamic plugin runtime information.
  */
-export const usePluginInfo = (): [DynamicPluginInfo[], boolean] => {
+export const usePluginInfo = (): DynamicPluginInfo[] => {
   const forceRender = useForceRender();
 
   const isMountedRef = useRef(true);
   const unsubscribeRef = useRef<VoidFunction>(null);
   const pluginInfoEntriesRef = useRef<DynamicPluginInfo[]>([]);
-  const allPluginsProcessedRef = useRef<boolean>(false);
 
   const trySubscribe = useCallback(() => {
     if (unsubscribeRef.current === null) {
       unsubscribeRef.current = subscribeToDynamicPlugins((pluginInfoEntries) => {
         pluginInfoEntriesRef.current = pluginInfoEntries;
-        allPluginsProcessedRef.current = pluginInfoEntries.every((i) => i.status !== 'pending');
         isMountedRef.current && forceRender();
       });
     }
@@ -57,5 +55,5 @@ export const usePluginInfo = (): [DynamicPluginInfo[], boolean] => {
     [tryUnsubscribe],
   );
 
-  return [pluginInfoEntriesRef.current, allPluginsProcessedRef.current];
+  return pluginInfoEntriesRef.current;
 };

frontend/public/components/about-modal.tsx

@@ -32,7 +32,7 @@ import redHatFedoraWatermarkImg from '../imgs/red-hat-fedora-watermark.svg';
 
 const DynamicPlugins: React.FC = () => {
   const { t } = useTranslation();
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const [items, setItems] = React.useState([]);
 
   React.useEffect(() => {

frontend/public/components/app-contents.tsx

@@ -155,10 +155,15 @@ const HorizontalPodRedirect = () => {
 };
 
 const AppContents: React.FC<{}> = () => {
-  const [, allPluginsProcessed] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const location = useLocation();
   const [pluginPageRoutes, inactivePluginPageRoutes] = usePluginRoutes();
 
+  const allPluginsProcessed = React.useMemo(
+    () => pluginInfoEntries.every((i) => i.status !== 'pending'),
+    [pluginInfoEntries],
+  );
+
   const contentRouter = (
     <Routes>
       {pluginPageRoutes}

frontend/public/components/notification-drawer.tsx

@@ -14,7 +14,7 @@ import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import { useDispatch } from 'react-redux';
 import { Link, NavigateFunction, useNavigate } from 'react-router-dom-v5-compat';
-import { isNotLoadedDynamicPluginInfo, DynamicPluginInfo } from '@console/plugin-sdk';
+import { DynamicPluginInfo } from '@console/plugin-sdk';
 import { usePluginInfo } from '@console/plugin-sdk/src/api/usePluginInfo';
 import * as UIActions from '@console/internal/actions/ui';
 import { resourcePath } from '@console/internal/components/utils/resource-link';
@@ -162,9 +162,7 @@ const getUpdateNotificationEntries = (
   const newerChannelVersion = splitClusterVersionChannel(newerChannel)?.version;
   const entries = [];
 
-  const failedPlugins = pluginInfoEntries
-    .filter(isNotLoadedDynamicPluginInfo)
-    .filter((plugin) => plugin.status === 'failed');
+  const failedPlugins = pluginInfoEntries.filter((plugin) => plugin.status === 'failed');
 
   if (!_.isEmpty(updateData)) {
     entries.push(
@@ -245,7 +243,7 @@ export const NotificationDrawer: FC<NotificationDrawerProps> = ({
   const { t } = useTranslation();
   const clusterID = getClusterID(useClusterVersion());
   const showServiceLevelNotification = useShowServiceLevelNotifications(clusterID);
-  const [pluginInfoEntries] = usePluginInfo();
+  const pluginInfoEntries = usePluginInfo();
   const dispatch = useDispatch();
   const clusterVersion: ClusterVersionKind = useClusterVersion();
   const [alerts, , loadError] = useNotificationAlerts();