Remove old js components: moving some logic to typescript (#6550)

### Description of the change This PR is following up #6539. In this one, the focus is on: - Transforming `Row` and `Column` to tsx components. - Update some imports - Transform the `useOutsideClick` hook to typescript. - I saw there is a [library with useful hooks](https://usehooks.com/useclickaway), but since we just have this one, adding yet another dep maybe is not worth it. - Remove an unnecessary `isSomeResourceLoading` helper and its folder structure After those changes, I decided to stop and continue in another PR (the upcoming changes are more extensive than these ones). ### Benefits I don't have any cool before/after shots in this PR :P, but I do have a minor improvement in the `useOutsideClick`: now it also responds to touch events: https://github.com/vmware-tanzu/kubeapps/assets/11535726/b13d2e68-9fbc-4ab1-87ad-9593a17d2370 ### Possible drawbacks N/A (hope any!) ### Applicable issues Related to #6563 ### Additional information N/A --------- Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
vmware-tanzu · Aug 4, 2023 · 461d4bc · 461d4bc
1 parent 6cffd05
commit 461d4bc
Show file tree

Hide file tree

Showing 79 changed files with 543 additions and 612 deletions.
diff --git a/dashboard/src/actions/index.ts b/dashboard/src/actions/index.ts
@@ -1,4 +1,4 @@
-// Copyright 2018-2022 the Kubeapps contributors.
+// Copyright 2018-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
 import * as installedpackages from "./installedpackages";

diff --git a/dashboard/src/components/AppList/AppList.tsx b/dashboard/src/components/AppList/AppList.tsx
@@ -1,4 +1,4 @@
-// Copyright 2018-2022 the Kubeapps contributors.
+// Copyright 2018-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
 import { CdsButton } from "@cds/react/button";

diff --git a/dashboard/src/components/AppList/AppListGrid.tsx b/dashboard/src/components/AppList/AppListGrid.tsx
@@ -1,12 +1,12 @@
 // Copyright 2020-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
-import Row from "components/js/Row";
+import Row from "components/Row";
 import { InstalledPackageSummary } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { Link } from "react-router-dom";
-import { IClusterServiceVersion, IResource } from "../../shared/types";
-import * as url from "../../shared/url";
-import { escapeRegExp } from "../../shared/utils";
+import { IClusterServiceVersion, IResource } from "shared/types";
+import * as url from "shared/url";
+import { escapeRegExp } from "shared/utils";
 import Alert from "../js/Alert";
 import "./AppList.css";
 import AppListItem from "./AppListItem";

diff --git a/dashboard/src/components/AppList/AppListItem.tsx b/dashboard/src/components/AppList/AppListItem.tsx
@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CdsIcon } from "@cds/react/icon";
+import InfoCard from "components/InfoCard";
 import { InstalledPackageSummary } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import placeholder from "icons/placeholder.svg";
 import { Tooltip } from "react-tooltip";
+import * as url from "shared/url";
 import { getAppStatusLabel, getPluginIcon, getPluginName } from "shared/utils";
-import * as url from "../../shared/url";
-import InfoCard from "../InfoCard/InfoCard";
 import "./AppListItem.css";
 
 export interface IAppListItemProps {

diff --git a/dashboard/src/components/AppUpgrade/AppUpgrade.test.tsx b/dashboard/src/components/AppUpgrade/AppUpgrade.test.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import actions from "actions";
-import Alert from "components/js/Alert";
 import LoadingWrapper from "components/LoadingWrapper";
+import Alert from "components/js/Alert";
 import {
   AvailablePackageDetail,
   AvailablePackageReference,

diff --git a/dashboard/src/components/AppUpgrade/AppUpgrade.tsx b/dashboard/src/components/AppUpgrade/AppUpgrade.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import actions from "actions";
+import LoadingWrapper from "components/LoadingWrapper";
 import Alert from "components/js/Alert";
 import { InstalledPackageReference } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { Plugin } from "gen/kubeappsapis/core/plugins/v1alpha1/plugins_pb";
@@ -11,7 +12,6 @@ import * as ReactRouter from "react-router-dom";
 import { Action } from "redux";
 import { ThunkDispatch } from "redux-thunk";
 import { FetchError, IStoreState } from "shared/types";
-import LoadingWrapper from "../LoadingWrapper/LoadingWrapper";
 import SelectRepoForm from "../SelectRepoForm/SelectRepoForm";
 import UpgradeForm from "../UpgradeForm/UpgradeForm";
 

diff --git a/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.test.tsx b/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.test.tsx
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import LoadingWrapper from "components/LoadingWrapper/LoadingWrapper";
+import { ResourceRef } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import context from "jest-plugin-context";
 import { keyForResourceRef } from "shared/ResourceRef";
-import { ResourceRef } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { defaultStore, getStore, mountWrapper } from "shared/specs/mountWrapper";
 import { IIngressSpec, IResource, IServiceSpec, IServiceStatus } from "shared/types";
 import AccessURLTable from "./AccessURLTable";

diff --git a/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.tsx b/dashboard/src/components/AppView/AccessURLTable/AccessURLTable.tsx
@@ -2,15 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CdsIcon } from "@cds/react/icon";
+import LoadingWrapper from "components/LoadingWrapper";
 import Table from "components/js/Table";
 import { filterByResourceRefs } from "containers/helpers";
 import { ResourceRef } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
-import { get } from "lodash";
+import { get, some } from "lodash";
 import { useSelector } from "react-redux";
 import { Tooltip } from "react-tooltip";
 import { IK8sList, IKubeItem, IResource, IServiceSpec, IStoreState } from "shared/types";
-import LoadingWrapper from "../../../components/LoadingWrapper/LoadingWrapper";
-import isSomeResourceLoading from "../helpers";
 import { GetURLItemFromIngress, ShouldGenerateLink } from "./AccessURLItem/AccessURLIngressHelper";
 import { GetURLItemFromService } from "./AccessURLItem/AccessURLServiceHelper";
 import "./AccessURLTable.css";
@@ -129,7 +128,7 @@ export default function AccessURLTable({ ingressRefs, serviceRefs }: IAccessURLT
     filterByResourceRefs(serviceRefs, state.kube.items),
   ) as Array<IKubeItem<IResource>>;
 
-  if (isSomeResourceLoading(ingresses.concat(services))) {
+  if (some(ingresses.concat(services), r => r.isFetching)) {
     return (
       <section aria-labelledby="access-urls-title">
         <h5 className="section-title" id="access-urls-title">

diff --git a/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackDialog.test.tsx b/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackDialog.test.tsx
@@ -3,8 +3,8 @@
 
 import { CdsButton } from "@cds/react/button";
 import { act } from "@testing-library/react";
+import LoadingWrapper from "components/LoadingWrapper";
 import { mount, shallow } from "enzyme";
-import LoadingWrapper from "../../../../components/LoadingWrapper/LoadingWrapper";
 import RollbackDialog from "./RollbackDialog";
 
 const defaultProps = {

diff --git a/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackDialog.tsx b/dashboard/src/components/AppView/AppControls/RollbackButton/RollbackDialog.tsx
@@ -1,14 +1,14 @@
-// Copyright 2019-2022 the Kubeapps contributors.
+// Copyright 2019-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
 import { CdsButton } from "@cds/react/button";
 import { CdsControlMessage } from "@cds/react/forms";
 import { CdsModal, CdsModalActions, CdsModalContent, CdsModalHeader } from "@cds/react/modal";
 import { CdsSelect } from "@cds/react/select";
+import LoadingWrapper from "components/LoadingWrapper";
 import Alert from "components/js/Alert";
 import { useEffect, useState } from "react";
 import { DeleteError, FetchWarning } from "shared/types";
-import LoadingWrapper from "../../../LoadingWrapper/LoadingWrapper";
 import "./RollbackDialog.css";
 
 interface IRollbackDialogProps {

diff --git a/dashboard/src/components/AppView/AppControls/UpgradeButton/UpgradeButton.tsx b/dashboard/src/components/AppView/AppControls/UpgradeButton/UpgradeButton.tsx
@@ -7,7 +7,7 @@ import {
   InstalledPackageStatus,
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { Link } from "react-router-dom";
-import * as url from "../../../../shared/url";
+import * as url from "shared/url";
 import StatusAwareButton from "../StatusAwareButton/StatusAwareButton";
 
 interface IUpgradeButtonProps {

diff --git a/dashboard/src/components/AppView/AppNotes/AppNotes.tsx b/dashboard/src/components/AppView/AppNotes/AppNotes.tsx
@@ -1,12 +1,12 @@
-// Copyright 2021-2022 the Kubeapps contributors.
+// Copyright 2021-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
+import HeadingRenderer from "components/MarkdownRenderer/HeadingRenderer";
+import LinkRenderer from "components/MarkdownRenderer/LinkRenderer";
+import TableRenderer from "components/MarkdownRenderer/TableRenderer";
 import ReactMarkdown from "react-markdown";
 import remarkBreaks from "remark-breaks";
 import remarkGfm from "remark-gfm";
-import HeadingRenderer from "../../MarkdownRenderer/HeadingRenderer";
-import LinkRenderer from "../../MarkdownRenderer/LinkRenderer";
-import TableRenderer from "../../MarkdownRenderer/TableRenderer";
 
 export interface IAppNotesProps {
   title?: string;

diff --git a/dashboard/src/components/AppView/AppView.tsx b/dashboard/src/components/AppView/AppView.tsx
@@ -4,17 +4,18 @@
 import { CdsButton } from "@cds/react/button";
 import actions from "actions";
 import { handleErrorAction } from "actions/auth";
+import Column from "components/Column";
 import ErrorAlert from "components/ErrorAlert";
-import Alert from "components/js/Alert";
-import Column from "components/js/Column";
-import Row from "components/js/Row";
+import LoadingWrapper from "components/LoadingWrapper";
 import PageHeader from "components/PageHeader/PageHeader";
-import { usePush } from "hooks/push";
+import Row from "components/Row";
+import Alert from "components/js/Alert";
 import {
   InstalledPackageReference,
   ResourceRef,
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { Plugin } from "gen/kubeappsapis/core/plugins/v1alpha1/plugins_pb";
+import { usePush } from "hooks/push";
 import placeholder from "icons/placeholder.svg";
 import { useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
@@ -31,11 +32,10 @@ import {
   IStoreState,
   NotFoundNetworkError,
 } from "shared/types";
+import * as url from "shared/url";
 import { getPluginsSupportingRollback } from "shared/utils";
-import { parseToString, parseToJS } from "shared/yamlUtils";
+import { parseToJS, parseToString } from "shared/yamlUtils";
 import ApplicationStatus from "../ApplicationStatus/ApplicationStatus";
-import * as url from "../../shared/url";
-import LoadingWrapper from "../LoadingWrapper/LoadingWrapper";
 import AccessURLTable from "./AccessURLTable/AccessURLTable";
 import DeleteButton from "./AppControls/DeleteButton/DeleteButton";
 import RollbackButton from "./AppControls/RollbackButton/RollbackButton";

diff --git a/dashboard/src/components/AppView/CustomAppView/CustomAppView.test.tsx b/dashboard/src/components/AppView/CustomAppView/CustomAppView.test.tsx
@@ -1,15 +1,15 @@
 // Copyright 2021-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
+import { CustomComponent } from "RemoteComponent";
 import {
-  InstalledPackageDetail,
   AvailablePackageDetail,
+  InstalledPackageDetail,
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import ResourceRef from "shared/ResourceRef";
 import { getStore, initialState, mountWrapper } from "shared/specs/mountWrapper";
 import { IStoreState } from "shared/types";
 import CustomAppView from ".";
-import { CustomComponent } from "../../../RemoteComponent";
 import { IAppViewResourceRefs } from "../AppView";
 
 const defaultState = {

diff --git a/dashboard/src/components/AppView/CustomAppView/CustomAppView.tsx b/dashboard/src/components/AppView/CustomAppView/CustomAppView.tsx
@@ -1,6 +1,7 @@
 // Copyright 2021-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
+import { CustomComponent } from "RemoteComponent";
 import actions from "actions";
 import { usePush } from "hooks/push";
 import {
@@ -9,10 +10,9 @@ import {
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
 import { useCallback, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { CustomComponent } from "RemoteComponent";
 import { IStoreState } from "shared/types";
+import * as urls from "shared/url";
 import { IAppViewResourceRefs } from "../AppView";
-import * as urls from "../../../shared/url";
 
 export interface ICustomAppViewProps {
   resourceRefs: IAppViewResourceRefs;

diff --git a/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItemDatum.tsx b/dashboard/src/components/AppView/ResourceTable/ResourceItem/SecretItem/SecretItemDatum.tsx
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CdsIcon } from "@cds/react/icon";
-import Column from "components/js/Column";
-import Row from "components/js/Row";
+import Column from "components/Column";
+import Row from "components/Row";
 import React, { useEffect, useRef } from "react";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Tooltip } from "react-tooltip";

diff --git a/dashboard/src/components/AppView/helpers/index.ts b/dashboard/src/components/AppView/helpers/index.ts
diff --git a/dashboard/src/components/ApplicationStatus/ApplicationStatus.tsx b/dashboard/src/components/ApplicationStatus/ApplicationStatus.tsx
@@ -1,23 +1,22 @@
 // Copyright 2019-2023 the Kubeapps contributors.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useSelector } from "react-redux";
 import { CdsIcon } from "@cds/react/icon";
-import isSomeResourceLoading from "components/AppView/helpers";
 import LoadingWrapper from "components/LoadingWrapper/LoadingWrapper";
+import { filterByResourceRefs } from "containers/helpers";
 import {
   InstalledPackageDetail,
   InstalledPackageStatus,
   InstalledPackageStatus_StatusReason,
   ResourceRef,
 } from "gen/kubeappsapis/core/packages/v1alpha1/packages_pb";
-import { flatten, get } from "lodash";
+import { flatten, get, some } from "lodash";
 import { useEffect, useState } from "react";
 import { PieChart } from "react-minimal-pie-chart";
+import { useSelector } from "react-redux";
 import { Tooltip } from "react-tooltip";
-import { IK8sList, IKubeItem, IResource, IStoreState } from "../../shared/types";
+import { IK8sList, IKubeItem, IResource, IStoreState } from "shared/types";
 import "./ApplicationStatus.css";
-import { filterByResourceRefs } from "containers/helpers";
 
 interface IApplicationStatusProps {
   deployRefs: ResourceRef[];
@@ -143,7 +142,7 @@ export default function ApplicationStatus({
 
   const ready = totalPods === readyPods;
 
-  if (isSomeResourceLoading(deployments.concat(statefulsets).concat(daemonsets))) {
+  if (some(deployments.concat(statefulsets).concat(daemonsets), r => r.isFetching)) {
     return (
       <div className="status-loading-wrapper margin-t-xl">
         <LoadingWrapper loadingText="Loading..." size={"md"} />

diff --git a/dashboard/src/components/Catalog/Catalog.test.tsx b/dashboard/src/components/Catalog/Catalog.test.tsx
@@ -27,12 +27,7 @@ import { IConfigState } from "reducers/config";
 import { IOperatorsState } from "reducers/operators";
 import { IPackageRepositoryState } from "reducers/repos";
 import { getStore, initialState, mountWrapper } from "shared/specs/mountWrapper";
-import {
-  IClusterServiceVersion,
-  IPackageState,
-  IStoreState,
-  PluginNames,
-} from "../../shared/types";
+import { IClusterServiceVersion, IPackageState, IStoreState, PluginNames } from "shared/types";
 import SearchFilter from "../SearchFilter/SearchFilter";
 import Catalog, { filterNames } from "./Catalog";
 import CatalogItems from "./CatalogItems";

diff --git a/dashboard/src/components/Catalog/Catalog.tsx b/dashboard/src/components/Catalog/Catalog.tsx
@@ -4,10 +4,11 @@
 import { CdsButton } from "@cds/react/button";
 import { CdsIcon } from "@cds/react/icon";
 import actions from "actions";
+import Column from "components/Column";
 import FilterGroup from "components/FilterGroup/FilterGroup";
+import LoadingWrapper from "components/LoadingWrapper";
+import Row from "components/Row";
 import Alert from "components/js/Alert";
-import Column from "components/js/Column";
-import Row from "components/js/Row";
 import { usePush } from "hooks/push";
 import { flatten, get, intersection, isEqual, trimStart, uniq, without } from "lodash";
 import qs from "qs";
@@ -18,7 +19,6 @@ import { Link } from "react-router-dom";
 import { IClusterServiceVersion, IStoreState } from "shared/types";
 import { app } from "shared/url";
 import { escapeRegExp, getPluginPackageName } from "shared/utils";
-import LoadingWrapper from "../LoadingWrapper/LoadingWrapper";
 import PageHeader from "../PageHeader/PageHeader";
 import SearchFilter from "../SearchFilter/SearchFilter";
 import "./Catalog.css";