[UI] Edit Cluster

ui-cra/src/components/Applications/Add/form/Partials/AppFields.tsx

@@ -90,7 +90,6 @@ const AppFields: FC<{
   const handleSelectSource = (event: React.ChangeEvent<any>) => {
     const { value } = event.target;
     const { obj } = JSON.parse(value);
-    console.log(obj);
 
     let currentAutomation = [...formData.clusterAutomations];
 
@@ -110,7 +109,7 @@ const AppFields: FC<{
       clusterAutomations: currentAutomation,
     });
 
-    if (JSON.parse(value).kind === 'HelmRepository') {
+    if (obj?.kind === 'HelmRepository') {
       setHelmRepo({
         name: obj?.metadata?.name,
         namespace: obj?.metadata?.namespace,

ui-cra/src/components/Applications/Add/index.tsx

@@ -4,45 +4,46 @@ import { localEEMuiTheme } from '../../../muiTheme';
 import { PageTemplate } from '../../Layout/PageTemplate';
 import { SectionHeader } from '../../Layout/SectionHeader';
 import { AddApplicationRequest, useApplicationsCount } from '../utils';
-import GitOps from '../../Clusters/Create/Form/Partials/GitOps';
+import GitOps from '../../Clusters/Form/Partials/GitOps';
 import { Grid } from '@material-ui/core';
 import { ContentWrapper } from '../../Layout/ContentWrapper';
 import {
   CallbackStateContextProvider,
-  clearCallbackState,
-  getCallbackState,
   getProviderToken,
 } from '@weaveworks/weave-gitops';
 import { useHistory } from 'react-router-dom';
 import { theme as weaveTheme } from '@weaveworks/weave-gitops';
 import { isUnauthenticated, removeToken } from '../../../utils/request';
 import useNotifications from '../../../contexts/Notifications';
-import useProfiles from '../../../contexts/Profiles';
 import { GitProvider } from '@weaveworks/weave-gitops/ui/lib/api/applications/applications.pb';
 import { useListConfig } from '../../../hooks/versions';
 import { PageRoute } from '@weaveworks/weave-gitops/ui/lib/types';
 import AppFields from './form/Partials/AppFields';
-import Profiles from '../../Clusters/Create/Form/Partials/Profiles';
-import { UpdatedProfile } from '../../../types/custom';
+import Profiles from '../../Clusters/Form/Partials/Profiles';
 import ProfilesProvider from '../../../contexts/Profiles/Provider';
 import { ClusterAutomation } from '../../../cluster-services/cluster_services.pb';
 import useClusters from '../../../contexts/Clusters';
 import { Loader } from '../../Loader';
+import _ from 'lodash';
+import useProfiles from '../../../contexts/Profiles';
+import { useCallbackState } from '../../../utils/callback-state';
+import { ProfilesIndex } from '../../../types/custom';
 
 const AddApplication = () => {
   const applicationsCount = useApplicationsCount();
   const [loading, setLoading] = useState<boolean>(false);
   const [showAuthDialog, setShowAuthDialog] = useState(false);
   const history = useHistory();
   const { setNotifications } = useNotifications();
-  const { profiles } = useProfiles();
   const { data } = useListConfig();
   const repositoryURL = data?.repositoryURL || '';
   const authRedirectPage = `/applications/create`;
   const { clusters, isLoading } = useClusters();
 
   const random = useMemo(() => Math.random().toString(36).substring(7), []);
 
+  const callbackState = useCallbackState();
+
   let initialFormData = {
     url: '',
     provider: '',
@@ -65,37 +66,28 @@ const AddApplication = () => {
         source_type: '',
       },
     ],
+    ...callbackState?.state?.formData,
   };
 
-  let initialProfiles = [] as UpdatedProfile[];
+  const [formData, setFormData] = useState<any>(initialFormData);
 
-  const callbackState = getCallbackState();
+  const { profiles, isLoading: profilesIsLoading } = useProfiles();
+  const [updatedProfiles, setUpdatedProfiles] = useState<ProfilesIndex>({});
 
-  if (callbackState) {
-    initialFormData = {
-      ...initialFormData,
-      ...callbackState.state.formData,
-    };
-    initialProfiles = [
-      ...initialProfiles,
-      ...callbackState.state.selectedProfiles,
-    ];
-  }
-  const [formData, setFormData] = useState<any>(initialFormData);
-  const [selectedProfiles, setSelectedProfiles] =
-    useState<UpdatedProfile[]>(initialProfiles);
+  useEffect(() => {
+    setUpdatedProfiles({
+      ..._.keyBy(profiles, 'name'),
+      ...callbackState?.state?.updatedProfiles,
+    });
+  }, [callbackState?.state?.updatedProfiles, profiles]);
 
   useEffect(() => {
-    if (repositoryURL != null) {
-      setFormData((prevState: any) => ({
-        ...prevState,
-        url: repositoryURL,
-      }));
-    }
+    setFormData((prevState: any) => ({
+      ...prevState,
+      url: repositoryURL,
+    }));
   }, [repositoryURL]);
 
-  useEffect(() => clearCallbackState(), []);
-
   useEffect(() => {
     setFormData((prevState: any) => ({
       ...prevState,
@@ -107,9 +99,13 @@ const AddApplication = () => {
 
   const handleAddApplication = useCallback(() => {
     let clusterAutomations: ClusterAutomation[] = [];
+    const selectedProfilesList = _.sortBy(
+      Object.values(updatedProfiles),
+      'name',
+    ).filter(p => p.selected);
     if (formData.source_type === 'HelmRepository') {
       for (let kustomization of formData.clusterAutomations) {
-        for (let profile of selectedProfiles) {
+        for (let profile of selectedProfilesList) {
           let values: string = '';
           let version: string = '';
           for (let value of profile.values) {
@@ -213,7 +209,7 @@ const AddApplication = () => {
         }
       })
       .finally(() => setLoading(false));
-  }, [formData, history, setNotifications, selectedProfiles]);
+  }, [formData, history, setNotifications, updatedProfiles]);
 
   return useMemo(() => {
     return (
@@ -224,7 +220,7 @@ const AddApplication = () => {
               page: authRedirectPage as PageRoute,
               state: {
                 formData,
-                selectedProfiles,
+                updatedProfiles,
               },
             }}
           >
@@ -258,13 +254,13 @@ const AddApplication = () => {
                     )}
                   {isLoading && <Loader></Loader>}
                 </Grid>
-                {profiles.length > 0 &&
-                formData.source_type === 'HelmRepository' ? (
+                {formData.source_type === 'HelmRepository' ? (
                   <Profiles
                     // Temp fix to hide layers when using profiles in Add App until we update the BE
                     context="app"
-                    selectedProfiles={selectedProfiles}
-                    setSelectedProfiles={setSelectedProfiles}
+                    isLoading={profilesIsLoading}
+                    updatedProfiles={updatedProfiles}
+                    setUpdatedProfiles={setUpdatedProfiles}
                   />
                 ) : null}
                 <Grid item xs={12} sm={10} md={10} lg={8}>
@@ -289,8 +285,9 @@ const AddApplication = () => {
     formData,
     handleAddApplication,
     loading,
-    profiles.length,
-    selectedProfiles,
+    profilesIsLoading,
+    updatedProfiles,
+    setUpdatedProfiles,
     showAuthDialog,
     clusters,
     isLoading,