diff --git a/web/src/Root.tsx b/web/src/Root.tsx index 5bbe6f3a13..d21a4ad89e 100644 --- a/web/src/Root.tsx +++ b/web/src/Root.tsx @@ -458,8 +458,8 @@ const Root = () => { }} > - {/* eslint-disable-next-line */} - {/* @ts-ignore */} + {/* eslint-disable-next-line */} + {/* @ts-ignore */} { { static propTypes = { refetchAppsList: PropTypes.func.isRequired, - history: PropTypes.object.isRequired, }; handleLogOut = async (e: React.ChangeEvent) => { diff --git a/web/src/components/snapshots/SnapshotSettings.jsx b/web/src/components/snapshots/SnapshotSettings.tsx similarity index 81% rename from web/src/components/snapshots/SnapshotSettings.jsx rename to web/src/components/snapshots/SnapshotSettings.tsx index b49524f2ca..7b7bb990e1 100644 --- a/web/src/components/snapshots/SnapshotSettings.jsx +++ b/web/src/components/snapshots/SnapshotSettings.tsx @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import { withRouter } from "@src/utilities/react-router-utilities"; +import { RouterProps, withRouter } from "@src/utilities/react-router-utilities"; import { KotsPageTitle } from "@components/Head"; import isEmpty from "lodash/isEmpty"; import isEqual from "lodash/isEqual"; @@ -8,31 +8,67 @@ import Loader from "../shared/Loader"; import SnapshotStorageDestination from "./SnapshotStorageDestination"; import "../../scss/components/shared/SnapshotForm.scss"; -import { isVeleroCorrectVersion, Utilities } from "../../utilities/utilities"; +import { isVeleroCorrectVersion } from "../../utilities/utilities"; import { Repeater } from "../../utilities/repeater"; +import { App } from "@types"; import Icon from "../Icon"; -class SnapshotSettings extends Component { - state = { - snapshotSettings: null, - isLoadingSnapshotSettings: true, - snapshotSettingsErr: false, - snapshotSettingsErrMsg: "", - toggleSnapshotView: false, - hideCheckVeleroButton: false, - updateConfirm: false, - updatingSettings: false, - updateErrorMsg: "", - showConfigureSnapshotsModal: false, - kotsadmRequiresVeleroAccess: false, - minimalRBACKotsadmNamespace: "", - showResetFileSystemWarningModal: false, - resetFileSystemWarningMessage: "", - snapshotSettingsJob: new Repeater(), - checkForVeleroAndNodeAgent: false, +type Props = { + appsList: App[]; + isKurlEnabled?: boolean; +} & RouterProps; + +type State = { + snapshotSettings?: { + isVeleroRunning: boolean; + veleroVersion: string; + veleroPod?: object; + nodeAgentPods?: object[]; }; + isLoadingSnapshotSettings: boolean; + snapshotSettingsErr: boolean; + snapshotSettingsErrMsg: string; + toggleSnapshotView: boolean; + hideCheckVeleroButton: boolean; + updateConfirm: boolean; + updatingSettings: boolean; + updateErrorMsg: string; + showConfigureSnapshotsModal: boolean; + kotsadmRequiresVeleroAccess: boolean; + minimalRBACKotsadmNamespace: string; + showResetFileSystemWarningModal: boolean; + resetFileSystemWarningMessage: string; + snapshotSettingsJob: Repeater; + checkForVeleroAndNodeAgent: boolean; + isEmptyView?: boolean; + veleroUpdated?: boolean; + nodeAgentUpdated?: boolean; +}; - fetchSnapshotSettings = (isCheckForVelero) => { +class SnapshotSettings extends Component { + constructor(props: Props) { + super(props); + this.state = { + snapshotSettings: undefined, + isLoadingSnapshotSettings: true, + snapshotSettingsErr: false, + snapshotSettingsErrMsg: "", + toggleSnapshotView: false, + hideCheckVeleroButton: false, + updateConfirm: false, + updatingSettings: false, + updateErrorMsg: "", + showConfigureSnapshotsModal: false, + kotsadmRequiresVeleroAccess: false, + minimalRBACKotsadmNamespace: "", + showResetFileSystemWarningModal: false, + resetFileSystemWarningMessage: "", + snapshotSettingsJob: new Repeater(), + checkForVeleroAndNodeAgent: false, + }; + } + + fetchSnapshotSettings = (isCheckForVelero?: boolean) => { this.setState({ isLoadingSnapshotSettings: true, snapshotSettingsErr: false, @@ -111,7 +147,7 @@ class SnapshotSettings extends Component { this.state.snapshotSettingsJob.start(this.fetchSnapshotSettings, 2000); }; - componentDidUpdate(_, lastState) { + componentDidUpdate = (_: Props, lastState: State) => { if ( this.state.snapshotSettings !== lastState.snapshotSettings && this.state.snapshotSettings @@ -136,15 +172,15 @@ class SnapshotSettings extends Component { this.setState({ veleroUpdated: true }); } - let sortedStateNodeAgentPods = []; - let sortedLastStateNodeAgentPods = []; + let sortedStateNodeAgentPods: object[] | undefined = []; + let sortedLastStateNodeAgentPods: object[] | undefined = []; if (!isEmpty(this.state.snapshotSettings?.nodeAgentPods)) { sortedStateNodeAgentPods = - this.state.snapshotSettings?.nodeAgentPods.sort(); + this.state.snapshotSettings?.nodeAgentPods?.sort(); } if (!isEmpty(lastState.snapshotSettings?.nodeAgentPods)) { sortedLastStateNodeAgentPods = - lastState.snapshotSettings?.nodeAgentPods.sort(); + lastState.snapshotSettings?.nodeAgentPods?.sort(); } if ( !isEqual(sortedStateNodeAgentPods, sortedLastStateNodeAgentPods) && @@ -174,16 +210,16 @@ class SnapshotSettings extends Component { } } } - } + }; - toggleSnapshotView = (isEmptyView) => { + toggleSnapshotView = (isEmptyView?: boolean) => { this.setState({ toggleSnapshotView: !this.state.toggleSnapshotView, isEmptyView: isEmptyView ? isEmptyView : false, }); }; - updateSettings = (payload) => { + updateSettings = (payload: object) => { this.setState({ updatingSettings: true, updateErrorMsg: "", @@ -261,9 +297,9 @@ class SnapshotSettings extends Component { }; openConfigureSnapshotsMinimalRBACModal = ( - kotsadmRequiresVeleroAccess, - minimalRBACKotsadmNamespace - ) => { + kotsadmRequiresVeleroAccess: boolean, + minimalRBACKotsadmNamespace: string + ): void => { this.setState( { showConfigureSnapshotsModal: true, @@ -363,7 +399,7 @@ class SnapshotSettings extends Component { this.hideResetFileSystemWarningModal } isKurlEnabled={this.props.isKurlEnabled} - apps={this.props.apps} + apps={this.props.appsList} /> diff --git a/web/src/components/snapshots/SnapshotStorageDestination.tsx b/web/src/components/snapshots/SnapshotStorageDestination.tsx index eb9aff4d70..96cb2c71c7 100644 --- a/web/src/components/snapshots/SnapshotStorageDestination.tsx +++ b/web/src/components/snapshots/SnapshotStorageDestination.tsx @@ -7,6 +7,7 @@ import Modal from "react-modal"; import ConfigureSnapshots from "./ConfigureSnapshots"; import CodeSnippet from "../shared/CodeSnippet"; import Loader from "../shared/Loader"; +import { App } from "@types"; import "../../scss/components/shared/SnapshotForm.scss"; @@ -195,26 +196,31 @@ type ProviderPayload = | StoreProvider; type Props = { - // TODO: add apps type for apps response - apps: Array; + apps: App[]; checkForVeleroAndNodeAgent: boolean; fetchSnapshotSettings: () => void; - hideCheckVeleroButton: () => void; + hideCheckVeleroButton: boolean; + toggleSnapshotView: (isEmptyView?: boolean) => void; hideResetFileSystemWarningModal: () => void; - isKurlEnabled: boolean; + isEmptyView?: boolean; + isLicenseUpload: boolean; + isKurlEnabled?: boolean; kotsadmRequiresVeleroAccess: boolean; minimalRBACKotsadmNamespace: string; - openConfigureSnapshotsMinimalRBACModal: () => void; + openConfigureSnapshotsMinimalRBACModal: ( + kotsadmRequiresVeleroAccess: boolean, + minimalRBACKotsadmNamespace: string + ) => void; renderNotVeleroMessage: () => void; resetFileSystemWarningMessage: string; showConfigureSnapshotsModal: boolean; showResetFileSystemWarningModal: boolean; - snapshotSettings: { + snapshotSettings?: { fileSystemConfig?: FileSystemConfig; isKurl?: boolean; isMinioDisabled?: boolean; isVeleroRunning?: boolean; - store: StoreProvider; + store?: StoreProvider; veleroPlugins?: string[]; veleroVersion?: string; }; @@ -367,22 +373,22 @@ class SnapshotStorageDestination extends Component { const { snapshotSettings } = this.props; if (provider === "aws") { - if (snapshotSettings.store?.aws) { + if (snapshotSettings?.store?.aws) { return ( - snapshotSettings.store?.aws.region !== s3Region || - snapshotSettings.store?.aws.accessKeyID !== s3KeyId || - snapshotSettings.store?.aws.secretAccessKey !== s3KeySecret || - snapshotSettings.store?.aws.useInstanceRole !== useIamAws + snapshotSettings?.store?.aws.region !== s3Region || + snapshotSettings?.store?.aws.accessKeyID !== s3KeyId || + snapshotSettings?.store?.aws.secretAccessKey !== s3KeySecret || + snapshotSettings?.store?.aws.useInstanceRole !== useIamAws ); } return true; } if (provider === "gcp") { - if (snapshotSettings.store?.gcp) { + if (snapshotSettings?.store?.gcp) { return ( - snapshotSettings.store?.gcp.useInstanceRole !== gcsUseIam || - snapshotSettings.store?.gcp.serviceAccount !== gcsServiceAccount || - snapshotSettings.store?.gcp.jsonFile !== gcsJsonFile + snapshotSettings?.store?.gcp.useInstanceRole !== gcsUseIam || + snapshotSettings?.store?.gcp.serviceAccount !== gcsServiceAccount || + snapshotSettings?.store?.gcp.jsonFile !== gcsJsonFile ); } return true;