Merged in feature/GFW-1041-remove-team-area (pull request #136)

Feature/GFW-1050 remove team area

Approved-by: Owen Evans
Approved-by: Uchenna Okafor

Author: Kevin Borrill

src/pages/area-view/AreaView.tsx

@@ -17,6 +17,7 @@ import { TTeamDataTable, TTeamDataTableAction, TTemplateDataTable, TTemplateData
 import RemoveTemplateModal from "./actions/RemoveTemplate";
 import useGetUserId from "hooks/useGetUserId";
 import AddTeamModal from "./actions/AddTeam";
+import RemoveTeamModal from "./actions/RemoveTeam";
 
 interface IProps extends TPropsFromRedux {}
 export type TParams = {
@@ -202,7 +203,7 @@ const AreasView: FC<IProps & RouteComponentProps<TParams>> = ({
           <AddTeamModal teams={teamsToAdd} />
         </Route>
         <Route path={`${path}/team/remove/:teamId`}>
-          <RemoveTemplateModal />
+          <RemoveTeamModal />
         </Route>
       </Switch>
     </>

src/pages/area-view/actions/RemoveTeam.tsx

@@ -0,0 +1,67 @@
+import { FC, useCallback, useState } from "react";
+import Modal from "components/ui/Modal/Modal";
+import Loader from "components/ui/Loader";
+import { useHistory, useParams } from "react-router-dom";
+import { TParams as TAreaDetailParams } from "../AreaView";
+import { toastr } from "react-redux-toastr";
+import { TErrorResponse } from "constants/api";
+import { useAppDispatch } from "hooks/useRedux";
+import { FormattedMessage, useIntl } from "react-intl";
+import { areaService } from "services/area";
+import { getAreas } from "modules/areas";
+
+type TParams = TAreaDetailParams & {
+  teamId: string;
+};
+
+interface IProps {}
+
+const RemoveTeamModal: FC<IProps> = props => {
+  const { teamId, areaId } = useParams<TParams>();
+  const history = useHistory();
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const [isRemoving, setIsRemoving] = useState(false);
+
+  const onClose = useCallback(() => {
+    history.push(`/areas/${areaId}`);
+  }, [history, areaId]);
+
+  const removeTeam = async () => {
+    setIsRemoving(true);
+    try {
+      await areaService.unassignTeamFromArea(areaId, teamId);
+      dispatch(getAreas());
+      onClose();
+      toastr.success(intl.formatMessage({ id: "areas.details.teams.remove.success" }), "");
+    } catch (e: any) {
+      const error = JSON.parse(e.message) as TErrorResponse;
+      toastr.error(
+        intl.formatMessage({ id: "areas.details.teams.remove.error" }),
+        error?.errors?.length ? error.errors[0].detail : ""
+      );
+      console.error(e);
+    }
+    setIsRemoving(false);
+  };
+
+  return (
+    <Modal
+      isOpen
+      dismissible={false}
+      title={"areas.details.teams.remove.title"}
+      onClose={onClose}
+      actions={[
+        { name: "common.confirm", onClick: removeTeam },
+        { name: "common.cancel", variant: "secondary", onClick: onClose }
+      ]}
+    >
+      <Loader isLoading={isRemoving} />
+      <p>
+        <FormattedMessage id="areas.details.teams.remove.body" />
+      </p>
+    </Modal>
+  );
+};
+
+export default RemoveTeamModal;

src/pages/area-view/actions/RemoveTemplate.tsx

@@ -21,7 +21,6 @@ const RemoveTemplateModal: FC<IProps> = props => {
   const history = useHistory();
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  // const members = useAppSelector(state => state.gfwTeams.members[teamId]);
   const [isRemoving, setIsRemoving] = useState(false);
 
   const onClose = useCallback(() => {

src/services/area.ts

@@ -57,6 +57,11 @@ export class AreaService extends BaseService {
     return this.fetch(`/${areaId}/template/${templateId}`, { method: "DELETE" });
   }
 
+  unassignTeamFromArea(areaId: string, teamId: string) {
+    this.token = store.getState().user.token;
+    return this.fetch(`/${areaId}/team/${teamId}`, { method: "DELETE" });
+  }
+
   getAreaTeamIds(areaId: string) {
     this.token = store.getState().user.token;
     return this.fetchJSON(`/areaTeams/${areaId}`);