Merge pull request #620 from kinvolk/fix_group_edit

frontend: Fix undefined appId breaking group edit
flatcar · Sep 1, 2022 · b93c32e · b93c32e
2 parents 5b07da9 + 7db055d
commit b93c32e
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/frontend/src/__tests__/Common/ModalButton.spec.js b/frontend/src/__tests__/Common/ModalButton.spec.js
@@ -1,32 +1,47 @@
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import ModalButton from '../../components/common/ModalButton';
 import { theme } from '../../TestHelpers/theme';
 
 describe('Modal Button', () => {
   it('should render Application Edit Dialog on Add Icon click', () => {
-    const { getByTestId } = render(<ModalButton data={{}} modalToOpen="AddApplicationModal" />);
+    const { getByTestId } = render(
+      <MemoryRouter initialEntries={['/app/123']}>
+        <ModalButton data={{}} modalToOpen="AddApplicationModal" />
+      </MemoryRouter>
+    );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('app-edit-form')).toBeInTheDocument();
   });
   it('should render AddGroupModal on Add Icon click', () => {
-    const { getByTestId } = render(<ModalButton data={{}} modalToOpen="AddGroupModal" />);
+    const { getByTestId } = render(
+      <MemoryRouter initialEntries={['/app/123/groups/321']}>
+        <ModalButton data={{}} modalToOpen="AddGroupModal" />
+      </MemoryRouter>
+    );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('group-edit-form')).toBeInTheDocument();
   });
   it('should render AddChannelModal on Add Icon click', () => {
     const tree = (
       <MuiThemeProvider theme={theme}>
-        <ModalButton data={{}} modalToOpen="AddChannelModal" />
+        <MemoryRouter initialEntries={['/app/123']}>
+          <ModalButton data={{}} modalToOpen="AddChannelModal" />
+        </MemoryRouter>
       </MuiThemeProvider>
     );
     const { getByTestId } = render(tree);
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('channel-edit-form')).toBeInTheDocument();
   });
   it('should render AddPackageModal on Add Icon click', () => {
-    const { getByTestId } = render(<ModalButton data={{}} modalToOpen="AddPackageModal" />);
+    const { getByTestId } = render(
+      <MemoryRouter initialEntries={['/app/123']}>
+        <ModalButton data={{}} modalToOpen="AddPackageModal" />
+      </MemoryRouter>
+    );
     fireEvent.click(getByTestId('modal-button'));
     expect(getByTestId('package-edit-form')).toBeInTheDocument();
   });

diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupEditDialog.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupEditDialog.tsx
@@ -10,6 +10,7 @@ import Tabs from '@material-ui/core/Tabs';
 import { Form, Formik } from 'formik';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
 import * as Yup from 'yup';
 import { Group } from '../../../api/apiDataTypes';
 import { applicationsStore } from '../../../stores/Stores';
@@ -42,6 +43,7 @@ export default function GroupEditDialog(props: GroupEditDialogProps) {
   const [groupEditActiveTab, setGroupEditActiveTab] = React.useState(0);
   const { t } = useTranslation();
   const theme = useTheme();
+  const { appID } = useParams<{ appID: string }>();
 
   function handleSubmit(values: { [key: string]: any }, actions: { [key: string]: any }) {
     const updatesPeriodPolicy =
@@ -67,7 +69,7 @@ export default function GroupEditDialog(props: GroupEditDialogProps) {
     if (values.timezone) data['policy_timezone'] = values.timezone;
 
     let packageFunctionCall;
-    data['application_id'] = props.data.appID;
+    data['application_id'] = appID;
     if (isCreation) {
       packageFunctionCall = applicationsStore().createGroup(data as Group);
     } else {
@@ -184,10 +186,15 @@ export default function GroupEditDialog(props: GroupEditDialogProps) {
     updatesTimeout: positiveNum(),
   });
 
-  let initialValues = {};
+  let initialValues: {
+    [key: string]: any;
+  } = {
+    appID,
+  };
 
   if (isCreation) {
     initialValues = {
+      appID: appID,
       maxUpdates: 1,
       updatesPeriodRange: 1,
       updatesPeriodUnit: 'hours',