Fix empty automatic partial snapshots dropdown (#4052)

* Fix empty automatic partial snapshots dropdown

web/src/Root.tsx

@@ -458,8 +458,8 @@ const Root = () => {
         }}
       >
         <ToastProvider>
-          {/* eslint-disable-next-line  */}
-          {/* @ts-ignore  */}
+          {/* eslint-disable-next-line */}
+          {/* @ts-ignore */}
           <NavBar
             logo={state.themeState.navbarLogo || state.appLogo}
             refetchAppsList={getAppsList}
@@ -611,6 +611,8 @@ const Root = () => {
                 <Route
                   path="settings"
                   element={
+                    // eslint-disable-next-line
+                    // @ts-ignore
                     <SnapshotSettings
                       isKurlEnabled={state.adminConsoleMetadata?.isKurl}
                       appsList={state.appsList}

web/src/components/shared/NavBar.tsx

@@ -44,7 +44,6 @@ export class NavBar extends PureComponent<Props, State> {
 
   static propTypes = {
     refetchAppsList: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
   };
 
   handleLogOut = async (e: React.ChangeEvent) => {

web/src/components/snapshots/SnapshotSettings.jsx → 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<Props, State> {
+  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}
           />
         </div>
       </div>

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<object>;
+  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<Props, State> {
     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;