From 7db055d73e12c645f50555617e903d399aa80a77 Mon Sep 17 00:00:00 2001
From: Santhosh Nagaraj S <santhosh@kinvolk.io>
Date: Thu, 1 Sep 2022 15:38:37 +0530
Subject: [PATCH] frontend: Fix undefined appId breaking group edit

Signed-off-by: Santhosh Nagaraj S <santhosh@kinvolk.io>
---
 .../src/__tests__/Common/ModalButton.spec.js  | 23 +++++++++++++++----
 .../GroupEditDialog/GroupEditDialog.tsx       | 11 +++++++--
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/frontend/src/__tests__/Common/ModalButton.spec.js b/frontend/src/__tests__/Common/ModalButton.spec.js
index a19ea21fe..96c49ace7 100644
--- a/frontend/src/__tests__/Common/ModalButton.spec.js
+++ b/frontend/src/__tests__/Common/ModalButton.spec.js
@@ -1,24 +1,35 @@
 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);
@@ -26,7 +37,11 @@ describe('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
index dc740042e..a390312a1 100644
--- 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',