Watch ConsoleLinks so they update in the UI without refreshing

frontend/packages/dev-console/src/components/guided-tour/GuidedTourText.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore: FIXME missing exports due to out-of-sync @types/react-redux version
-import { useSelector } from 'react-redux';
 import { PlusCircleIcon } from '@patternfly/react-icons';
-import { RootState } from '@console/internal/redux';
 import { useOpenshiftVersion } from '@console/shared/src/hooks/version';
-import { K8sResourceCommon } from '@console/internal/module/k8s';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
+import { ConsoleLinkModel } from '@console/internal/models';
 
 const DevPerspectiveTourText: React.FC = () => {
   const openshiftVersion = useOpenshiftVersion();
@@ -53,11 +51,13 @@ export const searchTourText = (
 );
 
 const FinishTourText: React.FC = () => {
-  const consoleLinks = useSelector<K8sResourceCommon[]>((state: RootState) =>
-    state.UI.get('consoleLinks'),
-  );
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
   const openshiftBlogLink = consoleLinks.filter(
-    (link: K8sResourceCommon) => link.metadata.name === 'openshift-blog',
+    (link: K8sResourceKind) => link.metadata.name === 'openshift-blog',
   )[0]?.spec?.href;
   // declaring openshiftHelpBase instead of importing because it throws error while using it as tour extension
   const openshiftHelpBase =

frontend/packages/dev-console/src/components/topology/TopologyEdgeResourcesPanel.tsx

@@ -1,29 +1,27 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
 import * as _ from 'lodash';
 import { Edge } from '@patternfly/react-topology';
-import { RootState } from '@console/internal/redux';
-import { referenceFor, K8sResourceKind } from '@console/internal/module/k8s';
+import { ConsoleLinkModel } from '@console/internal/models';
+import { K8sResourceKind, referenceFor, referenceForModel } from '@console/internal/module/k8s';
 import {
   ResourceLink,
   SidebarSectionHeading,
   ExternalLink,
 } from '@console/internal/components/utils';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { TYPE_TRAFFIC_CONNECTOR } from './components/const';
 import { getNamespaceDashboardKialiLink, getResource } from './topology-utils';
 
-type StateProps = {
-  consoleLinks?: K8sResourceKind[];
-};
-
 export type TopologyEdgeResourcesPanelProps = {
   edge: Edge;
-} & StateProps;
+};
 
-const TopologyEdgeResourcesPanel: React.FC<TopologyEdgeResourcesPanelProps> = ({
-  edge,
-  consoleLinks,
-}) => {
+const TopologyEdgeResourcesPanel: React.FC<TopologyEdgeResourcesPanelProps> = ({ edge }) => {
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
   const source = getResource(edge.getSource());
   const target = getResource(edge.getTarget());
   const resources = [source, target];
@@ -62,9 +60,4 @@ const TopologyEdgeResourcesPanel: React.FC<TopologyEdgeResourcesPanelProps> = ({
   );
 };
 
-const TopologyEdgeResourcesStateToProps = (state: RootState) => {
-  const consoleLinks = state.UI.get('consoleLinks');
-  return { consoleLinks };
-};
-
-export default connect(TopologyEdgeResourcesStateToProps)(TopologyEdgeResourcesPanel);
+export default TopologyEdgeResourcesPanel;

frontend/packages/dev-console/src/components/topology/components/nodes/WorkloadNode.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
 import { calculateRadius } from '@console/shared';
 import {
   Node,
@@ -10,9 +9,11 @@ import {
   WithDndDropProps,
   WithContextMenuProps,
 } from '@patternfly/react-topology';
-import { RootState } from '@console/internal/redux';
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { ConsoleLinkModel } from '@console/internal/models';
+import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
 import { routeDecoratorIcon } from '../../../import/render-utils';
 import { Decorator } from './Decorator';
 import PodSet, { podSetInnerRadius } from './PodSet';
@@ -23,10 +24,6 @@ import { useDisplayFilters, getFilterById, SHOW_POD_COUNT_FILTER_ID } from '../.
 import MonitoringAlertsDecorator from './MonitoringAlertsDecorator';
 import './WorkloadNode.scss';
 
-interface StateProps {
-  cheURL: string;
-}
-
 export type WorkloadNodeProps = {
   element: Node;
   hover?: boolean;
@@ -40,18 +37,22 @@ export type WorkloadNodeProps = {
   WithDragNodeProps &
   WithDndDropProps &
   WithContextMenuProps &
-  WithCreateConnectorProps &
-  StateProps;
+  WithCreateConnectorProps;
 
 const ObservedWorkloadNode: React.FC<WorkloadNodeProps> = ({
   element,
   urlAnchorRef,
   canDrop,
   dropTarget,
   dropTooltip,
-  cheURL,
   ...rest
 }) => {
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
+  const cheURL = getCheURL(consoleLinks);
   const { width, height } = element.getDimensions();
   const workloadData = element.getData().data;
   const filters = useDisplayFilters();
@@ -141,12 +142,5 @@ const ObservedWorkloadNode: React.FC<WorkloadNodeProps> = ({
   );
 };
 
-const mapStateToProps = (state: RootState): StateProps => {
-  const consoleLinks = state.UI.get('consoleLinks');
-  return {
-    cheURL: getCheURL(consoleLinks),
-  };
-};
-
-const WorkloadNode = connect(mapStateToProps)(observer(ObservedWorkloadNode));
+const WorkloadNode = observer(ObservedWorkloadNode);
 export { WorkloadNode };

frontend/packages/dev-console/src/components/topology/filters/TopologyFilterBar.tsx

@@ -16,8 +16,10 @@ import { useQueryParams } from '@console/shared';
 import { RootState } from '@console/internal/redux';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { ExternalLink } from '@console/internal/components/utils';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
 import { TextFilter } from '@console/internal/components/factory';
-import { K8sResourceKind } from '@console/internal/module/k8s';
+import { K8sResourceKind, referenceForModel } from '@console/internal/module/k8s';
+import { ConsoleLinkModel } from '@console/internal/models';
 import { setTopologyFilters } from '../redux/action';
 import { DisplayFilters } from '../topology-types';
 import {
@@ -36,7 +38,6 @@ type StateProps = {
   filters: DisplayFilters;
   supportedFilters: string[];
   supportedKinds: { [key: string]: number };
-  consoleLinks: K8sResourceKind[];
   namespace: string;
 };
 
@@ -60,9 +61,13 @@ const TopologyFilterBar: React.FC<TopologyFilterBarProps> = ({
   onFiltersChange,
   visualization,
   showGraphView,
-  consoleLinks,
   namespace,
 }) => {
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
   const kialiLink = getNamespaceDashboardKialiLink(consoleLinks, namespace);
   const queryParams = useQueryParams();
   const searchQuery = queryParams.get('searchQuery') || '';
@@ -145,7 +150,6 @@ const mapStateToProps = (state: RootState): StateProps => {
     filters: getTopologyFilters(state),
     supportedFilters: getSupportedTopologyFilters(state),
     supportedKinds: getSupportedTopologyKinds(state),
-    consoleLinks: state.UI.get('consoleLinks'),
     namespace: getActiveNamespace(state),
   };
   return states;
@@ -158,14 +162,13 @@ const dispatchToProps = (dispatch: Dispatch): DispatchProps => ({
 });
 
 const mergeProps = (
-  { filters, supportedFilters, supportedKinds, consoleLinks, namespace }: StateProps,
+  { filters, supportedFilters, supportedKinds, namespace }: StateProps,
   { onFiltersChange }: DispatchProps,
   { visualization, showGraphView }: OwnProps,
 ): MergeProps => ({
   filters,
   supportedFilters,
   supportedKinds,
-  consoleLinks,
   namespace,
   onFiltersChange,
   visualization,

frontend/public/actions/common.ts

@@ -4,12 +4,9 @@ enum ActionType {
   SetCreateProjectMessage = 'setCreateProjectMessage',
   SetClusterID = 'setClusterID',
   SetUser = 'setUser',
-  SetConsoleLinks = 'setConsoleLinks',
 }
 
 export const setClusterID = (clusterID: string) => action(ActionType.SetClusterID, { clusterID });
 export const setUser = (user: any) => action(ActionType.SetUser, { user });
 export const setCreateProjectMessage = (message: string) =>
   action(ActionType.SetCreateProjectMessage, { message });
-export const setConsoleLinks = (consoleLinks: string[]) =>
-  action(ActionType.SetConsoleLinks, { consoleLinks });

frontend/public/actions/features.ts

@@ -6,7 +6,7 @@ import { GroupModel, UserModel } from '../models';
 import { ClusterVersionKind } from '../module/k8s';
 import { receivedResources } from './k8s';
 import { pluginStore } from '../plugins';
-import { setClusterID, setCreateProjectMessage, setUser, setConsoleLinks } from './common';
+import { setClusterID, setCreateProjectMessage, setUser } from './common';
 import { isCustomFeatureFlag } from '@console/plugin-sdk';
 import client, { fetchURL } from '../graphql/client';
 import { SSARQuery } from './features.gql';
@@ -206,18 +206,6 @@ const detectUser = (dispatch) =>
     },
   );
 
-const detectConsoleLinks = (dispatch) =>
-  fetchURL('/apis/console.openshift.io/v1/consolelinks').then(
-    (consoleLinks) => {
-      dispatch(setConsoleLinks(_.get(consoleLinks, 'items')));
-    },
-    (err) => {
-      if (!_.includes([401, 403, 404, 500], err?.response?.status)) {
-        setTimeout(() => detectConsoleLinks(dispatch), 15000);
-      }
-    },
-  );
-
 const ssarCheckActions = ssarChecks.map(({ flag, resourceAttributes, after }) => {
   const fn = (dispatch: Dispatch) =>
     client
@@ -244,7 +232,6 @@ export const detectFeatures = () => (dispatch: Dispatch) =>
     detectCanCreateProject,
     detectClusterVersion,
     detectUser,
-    detectConsoleLinks,
     ...ssarCheckActions,
     ...pluginStore
       .getAllExtensions()

frontend/public/actions/ui.ts

@@ -16,7 +16,7 @@ import { K8sResourceKind, PodKind, NodeKind } from '../module/k8s';
 import { allModels } from '../module/k8s/k8s-models';
 import { detectFeatures, clearSSARFlags } from './features';
 import { OverviewSpecialGroup } from '../components/overview/constants';
-import { setClusterID, setCreateProjectMessage, setUser, setConsoleLinks } from './common';
+import { setClusterID, setCreateProjectMessage, setUser } from './common';
 import { Rule } from '../components/monitoring/types';
 import { subsClient } from '../graphql/client';
 
@@ -63,7 +63,6 @@ export enum ActionType {
   UpdateOverviewLabels = 'updateOverviewLabels',
   UpdateOverviewFilterValue = 'updateOverviewFilterValue',
   UpdateTimestamps = 'updateTimestamps',
-  SetConsoleLinks = 'setConsoleLinks',
   SetPodMetrics = 'setPodMetrics',
   SetNamespaceMetrics = 'setNamespaceMetrics',
   SetNodeMetrics = 'setNodeMetrics',
@@ -445,7 +444,6 @@ const uiActions = {
   queryBrowserSetPollInterval,
   queryBrowserToggleIsEnabled,
   queryBrowserToggleSeries,
-  setConsoleLinks,
   setPodMetrics,
   setNamespaceMetrics,
   setNodeMetrics,

frontend/public/components/dashboard/project-dashboard/project-dashboard.tsx

@@ -3,26 +3,22 @@ import * as _ from 'lodash-es';
 
 import Dashboard from '@console/shared/src/components/dashboard/Dashboard';
 import DashboardGrid from '@console/shared/src/components/dashboard/DashboardGrid';
-import { K8sResourceKind, LabelSelector, Selector } from '../../../module/k8s';
+import { useK8sWatchResource } from '@console/internal/components/utils/k8s-watch-hook';
+import { ConsoleLinkModel } from '@console/internal/models';
+import { K8sResourceKind, LabelSelector, referenceForModel, Selector } from '../../../module/k8s';
 import { DetailsCard } from './details-card';
 import { StatusCard } from './status-card';
 import { UtilizationCard } from './utilization-card';
 import { InventoryCard } from './inventory-card';
 import { ActivityCard } from './activity-card';
 import { ProjectDashboardContext } from './project-dashboard-context';
 import { LauncherCard } from './launcher-card';
-import { connect } from 'react-redux';
-import { RootState } from '../../../redux';
 import { ResourceQuotaCard } from './resource-quota-card';
 
 const mainCards = [{ Card: StatusCard }, { Card: UtilizationCard }, { Card: ResourceQuotaCard }];
 const leftCards = [{ Card: DetailsCard }, { Card: InventoryCard }];
 const rightCards = [{ Card: ActivityCard }];
 
-const mapStateToProps = ({ UI }: RootState): ProjectDashboardReduxProps => ({
-  consoleLinks: UI.get('consoleLinks'),
-});
-
 export const getNamespaceDashboardConsoleLinks = (
   ns: K8sResourceKind,
   consoleLinks: K8sResourceKind[],
@@ -49,10 +45,12 @@ export const getNamespaceDashboardConsoleLinks = (
   });
 };
 
-const ProjectDashboard_: React.FC<ProjectDashboardReduxProps & ProjectDashboardProps> = ({
-  obj,
-  consoleLinks,
-}) => {
+export const ProjectDashboard: React.FC<ProjectDashboardProps> = ({ obj }) => {
+  const [consoleLinks] = useK8sWatchResource<K8sResourceKind[]>({
+    isList: true,
+    kind: referenceForModel(ConsoleLinkModel),
+    optional: true,
+  });
   const namespaceLinks = getNamespaceDashboardConsoleLinks(obj, consoleLinks);
   const context = {
     obj,
@@ -75,14 +73,6 @@ const ProjectDashboard_: React.FC<ProjectDashboardReduxProps & ProjectDashboardP
   );
 };
 
-export const ProjectDashboard = connect<ProjectDashboardReduxProps, {}, ProjectDashboardProps>(
-  mapStateToProps,
-)(ProjectDashboard_);
-
-type ProjectDashboardReduxProps = {
-  consoleLinks: K8sResourceKind[];
-};
-
 type ProjectDashboardProps = {
   obj: K8sResourceKind;
 };