feat: updated organization import form for api changes

Author: wwills2

src/renderer/api/cadt/v1/organizations/organizations.api.ts

@@ -9,7 +9,12 @@ interface GetOrgnaizationsMapResponse {
 
 interface CreateOrganizationResponse {
   message: string;
-  orgId: string;
+  orgUid: string;
+}
+
+interface CreateOrganizationParams {
+  orgUid: string;
+  isHome: boolean;
 }
 
 const organizationsApi = cadtApi.injectEndpoints({
@@ -59,22 +64,20 @@ const organizationsApi = cadtApi.injectEndpoints({
       invalidatesTags: [organizationsTag],
     }),
 
-    importOrganization: builder.mutation<CreateOrganizationResponse, string>({
-      query: (orgUid: string) => ({
+    importOrganization: builder.mutation<CreateOrganizationResponse, CreateOrganizationParams>({
+      query: (createOrgParams) => ({
         url: `/v1/organizations`,
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
-        body: { orgUid },
+        body: createOrgParams,
       }),
       invalidatesTags: [organizationsTag],
     }),
 
     deleteOrganization: builder.mutation<any, string>({
       query: (orgUid: string) => ({
-        url: `/v1/organizations`,
+        url: `/v1/organizations/${orgUid}`,
         method: 'DELETE',
-        headers: { 'Content-Type': 'application/json' },
-        body: { orgUid },
       }),
       invalidatesTags: [organizationsTag],
     }),

src/renderer/components/blocks/forms/ImportOrganizationForm.tsx

@@ -1,31 +1,36 @@
 import React, { useCallback } from 'react';
 import { ErrorMessage, Field, Form, Formik } from 'formik';
 import * as yup from 'yup';
-import { FloatingLabel, FormButton } from '@/components';
+import { CheckBox, FloatingLabel, FormButton, Label } from '@/components';
 import { FormattedMessage, IntlShape, useIntl } from 'react-intl';
 
 const validationSchema = yup.object({
   orgUid: yup.string().length(64).required('OrgUid is required'),
 });
 
+export interface ImportOrganizationProps {
+  orgUid: string;
+  isHome: boolean;
+}
+
 interface FormProps {
-  onSubmit: (orgUid: string) => Promise<any>;
+  onSubmit: (params: ImportOrganizationProps) => Promise<any>;
 }
 
 const ImportOrganizationForm: React.FC<FormProps> = ({ onSubmit }) => {
   const intl: IntlShape = useIntl();
 
   const handleSubmit = useCallback(
-    async (values: { orgUid: string }, { setSubmitting }) => {
-      await onSubmit(values.orgUid);
+    async (values: ImportOrganizationProps, { setSubmitting }) => {
+      await onSubmit(values);
       setSubmitting(false);
     },
     [onSubmit],
   ); // Include onSuccess in the dependencies array
 
   return (
     <>
-      <Formik initialValues={{ orgUid: '' }} validationSchema={validationSchema} onSubmit={handleSubmit}>
+      <Formik initialValues={{ orgUid: '', isHome: true }} validationSchema={validationSchema} onSubmit={handleSubmit}>
         {({ errors, touched, isSubmitting }) => (
           <Form>
             <div className="mb-4">
@@ -42,6 +47,14 @@ const ImportOrganizationForm: React.FC<FormProps> = ({ onSubmit }) => {
                 )}
               </Field>
               {touched.orgUid && <ErrorMessage name="orgUid" component="div" className="text-red-600" />}
+              <div className="flex space-x-2.5">
+                <Field name="isHome">{({ field }) => <CheckBox id="isHome" checked {...field} />}</Field>
+                <Label htmlFor="isHome">
+                  <p className="text-gray-600">
+                    <FormattedMessage id="import-as-home-organization" />
+                  </p>
+                </Label>
+              </div>
             </div>
             <FormButton isSubmitting={isSubmitting} formikErrors={errors}>
               <FormattedMessage id="submit" />

src/renderer/components/blocks/modals/CreateOrganizationModal.tsx

@@ -1,4 +1,4 @@
-import { Card, CreateOrganizationForm, Modal, Spinner, Tabs } from '@/components';
+import { Card, CreateOrganizationForm, ImportOrganizationProps, Modal, Spinner, Tabs } from '@/components';
 import { FormattedMessage } from 'react-intl';
 import { useCreateOrganizationMutation, useImportOrganizationMutation } from '@/api';
 import { ImportOrganizationForm } from '@/components/blocks/forms/ImportOrganizationForm';
@@ -31,8 +31,9 @@ const CreateOrganizationModal: React.FC<CreateOrganizationModalProps> = ({
     }
   };
 
-  const handleSubmitImportOrg = async (orgName: string) => {
-    const createOrgResult: any = await triggerImportOrganization(orgName);
+  const handleSubmitImportOrg = async (importOrgFormValues: ImportOrganizationProps) => {
+    const { orgUid, isHome } = importOrgFormValues;
+    const createOrgResult: any = await triggerImportOrganization({ orgUid, isHome });
     if (createOrgResult?.data.success) {
       onClose();
     } else {

src/renderer/components/proxy/CheckBox.tsx

@@ -0,0 +1,7 @@
+import { Checkbox as FlowbiteCheckBox, CheckboxProps } from 'flowbite-react';
+
+function CheckBox({ children, ...props }: CheckboxProps) {
+  return <FlowbiteCheckBox {...props}>{children}</FlowbiteCheckBox>;
+}
+
+export { CheckBox };

src/renderer/components/proxy/index.ts

@@ -16,3 +16,4 @@ export * from './FloatingLabel';
 export * from './Select';
 export * from './Badge';
 export * from './Popover';
+export * from './CheckBox';

src/renderer/translations/tokens/en-US.json

@@ -208,5 +208,6 @@
   "api-host-loaded-from-configuration": "API host loaded from configuration",
   "not-specified": "not specified",
   "unable-to-load-staging-data": "Unable to load staging data",
-  "new-unit": "New Unit"
+  "new-unit": "New Unit",
+  "import-as-home-organization": "Import as home organization"
 }