Update React dependencies

kubenav · Apr 6, 2021 · 4a87e2b · 4a87e2b
1 parent f8fbb83
commit 4a87e2b
Show file tree

Hide file tree

Showing 25 changed files with 2,108 additions and 2,018 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -19,7 +19,6 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier",
-    "prettier/@typescript-eslint",
     "plugin:prettier/recommended"
   ],
   "rules": {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,47 +35,47 @@
     ]
   },
   "dependencies": {
-    "@capacitor/android": "^2.4.6",
-    "@capacitor/core": "^2.4.6",
-    "@capacitor/ios": "^2.4.6",
-    "@ionic-native/core": "^5.31.1",
-    "@ionic-native/fingerprint-aio": "^5.31.1",
-    "@ionic/react": "^5.5.2",
+    "@capacitor/android": "^2.4.7",
+    "@capacitor/core": "^2.4.7",
+    "@capacitor/ios": "^2.4.7",
+    "@ionic-native/core": "^5.32.0",
+    "@ionic-native/fingerprint-aio": "^5.32.0",
+    "@ionic/react": "^5.6.3",
     "@ionic/react-hooks": "0.0.8",
-    "@ionic/react-router": "^5.5.2",
-    "@kubernetes/client-node": "^0.12.2",
-    "@types/jest": "^26.0.20",
-    "@types/node": "^14.14.22",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
-    "@types/react-router": "^5.1.11",
+    "@ionic/react-router": "^5.6.3",
+    "@kubernetes/client-node": "^0.14.1",
+    "@types/jest": "^26.0.22",
+    "@types/node": "^14.14.37",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
+    "@types/react-router": "^5.1.13",
     "@types/react-router-dom": "^5.1.7",
     "@types/sockjs-client": "^1.5.0",
     "cordova-plugin-fingerprint-aio": "^4.0.2",
     "fast-json-patch": "^3.0.0-1",
-    "ionicons": "^5.3.0",
+    "ionicons": "^5.5.1",
     "js-yaml": "^4.0.0",
     "pako": "^2.0.3",
-    "react": "^16.14.0",
-    "react-ace": "^9.2.1",
-    "react-dom": "^16.14.0",
-    "react-query": "^2.26.4",
+    "react": "^17.0.2",
+    "react-ace": "^9.4.0",
+    "react-dom": "^17.0.2",
+    "react-query": "^3.13.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^4.0.1",
-    "recharts": "^1.8.5",
-    "sockjs-client": "^1.5.0",
-    "typescript": "^4.1.3",
-    "xterm": "^4.9.0",
-    "xterm-addon-fit": "^0.4.0",
-    "xterm-addon-search": "^0.7.0"
+    "react-scripts": "^4.0.3",
+    "recharts": "^2.0.9",
+    "sockjs-client": "^1.5.1",
+    "typescript": "^4.2.3",
+    "xterm": "^4.11.0",
+    "xterm-addon-fit": "^0.5.0",
+    "xterm-addon-search": "^0.8.0"
   },
   "devDependencies": {
-    "@capacitor/cli": "^2.4.6",
-    "@typescript-eslint/eslint-plugin": "^4.14.0",
-    "@typescript-eslint/parser": "^4.14.0",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
+    "@capacitor/cli": "^2.4.7",
+    "@typescript-eslint/eslint-plugin": "^4.21.0",
+    "@typescript-eslint/parser": "^4.21.0",
+    "eslint": "^7.23.0",
+    "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.2.1"

diff --git a/src/App.tsx b/src/App.tsx
@@ -2,6 +2,7 @@ import { IonApp, IonRouterOutlet, IonSplitPane, isPlatform } from '@ionic/react'
 import { IonReactRouter } from '@ionic/react-router';
 import React from 'react';
 import { Route } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
 import '@ionic/react/css/normalize.css';
 
@@ -49,50 +50,58 @@ import { TerminalContextProvider } from './utils/terminal';
 import './theme/custom.css';
 import './theme/variables.css';
 
+const queryClient = new QueryClient();
+
 const App: React.FunctionComponent = () => (
   <IonApp>
-    <AppContextProvider>
-      <TerminalContextProvider>
-        <PortForwardingContextProvider>
-          <IonReactRouter>
-            <IonSplitPane contentId="main" className={isPlatform('hybrid') ? '' : 'menu-width'}>
-              <Menu sections={resources} />
-              <IonRouterOutlet id="main">
-                <Route path="/" component={OverviewPage} exact={true} />
-                <Route path="/bookmarks" component={BookmarksPage} exact={true} />
-                <Route path="/resources/:section/:type" component={ListPage} exact={true} />
-                <Route path="/resources/:section/:type/:namespace/:name" component={DetailsPage} exact={true} />
-                <Route path="/customresources/:group/:version/:name" component={CustomResourcesListPage} exact={true} />
-                <Route
-                  path="/customresources/:group/:version/:name/:crnamespace/:crname"
-                  component={CustomResourcesDetailsPage}
-                  exact={true}
-                />
-                <Route path="/plugins/elasticsearch" component={ElasticsearchQueryPage} exact={true} />
-                <Route path="/plugins/helm" component={HelmReleasesPage} exact={true} />
-                <Route path="/plugins/helm/:namespace/:name" component={HelmReleasePage} exact={true} />
-                <Route path="/plugins/jaeger" component={JaegerTracesPage} exact={true} />
-                <Route path="/plugins/jaeger/trace/:trace" component={JaegerTracePage} exact={true} />
-                <Route path="/plugins/prometheus" component={PrometheusDashboardsPage} exact={true} />
-                <Route path="/plugins/prometheus/:namespace/:name" component={PrometheusDashboardPage} exact={true} />
-                <Route path="/settings/clusters" component={ClustersPage} exact={true} />
-                <Route path="/settings/clusters/aws" component={ClustersAWSPage} exact={true} />
-                <Route path="/settings/clusters/awssso" component={ClustersAWSSSOPage} exact={true} />
-                <Route path="/settings/clusters/azure" component={ClustersAzurePage} exact={true} />
-                <Route path="/settings/clusters/digitalocean" component={ClustersDigitalOceanPage} exact={true} />
-                <Route path="/settings/clusters/google" component={ClustersGooglePage} exact={true} />
-                <Route path="/settings/clusters/kubeconfig" component={ClustersKubeconfigPage} exact={true} />
-                <Route path="/settings/clusters/manual" component={ClustersManualPage} exact={true} />
-                <Route path="/settings/clusters/oidc" component={ClustersOIDCPage} exact={true} />
-                <Route path="/settings/clusters/oidc/redirect" component={ClustersOIDCRedirectPage} exact={true} />
-                <Route path="/settings/general" component={GeneralPage} exact={true} />
-                <Route path="/settings/info" component={InfoPage} exact={true} />
-              </IonRouterOutlet>
-            </IonSplitPane>
-          </IonReactRouter>
-        </PortForwardingContextProvider>
-      </TerminalContextProvider>
-    </AppContextProvider>
+    <QueryClientProvider client={queryClient}>
+      <AppContextProvider>
+        <TerminalContextProvider>
+          <PortForwardingContextProvider>
+            <IonReactRouter>
+              <IonSplitPane contentId="main" className={isPlatform('hybrid') ? '' : 'menu-width'}>
+                <Menu sections={resources} />
+                <IonRouterOutlet id="main">
+                  <Route path="/" component={OverviewPage} exact={true} />
+                  <Route path="/bookmarks" component={BookmarksPage} exact={true} />
+                  <Route path="/resources/:section/:type" component={ListPage} exact={true} />
+                  <Route path="/resources/:section/:type/:namespace/:name" component={DetailsPage} exact={true} />
+                  <Route
+                    path="/customresources/:group/:version/:name"
+                    component={CustomResourcesListPage}
+                    exact={true}
+                  />
+                  <Route
+                    path="/customresources/:group/:version/:name/:crnamespace/:crname"
+                    component={CustomResourcesDetailsPage}
+                    exact={true}
+                  />
+                  <Route path="/plugins/elasticsearch" component={ElasticsearchQueryPage} exact={true} />
+                  <Route path="/plugins/helm" component={HelmReleasesPage} exact={true} />
+                  <Route path="/plugins/helm/:namespace/:name" component={HelmReleasePage} exact={true} />
+                  <Route path="/plugins/jaeger" component={JaegerTracesPage} exact={true} />
+                  <Route path="/plugins/jaeger/trace/:trace" component={JaegerTracePage} exact={true} />
+                  <Route path="/plugins/prometheus" component={PrometheusDashboardsPage} exact={true} />
+                  <Route path="/plugins/prometheus/:namespace/:name" component={PrometheusDashboardPage} exact={true} />
+                  <Route path="/settings/clusters" component={ClustersPage} exact={true} />
+                  <Route path="/settings/clusters/aws" component={ClustersAWSPage} exact={true} />
+                  <Route path="/settings/clusters/awssso" component={ClustersAWSSSOPage} exact={true} />
+                  <Route path="/settings/clusters/azure" component={ClustersAzurePage} exact={true} />
+                  <Route path="/settings/clusters/digitalocean" component={ClustersDigitalOceanPage} exact={true} />
+                  <Route path="/settings/clusters/google" component={ClustersGooglePage} exact={true} />
+                  <Route path="/settings/clusters/kubeconfig" component={ClustersKubeconfigPage} exact={true} />
+                  <Route path="/settings/clusters/manual" component={ClustersManualPage} exact={true} />
+                  <Route path="/settings/clusters/oidc" component={ClustersOIDCPage} exact={true} />
+                  <Route path="/settings/clusters/oidc/redirect" component={ClustersOIDCRedirectPage} exact={true} />
+                  <Route path="/settings/general" component={GeneralPage} exact={true} />
+                  <Route path="/settings/info" component={InfoPage} exact={true} />
+                </IonRouterOutlet>
+              </IonSplitPane>
+            </IonReactRouter>
+          </PortForwardingContextProvider>
+        </TerminalContextProvider>
+      </AppContextProvider>
+    </QueryClientProvider>
   </IonApp>
 );
 

diff --git a/src/components/overview/OverviewPage.tsx b/src/components/overview/OverviewPage.tsx
@@ -74,7 +74,7 @@ const OverviewPage: React.FunctionComponent = () => {
               <LoadingErrorCard
                 cluster={context.cluster}
                 clusters={context.clusters}
-                error={error}
+                error={error as Error}
                 icon="/assets/icons/kubernetes/kubernetes.png"
                 text="Could not get connect to Cluster"
               />

diff --git a/src/components/overview/Warnings.tsx b/src/components/overview/Warnings.tsx
@@ -11,7 +11,7 @@ import {
   IonRow,
   isPlatform,
 } from '@ionic/react';
-import { V1EventList } from '@kubernetes/client-node';
+import { CoreV1EventList } from '@kubernetes/client-node';
 import React, { useContext } from 'react';
 import { useQuery } from 'react-query';
 
@@ -40,7 +40,7 @@ const Warnings: React.FunctionComponent = () => {
     ['OverviewWarnings', cluster],
     async () => {
       try {
-        const eventList: V1EventList = await kubernetesRequest(
+        const eventList: CoreV1EventList = await kubernetesRequest(
           'GET',
           `/api/v1/events?limit=${context.settings.queryLimit}&fieldSelector=type=Warning`,
           '',

diff --git a/src/components/plugins/helm/ReleasePage.tsx b/src/components/plugins/helm/ReleasePage.tsx
@@ -155,7 +155,7 @@ const ReleasePage: React.FunctionComponent<IReleasePageProps> = ({ match }: IRel
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon="/assets/icons/kubernetes/helm.png"
             text="Could not get Helm Release"
           />

diff --git a/src/components/plugins/helm/ReleasesPage.tsx b/src/components/plugins/helm/ReleasesPage.tsx
@@ -203,7 +203,7 @@ const ReleasesPage: React.FunctionComponent = () => {
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon="/assets/icons/kubernetes/helm.png"
             text="Could not get Helm Releases"
           />

diff --git a/src/components/plugins/jaeger/TracePage.tsx b/src/components/plugins/jaeger/TracePage.tsx
@@ -117,7 +117,7 @@ const TracePage: React.FunctionComponent<ITracePageProps> = ({ match }: ITracePa
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon="/assets/icons/kubernetes/jaeger.png"
             text="Could not get Trace"
           />

diff --git a/src/components/plugins/prometheus/ChartDetailsArea.tsx b/src/components/plugins/prometheus/ChartDetailsArea.tsx
@@ -100,7 +100,7 @@ const ChartDetailsArea: React.FunctionComponent<IChartDetailsAreaProps> = ({
     <IonRow style={{ height: '300px', width: '100%' }}>
       <IonCol style={{ padding: '0px' }}>
         <ResponsiveContainer>
-          <AreaChart>
+          <AreaChart data={series[0].data}>
             <XAxis
               dataKey="time"
               scale="time"
@@ -135,6 +135,9 @@ const ChartDetailsArea: React.FunctionComponent<IChartDetailsAreaProps> = ({
                   <Area
                     key={index}
                     dataKey="value"
+                    // NOTE: https://github.com/recharts/recharts/issues/2487
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
                     data={serie.data}
                     name={serie.name}
                     stroke={getColor(index, isDarkMode(context.settings.theme))}
@@ -148,6 +151,9 @@ const ChartDetailsArea: React.FunctionComponent<IChartDetailsAreaProps> = ({
                     <Area
                       key={index}
                       dataKey="value"
+                      // NOTE: https://github.com/recharts/recharts/issues/2487
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
                       data={serie.data}
                       name={serie.name}
                       stroke={getColor(

diff --git a/src/components/plugins/prometheus/ChartDetailsSinglestat.tsx b/src/components/plugins/prometheus/ChartDetailsSinglestat.tsx
@@ -72,6 +72,9 @@ const ChartDetailsSinglestat: React.FunctionComponent<IChartDetailsSinglestatPro
               <Area
                 key={index}
                 dataKey="value"
+                // NOTE: https://github.com/recharts/recharts/issues/2487
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
                 data={serie.data}
                 name={serie.name}
                 stroke="#326ce5"

diff --git a/src/components/plugins/prometheus/DashboardPage.tsx b/src/components/plugins/prometheus/DashboardPage.tsx
@@ -99,7 +99,7 @@ const DashboardPage: React.FunctionComponent<IDashboardPageProps> = ({ match, lo
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon="/assets/icons/kubernetes/prometheus.png"
             text="Could not get Prometheus Dashboard"
           />

diff --git a/src/components/plugins/prometheus/DashboardsPage.tsx b/src/components/plugins/prometheus/DashboardsPage.tsx
@@ -33,27 +33,38 @@ const DashboardsPage: React.FunctionComponent = () => {
 
   const [searchText, setSearchText] = useState<string>('');
 
-  const fetchItems = async (key, cursor) =>
+  const fetchItems = async (cursor) =>
     await kubernetesRequest(
       'GET',
       `${
         context.settings.prometheusDashboardsNamespace
           ? `/api/v1/namespaces/${context.settings.prometheusDashboardsNamespace}/configmaps`
           : `/api/v1/configmaps`
-      }?labelSelector=kubenav.io/prometheus-dashboard=true&limit=50${cursor ? `&continue=${cursor}` : ''}`,
+      }?labelSelector=kubenav.io/prometheus-dashboard=true&limit=50${
+        cursor.pageParam ? `&continue=${cursor.pageParam}` : ''
+      }`,
       '',
       context.settings,
       await context.kubernetesAuthWrapper(''),
     );
 
-  const { isError, isFetching, isFetchingMore, canFetchMore, data, error, fetchMore, refetch } = useInfiniteQuery(
+  const {
+    isError,
+    isFetching,
+    isFetchingNextPage,
+    hasNextPage,
+    data,
+    error,
+    fetchNextPage,
+    refetch,
+  } = useInfiniteQuery(
     `PrometheusDashboardsPage_${cluster ? cluster.id : ''}_${cluster ? cluster.namespace : ''}`,
     fetchItems,
     {
       ...context.settings.queryConfig,
       refetchInterval: context.settings.queryRefetchInterval,
-      getFetchMore: (lastGroup) =>
-        lastGroup.metadata && lastGroup.metadata.continue ? lastGroup.metadata.continue : '',
+      getNextPageParam: (lastGroup) =>
+        lastGroup.metadata && lastGroup.metadata.continue ? lastGroup.metadata.continue : false,
     },
   );
 
@@ -63,7 +74,7 @@ const DashboardsPage: React.FunctionComponent = () => {
   };
 
   const loadMore = async (event: CustomEvent<void>) => {
-    await fetchMore();
+    await fetchNextPage();
     (event.target as HTMLIonInfiniteScrollElement).complete();
   };
 
@@ -91,9 +102,9 @@ const DashboardsPage: React.FunctionComponent = () => {
               value={searchText}
               onIonChange={(e) => setSearchText(e.detail.value ? e.detail.value : '')}
             />
-            {data && data.length > 0 && data[0].items.length > 0 ? (
+            {data && data.pages && data.pages.length > 0 && data[0].items.length > 0 ? (
               <IonList>
-                {data.map((group, i) => (
+                {data.pages.map((group, i) => (
                   <React.Fragment key={i}>
                     {group && group.items
                       ? group.items
@@ -122,11 +133,11 @@ const DashboardsPage: React.FunctionComponent = () => {
                 ))}
                 <IonInfiniteScroll
                   threshold="25%"
-                  disabled={!canFetchMore || (isFetchingMore as boolean)}
+                  disabled={!hasNextPage || (isFetchingNextPage as boolean)}
                   onIonInfinite={loadMore}
                 >
-                  {(!isFetchingMore as boolean) ? (
-                    <IonButton size="small" expand="block" fill="clear" onClick={() => fetchMore()}>
+                  {(!isFetchingNextPage as boolean) ? (
+                    <IonButton size="small" expand="block" fill="clear" onClick={() => fetchNextPage()}>
                       Load more
                     </IonButton>
                   ) : null}
@@ -141,7 +152,7 @@ const DashboardsPage: React.FunctionComponent = () => {
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon="/assets/icons/kubernetes/prometheus.png"
             text="Could not get Prometheus Dashboards"
           />

diff --git a/src/components/resources/DetailsPage.tsx b/src/components/resources/DetailsPage.tsx
@@ -102,7 +102,7 @@ const DetailsPage: React.FunctionComponent<IDetailsPageProps> = ({ match }: IDet
           <LoadingErrorCard
             cluster={context.cluster}
             clusters={context.clusters}
-            error={error}
+            error={error as Error}
             icon={page.icon}
             text={`Could not get ${page.singleText}`}
           />