Fix provider selector (#3835)

workspaces/kiali/.changeset/icy-clouds-feel.md

@@ -0,0 +1,5 @@
+---
+'@backstage-community/plugin-kiali': minor
+---
+
+Fix provider selector

workspaces/kiali/DEVELOPMENT.md

@@ -28,7 +28,7 @@
 
 ```bash
     export KIALI_BASE_URL=https://kiali-istio-system.apps-crc.testing;`
-    yarn start:backstage
+    yarn start
 ```
 
 ## Configure auth

workspaces/kiali/app-config.yaml

@@ -87,9 +87,9 @@ kubernetes:
 
 kiali:
   providers:
-    - name: default
+    - name: Kubernetes
       # See the README file for configuration
-      url: ${KIALI_BASE_URL}
+      url: http://localhost:20001/kiali/
       # Optional. Kiali public URL to redirect to standalone Kiali. When not specified, url will be used.
       # urlExternal: ''
       # Optional. Required by token authentication
@@ -102,9 +102,9 @@ kiali:
       # caFile: ''
       # Optional. Time in seconds that session is enabled, defaults to 1 minute.
       sessionTime: 60
-    - name: kubernetes
+    - name: default
       # See the README file for configuration
-      url: http://localhost:20001/kiali/
+      url: ${KIALI_BASE_URL}
       # Optional. Kiali public URL to redirect to standalone Kiali. When not specified, url will be used.
       # urlExternal: ''
       # Optional. Required by token authentication

workspaces/kiali/package.json

@@ -6,12 +6,12 @@
     "node": "20"
   },
   "scripts": {
-    "start:backstage": "concurrently -c auto -n \"fe,be\" -p \"{name}:{pid}\" \"yarn start-app\" \"yarn start-backend\"",
+    "start": "backstage-cli repo start",
     "start-app": "yarn workspace app start",
     "start-backend": "yarn workspace backend start",
     "tsc": "tsc",
     "tsc:full": "tsc --skipLibCheck true --incremental false",
-    "build:all": "backstage-cli repo build --all",
+    "build:all": "CI=true backstage-cli repo build --all",
     "build:api-reports": "yarn build:api-reports:only",
     "build:api-reports:only": "backstage-repo-tools api-reports --allow-all-warnings -o ae-wrong-input-file-type,ae-undocumented --validate-release-tags",
     "clean": "backstage-cli repo clean",

workspaces/kiali/packages/app/src/App.test.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { render, waitFor } from '@testing-library/react';
-import React from 'react';
 import App from './App';
 
 describe('App', () => {

workspaces/kiali/packages/app/src/App.tsx

@@ -45,7 +45,6 @@ import {
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { UserSettingsPage } from '@backstage/plugin-user-settings';
-import React from 'react';
 import { Navigate, Route } from 'react-router-dom';
 import { apis } from './apis';
 import { entityPage } from './components/catalog/EntityPage';

workspaces/kiali/packages/app/src/components/Root/LogoFull.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
 
 const useStyles = makeStyles({
   svg: {

workspaces/kiali/packages/app/src/components/Root/LogoIcon.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { makeStyles } from '@material-ui/core';
-import React from 'react';
 
 const useStyles = makeStyles({
   svg: {

workspaces/kiali/packages/app/src/components/Root/Root.tsx

@@ -40,7 +40,7 @@ import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import MenuIcon from '@material-ui/icons/Menu';
 import GroupIcon from '@material-ui/icons/People';
 import SearchIcon from '@material-ui/icons/Search';
-import React, { PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import LogoFull from './LogoFull';
 import LogoIcon from './LogoIcon';
 

workspaces/kiali/packages/app/src/components/catalog/EntityPage.tsx

@@ -74,7 +74,6 @@ import { EntityTechdocsContent } from '@backstage/plugin-techdocs';
 import { ReportIssue } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
 import { Button, Grid } from '@material-ui/core';
-import React from 'react';
 
 const techdocsContent = (
   <EntityTechdocsContent>

workspaces/kiali/packages/app/src/components/search/SearchPage.tsx

@@ -36,7 +36,6 @@ import {
 } from '@backstage/plugin-search-react';
 import { TechDocsSearchResultListItem } from '@backstage/plugin-techdocs';
 import { Grid, makeStyles, Paper, Theme } from '@material-ui/core';
-import React from 'react';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {

workspaces/kiali/packages/app/src/index.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import '@backstage/cli/asset-types';
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 

workspaces/kiali/plugins/kiali/dev/index.tsx

@@ -21,7 +21,6 @@ import { EntityProvider } from '@backstage/plugin-catalog-react';
 import { TestApiProvider } from '@backstage/test-utils';
 import { Grid } from '@material-ui/core';
 import { getAllThemes } from '@redhat-developer/red-hat-developer-hub-theme';
-import React from 'react';
 import { EntityKialiResourcesCard, kialiPlugin } from '../src';
 import { KialiHelper } from '../src/pages/Kiali/KialiHelper';
 import { KialiNoAnnotation } from '../src/pages/Kiali/KialiNoAnnotation';

workspaces/kiali/plugins/kiali/report.api.md

@@ -6,7 +6,7 @@
 /// <reference types="react" />
 
 import { BackstagePlugin } from '@backstage/core-plugin-api';
-import { JSX as JSX_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
 import { default as KialiIcon } from '@mui/icons-material/Troubleshoot';
 import { RouteRef } from '@backstage/core-plugin-api';
 import { SubRouteRef } from '@backstage/core-plugin-api';

workspaces/kiali/plugins/kiali/src/components/About/AboutUIModal.tsx

@@ -29,7 +29,7 @@ import {
 } from '@material-ui/core';
 import CloseIcon from '@material-ui/icons/Close';
 import { Alert } from '@material-ui/lab';
-import * as React from 'react';
+import { default as React } from 'react';
 import { config, KialiIcon, KialiLogo } from '../../config';
 import { kialiStyle } from '../../styles/StyleUtils';
 import {

workspaces/kiali/plugins/kiali/src/components/Ambient/AmbientBadge.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Chip, Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 
 type AmbientLabelProps = {
   style?: React.CSSProperties;

workspaces/kiali/plugins/kiali/src/components/Ambient/AmbientLabel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Chip, Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 
 type AmbientLabelProps = {
   tooltip: boolean;

workspaces/kiali/plugins/kiali/src/components/Banners/TechPreviewWarning.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { Alert } from '@material-ui/lab';
-import * as React from 'react';
 
 type defaultProps = {
   message?: string;

workspaces/kiali/plugins/kiali/src/components/BreadcrumbView/BreadcrumbView.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { Breadcrumbs } from '@material-ui/core';
-import * as React from 'react';
 import { Location, useLocation } from 'react-router-dom';
 import { HistoryManager } from '../../app/History';
 import { Paths } from '../../config';

workspaces/kiali/plugins/kiali/src/components/Charts/ChartWithLegend.tsx

@@ -28,7 +28,7 @@ import {
 } from '@patternfly/react-charts';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { format as d3Format } from 'd3-format';
-import * as React from 'react';
+import { default as React } from 'react';
 import regression from 'regression';
 import { VictoryBoxPlot } from 'victory-box-plot';
 import { VictoryPortal } from 'victory-core';

workspaces/kiali/plugins/kiali/src/components/Charts/CustomTooltip.tsx

@@ -20,7 +20,7 @@ import {
   ChartTooltip,
   ChartTooltipProps,
 } from '@patternfly/react-charts';
-import * as React from 'react';
+import { default as React } from 'react';
 import { VCDataPoint } from '../../types/VictoryChartInfo';
 import { toLocaleStringWithConditionalDate } from '../../utils/Date';
 

workspaces/kiali/plugins/kiali/src/components/Charts/Dashboard.tsx

@@ -16,7 +16,7 @@
 import { Grid } from '@material-ui/core';
 import { ChartThemeColor, getTheme } from '@patternfly/react-charts';
 import { isArray } from 'lodash';
-import * as React from 'react';
+import { default as React } from 'react';
 import { ChartModel, DashboardModel } from '../../types/Dashboards';
 import { AllPromLabelsValues } from '../../types/Metrics';
 import { Overlay } from '../../types/Overlay';

workspaces/kiali/plugins/kiali/src/components/Charts/KChart.tsx

@@ -28,7 +28,7 @@ import {
   EmptyStateVariant,
 } from '@patternfly/react-core';
 import { CubesIcon, ErrorCircleOIcon } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { PFColors } from '../../components/Pf/PfColors';
 import { KialiIcon } from '../../config/KialiIcon';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/components/Charts/SparklineChart.tsx

@@ -25,7 +25,7 @@ import {
   ChartThreshold,
   ChartVoronoiContainer,
 } from '@patternfly/react-charts';
-import * as React from 'react';
+import { default as React } from 'react';
 import {
   RichDataPoint,
   VCDataPoint,

workspaces/kiali/plugins/kiali/src/components/DefaultSecondaryMasthead/DefaultSecondaryMasthead.tsx

@@ -15,7 +15,7 @@
  */
 import { Grid, IconButton, Tooltip } from '@material-ui/core';
 import Refresh from '@material-ui/icons/Refresh';
-import React from 'react';
+import { default as React } from 'react';
 
 type DefaultProps = {
   hideNamespaceSelector?: boolean;

workspaces/kiali/plugins/kiali/src/components/DetailDescription/DetailDescription.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { Link } from 'react-router-dom';
 import { isMultiCluster, serverConfig } from '../../config';
 import { createIcon, KialiIcon } from '../../config/KialiIcon';

workspaces/kiali/plugins/kiali/src/components/Drawers/AppDetailsDrawer.tsx

@@ -16,7 +16,7 @@
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress } from '@material-ui/core';
 import { AxiosError } from 'axios';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { HistoryManager } from '../../app/History';
 import { AppInfo } from '../../pages/AppDetails/AppInfo';

workspaces/kiali/plugins/kiali/src/components/Drawers/ServiceDetailsDrawer.tsx

@@ -15,7 +15,7 @@
  */
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { HistoryManager } from '../../app/History';
 import { ServiceInfo } from '../../pages/ServiceDetails/ServiceInfo';

workspaces/kiali/plugins/kiali/src/components/Drawers/WorkloadDetailsDrawer.tsx

@@ -15,7 +15,7 @@
  */
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { WorkloadInfo } from '../../pages/WorkloadDetails/WorkloadInfo';
 import { kialiApiRef } from '../../services/Api';

workspaces/kiali/plugins/kiali/src/components/Envoy/AccessLogModal.tsx

@@ -27,7 +27,7 @@ import {
   Split,
   SplitItem,
 } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { classes } from 'typestyle';
 import { PFColors } from '../../components/Pf/PfColors';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/components/Filters/LabelFilter.tsx

@@ -20,7 +20,7 @@ import {
   PopoverPosition,
   TextInput,
 } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config/KialiIcon';
 import { kialiStyle } from '../../styles/StyleUtils';
 

workspaces/kiali/plugins/kiali/src/components/Filters/StatefulFilters.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { history, HistoryManager } from '../../app/History';
 import {
   ActiveFilter,

workspaces/kiali/plugins/kiali/src/components/Health/HealthDetails.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Typography } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config';
 import * as H from '../../types/Health';
 import { PFColors } from '../Pf/PfColors';

workspaces/kiali/plugins/kiali/src/components/Health/HealthIndicator.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { PopoverPosition, Tooltip } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { createTooltipIcon } from '../../config/KialiIcon';
 import * as H from '../../types/Health';
 import { HealthDetails } from './HealthDetails';

workspaces/kiali/plugins/kiali/src/components/Health/Helper.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Icon } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { Status } from '../../types/Health';
 

workspaces/kiali/plugins/kiali/src/components/IstioConfigCard/IstioConfigCard.tsx

@@ -21,7 +21,7 @@ import {
   TableCellProps,
   Typography,
 } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { cardsHeight } from '../../styles/StyleUtils';
 import { IstioConfigItem } from '../../types/IstioConfigList';
 import {

workspaces/kiali/plugins/kiali/src/components/IstioStatus/IstioComponentStatus.tsx

@@ -21,7 +21,7 @@ import {
   MinusCircleIcon,
 } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
-import * as React from 'react';
+import { default as React } from 'react';
 import { ComponentStatus, Status } from '../../types/IstioStatus';
 import { PFColors } from '../Pf/PfColors';
 

workspaces/kiali/plugins/kiali/src/components/IstioStatus/IstioStatus.tsx

@@ -16,7 +16,7 @@
 import { Tooltip } from '@material-ui/core';
 import { ResourcesFullIcon } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/esm/createIcon';
-import * as React from 'react';
+import { default as React } from 'react';
 import { ComponentStatus, Status } from '../../types/IstioStatus';
 import { PFColors } from '../Pf/PfColors';
 import { IstioStatusList } from './IstioStatusList';

workspaces/kiali/plugins/kiali/src/components/IstioStatus/IstioStatusInline.tsx

@@ -19,7 +19,7 @@ import {
   ExclamationTriangleIcon,
   MinusCircleIcon,
 } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { ComponentStatus } from '../../types/IstioStatus';
 import { IstioStatus } from './IstioStatus';
 

workspaces/kiali/plugins/kiali/src/components/IstioStatus/IstioStatusList.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { List, Typography } from '@material-ui/core';
-import * as React from 'react';
 import { ComponentStatus, Status } from '../../types/IstioStatus';
 import { IstioComponentStatus } from './IstioComponentStatus';
 

workspaces/kiali/plugins/kiali/src/components/Label/Label.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Label as PfLabel } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { canRender } from '../../utils/SafeRender';
 

workspaces/kiali/plugins/kiali/src/components/Label/Labels.tsx

@@ -15,7 +15,7 @@
  */
 import { Tooltip } from '@material-ui/core';
 import Button from '@material-ui/core/Button';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config/KialiIcon';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { Label } from './Label';

workspaces/kiali/plugins/kiali/src/components/Link/IstioConfigListLink.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { Link } from 'react-router-dom';
 import { Paths } from '../../config';
 import { FilterSelected } from '../Filters/StatefulFilters';

workspaces/kiali/plugins/kiali/src/components/Link/IstioObjectLink.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip } from '@material-ui/core';
-import React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { GroupVersionKind } from '../../types/IstioObjects';

workspaces/kiali/plugins/kiali/src/components/Link/ServiceLink.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
 import { PFBadge, PFBadges } from '../../components/Pf/PfBadges';
 import { BackstageObjectLink } from '../../utils/backstageLinks';
 

workspaces/kiali/plugins/kiali/src/components/Link/ValidationSummaryLink.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { IstioConfigListLink } from './IstioConfigListLink';
 
 type Props = {

workspaces/kiali/plugins/kiali/src/components/Link/WorkloadLink.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
 import { BackstageObjectLink } from '../../utils/backstageLinks';
 import { PFBadge, PFBadges } from '../Pf/PfBadges';
 

workspaces/kiali/plugins/kiali/src/components/Logos/Logos.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { default as React } from 'react';
 import GraphqlIcon from '../../assets/img/api/graphql.svg';
 import GrpcIcon from '../../assets/img/api/grpc.svg';
 import RestIcon from '../../assets/img/api/rest.svg';

workspaces/kiali/plugins/kiali/src/components/MTls/MTLSIcon.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import fullIconDark from '../../assets/img/mtls-status-full-dark.svg';
 import fullIcon from '../../assets/img/mtls-status-full.svg';
 import hollowIconDark from '../../assets/img/mtls-status-partial-dark.svg';

workspaces/kiali/plugins/kiali/src/components/MTls/MTLSStatus.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { TooltipPosition } from '@patternfly/react-core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { MTLSIcon } from './MTLSIcon';
 
 type Props = {

workspaces/kiali/plugins/kiali/src/components/MTls/NamespaceMTLSStatus.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { MTLSStatuses } from '../../types/TLSStatus';
 import { MTLSIconTypes } from './MTLSIcon';

workspaces/kiali/plugins/kiali/src/components/MessageCenter/AlertDrawer.tsx

@@ -25,7 +25,7 @@ import {
 } from '@material-ui/core';
 import ExpandMoreRounded from '@material-ui/icons/ExpandMoreRounded';
 import { InfoIcon } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiAppAction } from '../../actions/KialiAppAction';
 import { MessageCenterState } from '../../store';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/components/MessageCenter/AlertDrawerGroup.tsx

@@ -15,7 +15,7 @@
  */
 import { Button, Card, CardActions, CardContent } from '@material-ui/core';
 import { InfoIcon } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { MessageCenterActions } from '../../actions';
 import { KialiAppState, KialiContext } from '../../store';
 import { NotificationGroup } from '../../types/MessageCenter';

workspaces/kiali/plugins/kiali/src/components/MessageCenter/AlertDrawerMessage.tsx

@@ -23,7 +23,7 @@ import {
 } from '@material-ui/core';
 import ExpandMoreRounded from '@material-ui/icons/ExpandMoreRounded';
 import moment from 'moment';
-import * as React from 'react';
+import { default as React } from 'react';
 import { MessageCenterActions } from '../../actions/MessageCenterActions';
 import { KialiIcon } from '../../config/KialiIcon';
 import { KialiAppState, KialiContext } from '../../store';

workspaces/kiali/plugins/kiali/src/components/MessageCenter/MessageCenter.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Badge, Button, Drawer } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config/KialiIcon';
 import { KialiAppState, KialiContext } from '../../store';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/components/Metrics/GrafanaLinks.tsx

@@ -15,7 +15,7 @@
  */
 import { ToolbarItem } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { ExternalLink } from '../../types/Dashboards';
 import { MetricsObjectTypes } from '../../types/Metrics';
 

workspaces/kiali/plugins/kiali/src/components/Metrics/IstioMetrics.tsx

@@ -15,7 +15,7 @@
  */
 import { useApi } from '@backstage/core-plugin-api';
 import { Checkbox, FormControlLabel, Toolbar } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { history, URLParam } from '../../app/History';
 import { Dashboard } from '../../components/Charts/Dashboard';
@@ -212,13 +212,17 @@ export const IstioMetrics = (props: Props) => {
   const refresh = (): void => {
     fetchMetrics();
     if (tracingIntegration) {
-      spanOverlay.fetch({
-        namespace: props.namespace,
-        cluster: props.cluster,
-        target: props.object,
-        targetKind: props.objectType,
-        range: timeRange,
-      });
+      spanOverlay.fetch(
+        {
+          namespace: props.namespace,
+          cluster: props.cluster,
+          target: props.object,
+          targetKind: props.objectType,
+          range: timeRange,
+        },
+        kialiClient,
+        kialiState,
+      );
     }
   };
 

workspaces/kiali/plugins/kiali/src/components/Metrics/SpanOverlay.ts

@@ -13,11 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { useApi } from '@backstage/core-plugin-api';
-import * as React from 'react';
 import { PFColors } from '../../components/Pf/PfColors';
-import { kialiApiRef } from '../../services/Api';
-import { KialiAppState, KialiContext } from '../../store';
+import { KialiApi } from '../../services/Api';
+import { KialiAppState } from '../../store';
 import {
   durationToBounds,
   guardTimeRange,
@@ -43,8 +41,6 @@ type FetchOptions = {
 export class SpanOverlay {
   private spans: Span[] = [];
   private lastFetchError = false;
-  private kialiClient = useApi(kialiApiRef);
-  private kialiState = React.useContext(KialiContext) as KialiAppState;
 
   constructor(public onChange: (overlay?: Overlay<JaegerLineInfo>) => void) {}
 
@@ -56,7 +52,7 @@ export class SpanOverlay {
     this.spans = spans;
   }
 
-  fetch(opts: FetchOptions) {
+  fetch(opts: FetchOptions, kialiClient: KialiApi, kialiState: KialiAppState) {
     const boundsMillis = guardTimeRange(opts.range, durationToBounds, b => b);
     const defaultFrom = new Date().getTime() - defaultMetricsDuration * 1000;
     const q: TracingQuery = {
@@ -78,10 +74,10 @@ export class SpanOverlay {
     const apiCall =
       // eslint-disable-next-line no-nested-ternary
       opts.targetKind === MetricsObjectTypes.APP
-        ? this.kialiClient.getAppSpans
+        ? kialiClient.getAppSpans
         : opts.targetKind === MetricsObjectTypes.SERVICE
-        ? this.kialiClient.getServiceSpans
-        : this.kialiClient.getWorkloadSpans;
+        ? kialiClient.getServiceSpans
+        : kialiClient.getWorkloadSpans;
     apiCall(opts.namespace, opts.target, q, opts.cluster)
       .then(res => {
         this.lastFetchError = false;
@@ -91,7 +87,7 @@ export class SpanOverlay {
       })
       .catch(err => {
         if (!this.lastFetchError) {
-          this.kialiState.alertUtils!.add(`Could not fetch spans., ${err}`);
+          kialiState.alertUtils!.add(`Could not fetch spans., ${err}`);
           this.lastFetchError = true;
         }
       });

workspaces/kiali/plugins/kiali/src/components/MetricsOptions/MetricsReporter.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { HistoryManager, URLParam } from '../../app/History';
 import { KialiIcon } from '../../config/KialiIcon';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/components/MetricsOptions/MetricsSettingsDropdown.tsx

@@ -28,7 +28,7 @@ import {
   MenuToggleElement,
 } from '@patternfly/react-core';
 import isEqual from 'lodash/isEqual';
-import * as React from 'react';
+import { default as React } from 'react';
 import { classes } from 'typestyle';
 import { history, URLParam } from '../../app/History';
 import { KialiIcon } from '../../config/KialiIcon';

workspaces/kiali/plugins/kiali/src/components/MissingAuthPolicy/MissingAuthPolicy.tsx

@@ -15,7 +15,7 @@
  */
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
-import * as React from 'react';
+import { default as React } from 'react';
 import { icons } from '../../config/Icons';
 import { KialiIcon } from '../../config/KialiIcon';
 import { isIstioNamespace } from '../../config/ServerConfig';

workspaces/kiali/plugins/kiali/src/components/MissingLabel/MissingLabel.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { icons } from '../../config/Icons';
 import { KialiIcon } from '../../config/KialiIcon';
 import { serverConfig } from '../../config/ServerConfig';

workspaces/kiali/plugins/kiali/src/components/MissingSidecar/MissingSidecar.tsx

@@ -15,7 +15,7 @@
  */
 import { Tooltip, TooltipPosition } from '@patternfly/react-core';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
-import * as React from 'react';
+import { default as React } from 'react';
 import { icons } from '../../config/Icons';
 import { KialiIcon } from '../../config/KialiIcon';
 import { isIstioNamespace, serverConfig } from '../../config/ServerConfig';

workspaces/kiali/plugins/kiali/src/components/Nav/Page/RenderComponentScroll.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { default as React } from 'react';
 import { classes } from 'typestyle';
 import { kialiStyle } from '../../../styles/StyleUtils';
 

workspaces/kiali/plugins/kiali/src/components/NoData.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { EmptyState } from '@backstage/core-components';
-import React from 'react';
 
 const containerStyle = { width: '100%', height: '100%' };
 

workspaces/kiali/plugins/kiali/src/components/Overview/TLSInfo.tsx

@@ -15,63 +15,20 @@
  */
 import { Chip, Tooltip } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon } from '../../config/KialiIcon';
 import { infoStyle } from '../../pages/Overview/OverviewCard/OverviewCardControlPlaneNamespace';
 import { getChipStyle, kialiStyle } from '../../styles/StyleUtils';
-import { CertsInfo } from '../../types/CertsInfo';
 
 type Props = {
-  certificatesInformationIndicators: boolean;
   version?: string;
-  certsInfo: CertsInfo[];
 };
 
 const lockIconStyle = kialiStyle({ marginLeft: '5px' });
 
-function showCerts(certs: CertsInfo[]) {
-  if (certs) {
-    const rows = certs.map(item => (
-      <div key="showCerts">
-        <div
-          style={{
-            display: 'inline-block',
-            width: '125px',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          From {item.issuer}
-        </div>
-        <div>
-          <div>Issuer: </div>
-          <div>{item.secretName}</div>
-        </div>
-        <div>
-          <div>Valid From: </div>
-          <div>{item.notAfter}</div>
-        </div>
-        <div>
-          <div>Valid To: </div>
-          <div>{item.notBefore}</div>
-        </div>
-      </div>
-    ));
-    return <div>{rows}</div>;
-  }
-  return 'No cert info';
-}
-
-function LockIcon(props: Props) {
-  return props.certificatesInformationIndicators === true ? (
-    <Tooltip placement="top" title={showCerts(props.certsInfo)}>
-      <span data-test="lockerCA">
-        <KialiIcon.MtlsLock className={lockIconStyle} />
-      </span>
-    </Tooltip>
-  ) : (
-    <KialiIcon.MtlsLock className={lockIconStyle} />
-  );
-}
+const LockIcon = (): React.ReactElement => {
+  return <KialiIcon.MtlsLock className={lockIconStyle} />;
+};
 
 export const TLSInfo = (props: Props) => {
   const theme = useTheme();
@@ -96,13 +53,7 @@ export const TLSInfo = (props: Props) => {
           data-test="label-TLS"
           label={
             <div style={{ display: '-webkit-box' }}>
-              {props.version}{' '}
-              <LockIcon
-                certificatesInformationIndicators={
-                  props.certificatesInformationIndicators
-                }
-                certsInfo={props.certsInfo}
-              />
+              {props.version} <LockIcon />
               <Tooltip
                 placement="right"
                 title={

workspaces/kiali/plugins/kiali/src/components/Pf/PfTitle.tsx

@@ -19,7 +19,7 @@ import {
   BundleIcon,
   ServiceIcon,
 } from '@patternfly/react-icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { MissingSidecar } from '../MissingSidecar/MissingSidecar';
 

workspaces/kiali/plugins/kiali/src/components/Router.tsx

@@ -16,7 +16,6 @@
 import { Entity } from '@backstage/catalog-model';
 import { Content, Page } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { AppDetailsPage } from '../pages/AppDetails/AppDetailsPage';
 import { AppListPage } from '../pages/AppList/AppListPage';

workspaces/kiali/plugins/kiali/src/components/SimpleTable.tsx

@@ -22,7 +22,7 @@ import {
   TableHead,
   TableRow,
 } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../styles/StyleUtils';
 
 export interface SortableTh extends TableCellProps {

workspaces/kiali/plugins/kiali/src/components/Tab/TabPanel.tsx

@@ -15,7 +15,6 @@
  */
 import { Box, makeStyles, Typography } from '@material-ui/core';
 import PropTypes from 'prop-types';
-import * as React from 'react';
 
 export const useStyles = makeStyles(theme => ({
   root: {

workspaces/kiali/plugins/kiali/src/components/TextOrLink.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 
 type TextOrLinkProps = {
   text: string;

workspaces/kiali/plugins/kiali/src/components/Time/LocalTime.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { toString } from './Utils';
 
 interface TimeProps {

workspaces/kiali/plugins/kiali/src/components/Time/TimeDurationComponent.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Select } from '@backstage/core-components';
-import * as React from 'react';
+import { default as React } from 'react';
 import { HistoryManager, URLParam } from '../../app/History';
 import { getDurationType } from '../../pages/Overview/OverviewToolbar';
 

workspaces/kiali/plugins/kiali/src/components/ToolbarDropdown/ToolbarDropdown.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { MenuItem, Select, Tooltip } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 
 const dropdownTitle = kialiStyle({

workspaces/kiali/plugins/kiali/src/components/Validations/ValidationList.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Tooltip } from '@material-ui/core';
-import React from 'react';
+import { default as React } from 'react';
 import { ObjectCheck, ValidationTypes } from '../../types/IstioObjects';
 import { highestSeverity } from '../../types/ServiceInfo';
 import { Validation } from './Validation';

workspaces/kiali/plugins/kiali/src/components/Validations/ValidationObjectSummary.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import {
   ObjectValidation,
   StatusCondition,

workspaces/kiali/plugins/kiali/src/components/Validations/ValidationServiceSummary.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { ObjectValidation, ValidationTypes } from '../../types/IstioObjects';
 import { ValidationSummary } from './ValidationSummary';
 

workspaces/kiali/plugins/kiali/src/components/Validations/ValidationStack.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { ObjectCheck, ValidationTypes } from '../../types/IstioObjects';
 import { highestSeverity } from '../../types/ServiceInfo';

workspaces/kiali/plugins/kiali/src/components/Validations/ValidationSummary.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { Tooltip, Typography } from '@material-ui/core';
-import * as React from 'react';
 import { CSSProperties } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { StatusCondition, ValidationTypes } from '../../types/IstioObjects';

workspaces/kiali/plugins/kiali/src/components/VirtualList/Config.tsx

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
+import { default as React } from 'react';
 import { StatefulFilters } from '../../components/Filters/StatefulFilters';
 import { serverConfig } from '../../config';
 import { isGateway, isWaypoint } from '../../helpers/LabelFilterHelper';

workspaces/kiali/plugins/kiali/src/components/VirtualList/Renderers.tsx

@@ -24,7 +24,7 @@ import {
 } from '@material-ui/core';
 // eslint-disable-next-line no-restricted-imports
 import { Close } from '@material-ui/icons';
-import * as React from 'react';
+import { default as React } from 'react';
 import { KialiIcon, serverConfig } from '../../config';
 import { isWaypoint } from '../../helpers/LabelFilterHelper';
 import { infoStyle } from '../../pages/Overview/OverviewCard/CanaryUpgradeProgress';

workspaces/kiali/plugins/kiali/src/components/VirtualList/VirtualItem.tsx

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 import { TableRow } from '@material-ui/core';
-import * as React from 'react';
-import { CSSProperties } from 'react';
+import { CSSProperties, default as React } from 'react';
 import { useLinkStyle } from '../../styles/StyleUtils';
 import { hasHealth, Health } from '../../types/Health';
 import { IstioConfigItem } from '../../types/IstioConfigList';

workspaces/kiali/plugins/kiali/src/components/VirtualList/VirtualList.tsx

@@ -26,7 +26,7 @@ import {
   TableRow,
   TableSortLabel,
 } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { kialiStyle } from '../../styles/StyleUtils';
 import { Namespace } from '../../types/Namespace';
 import { NamespaceInfo } from '../../types/NamespaceInfo';

workspaces/kiali/plugins/kiali/src/config/Config.ts

@@ -146,7 +146,6 @@ const conf = {
         `api/namespaces/${namespace}/apps/${app}/dashboard`,
       appSpans: (namespace: string, app: string) =>
         `api/namespaces/${namespace}/apps/${app}/spans`,
-      canaryUpgradeStatus: () => 'api/mesh/canaries/status',
       clusters: 'api/clusters',
       clustersHealth: () => `api/clusters/health`,
       clustersWorkloads: () => `api/clusters/workloads`,
@@ -200,10 +199,8 @@ const conf = {
         `api/namespaces/${namespace}/validations`,
       configValidations: () => `api/istio/validations`,
       meshTls: () => 'api/mesh/tls',
-      outboundTrafficPolicyMode: () => 'api/mesh/outbound_traffic_policy/mode',
       istioStatus: () => 'api/istio/status',
       istioCertsInfo: () => 'api/istio/certs',
-      istiodResourceThresholds: () => 'api/mesh/resources/thresholds',
       pod: (namespace: string, pod: string) =>
         `api/namespaces/${namespace}/pods/${pod}`,
       podLogs: (namespace: string, pod: string) =>

workspaces/kiali/plugins/kiali/src/config/Icons.ts

@@ -27,7 +27,7 @@ import PlayCircleOutlineIcon from '@material-ui/icons/PlayCircleOutline';
 import ScheduleIcon from '@material-ui/icons/Schedule';
 import SecurityIcon from '@material-ui/icons/Security';
 import ShareIcon from '@material-ui/icons/Share';
-import React from 'react';
+import { default as React } from 'react';
 import hollowPinIcon from '../assets/img/hollow-pin.png';
 import solidPinIcon from '../assets/img/solid-pin.png';
 

workspaces/kiali/plugins/kiali/src/config/KialiIcon.tsx

@@ -72,7 +72,7 @@ import {
   WarningTriangleIcon,
 } from '@patternfly/react-icons';
 import { SVGIconProps } from '@patternfly/react-icons/dist/js/createIcon';
-import * as React from 'react';
+import { default as React } from 'react';
 import { classes } from 'typestyle';
 import { PFColors } from '../components/Pf/PfColors';
 import { kialiStyle } from '../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/config/KialiLogo.tsx

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import * as React from 'react';
 
 export const KialiLogo = () => {
   return (

workspaces/kiali/plugins/kiali/src/dynamic/EntityKialiGraphCard.tsx

@@ -16,7 +16,6 @@
 import { CodeSnippet, EmptyState } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Box } from '@material-ui/core';
-import * as React from 'react';
 import { TrafficGraphCard } from '../pages/TrafficGraph/TrafficGraphCard';
 import { KialiProvider } from '../store/KialiProvider';
 

workspaces/kiali/plugins/kiali/src/dynamic/EntityKialiResourcesCard.tsx

@@ -21,8 +21,7 @@ import {
 } from '@backstage/core-components';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Box } from '@material-ui/core';
-import * as React from 'react';
-import { useRef } from 'react';
+import { default as React, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AppListPage } from '../pages/AppList/AppListPage';
 import { ServiceListPage } from '../pages/ServiceList/ServiceListPage';

workspaces/kiali/plugins/kiali/src/dynamic/KialiContext.tsx

@@ -15,7 +15,7 @@
  */
 import { useApi } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import React, { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 import useDebounce from 'react-use/lib/useDebounce';
 import { KIALI_NAMESPACE, KIALI_PROVIDER } from '../components/Router';

workspaces/kiali/plugins/kiali/src/pages/AppDetails/AppDescription.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import { Card, CardContent, CardHeader, Typography } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { DetailDescription } from '../../components/DetailDescription/DetailDescription';
 import { HealthIndicator } from '../../components/Health/HealthIndicator';
 import { Labels } from '../../components/Label/Labels';

workspaces/kiali/plugins/kiali/src/pages/AppDetails/AppDetailsPage.tsx

@@ -17,7 +17,7 @@ import { Content, EmptyState } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress, Tab, Tabs } from '@material-ui/core';
 import { AxiosError } from 'axios';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { HistoryManager } from '../../app/History';

workspaces/kiali/plugins/kiali/src/pages/AppDetails/AppInfo.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { Grid } from '@material-ui/core';
-import React from 'react';
 import { App } from '../../types/App';
 import { DurationInSeconds } from '../../types/Common';
 import { AppHealth } from '../../types/Health';

workspaces/kiali/plugins/kiali/src/pages/AppList/AppListPage.tsx

@@ -16,8 +16,7 @@
 import { Entity } from '@backstage/catalog-model';
 import { Content, InfoCard } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
-import * as React from 'react';
-import { useRef } from 'react';
+import { default as React, useRef } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import * as FilterHelper from '../../components/FilterList/FilterHelper';

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioConfigDetailsOverview.tsx

@@ -21,7 +21,7 @@ import {
   Tooltip,
   Typography,
 } from '@material-ui/core';
-import React from 'react';
+import { default as React } from 'react';
 import { HistoryManager } from '../../app/History';
 import { Labels } from '../../components/Label/Labels';
 import { PFBadge } from '../../components/Pf/PfBadges';

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioConfigDetailsPage.tsx

@@ -17,7 +17,7 @@ import { Content } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { Grid } from '@material-ui/core';
 import jsYaml from 'js-yaml';
-import * as React from 'react';
+import { default as React } from 'react';
 import AceEditor from 'react-ace';
 import { useLocation } from 'react-router-dom';
 import {

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioConfigReferences.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { List, ListItem, Typography } from '@material-ui/core';
-import React from 'react';
 import { ReferenceIstioObjectLink } from '../../components/Link/IstioObjectLink';
 import { ServiceLink } from '../../components/Link/ServiceLink';
 import { WorkloadLink } from '../../components/Link/WorkloadLink';

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioConfigValidationReferences.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { List, ListItem, Typography } from '@material-ui/core';
-import React from 'react';
 import { ReferenceIstioObjectLink } from '../../components/Link/IstioObjectLink';
 import { ObjectReference } from '../../types/IstioObjects';
 

workspaces/kiali/plugins/kiali/src/pages/IstioConfigDetails/IstioStatusMessageList.tsx

@@ -14,7 +14,6 @@
  * limitations under the License.
  */
 import { List, ListItem, Tooltip, Typography } from '@material-ui/core';
-import React from 'react';
 import { Validation } from '../../components/Validations/Validation';
 import { KialiIcon } from '../../config/KialiIcon';
 import { kialiStyle } from '../../styles/StyleUtils';

workspaces/kiali/plugins/kiali/src/pages/IstioConfigList/IstioConfigListPage.tsx

@@ -16,7 +16,7 @@
 import { Content, InfoCard } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 import { CircularProgress } from '@material-ui/core';
-import * as React from 'react';
+import { default as React } from 'react';
 import { useAsyncFn, useDebounce } from 'react-use';
 import { DefaultSecondaryMasthead } from '../../components/DefaultSecondaryMasthead/DefaultSecondaryMasthead';
 import { KIALI_PROVIDER } from '../../components/Router';