feat(fbcnms-ui): Add Organization detail + edit

Signed-off-by: HannaFar <hannafarag159@gmail.com>

Author: HannaFar

fbcnms-packages/fbcnms-ui/master/OrganizationDialog.js

@@ -7,7 +7,6 @@
  * @flow strict-local
  * @format
  */
-
 import type {OrganizationPlainAttributes} from '@fbcnms/sequelize-models/models/organization';
 
 import Button from '@fbcnms/ui/components/design-system/Button';
@@ -20,12 +19,11 @@ import OrganizationUserDialog from './OrganizationUserDialog';
 import React from 'react';
 import Tab from '@material-ui/core/Tab';
 import Tabs from '@material-ui/core/Tabs';
-
 import {UserRoles} from '@fbcnms/auth/types';
 import {brightGray, white} from '@fbcnms/ui/theme/colors';
 import {makeStyles} from '@material-ui/styles';
 import {useAxios} from '@fbcnms/ui/hooks';
-import {useState} from 'react';
+import {useEffect, useState} from 'react';
 
 const useStyles = makeStyles(_ => ({
   input: {
@@ -38,6 +36,13 @@ const useStyles = makeStyles(_ => ({
     color: white,
   },
 }));
+type TabType =
+  | 'automation'
+  | 'admin'
+  | 'inventory'
+  | 'nms'
+  | 'workorders'
+  | 'hub';
 
 export type DialogProps = {
   error: string,
@@ -50,15 +55,25 @@ export type DialogProps = {
   // If true, enable all networks for an organization
   shouldEnableAllNetworks: boolean,
   setShouldEnableAllNetworks: boolean => void,
+  edit: boolean,
+  getProjectTabs?: () => Array<{id: TabType, name: string}>,
+  // flag to display advanced fields
+  hideAdvancedFields: boolean,
 };
 
 type Props = {
   onClose: () => void,
-  onCreateOrg: (org: CreateOrgType) => void,
+  onCreateOrg: (org: $Shape<OrganizationPlainAttributes>) => void,
   onCreateUser: (user: CreateUserType) => void,
   // flag to display create user tab
   addUser: boolean,
   setAddUser: () => void,
+  open: boolean,
+  organization: ?OrganizationPlainAttributes,
+  // editing organization
+  edit: boolean,
+  // flag to display advanced fields
+  hideAdvancedFields: boolean,
 };
 
 type CreateUserType = {
@@ -72,11 +87,6 @@ type CreateUserType = {
   passwordConfirmation?: string,
 };
 
-type CreateOrgType = {
-  name: string,
-  networkIDs: Array<string>,
-  customDomains?: Array<string>,
-};
 /**
  * Create Orgnization Dilaog
  * This component displays a dialog with 2 tabs
@@ -91,13 +101,27 @@ export default function (props: Props) {
   });
 
   const [organization, setOrganization] = useState<OrganizationPlainAttributes>(
-    {},
+    props.organization || {},
   );
-  const [currentTab, setCurrentTab] = useState(props.addUser ? 1 : 0);
+  const [currentTab, setCurrentTab] = useState(0);
   const [shouldEnableAllNetworks, setShouldEnableAllNetworks] = useState(false);
   const [user, setUser] = useState<CreateUserType>({});
   const [createError, setCreateError] = useState('');
   const allNetworks = error || !response ? [] : response.data.sort();
+  const organizationDialogTitle =
+    currentTab === 1
+      ? 'Add User'
+      : props.edit
+      ? 'Edit Organization'
+      : 'Add Organization';
+
+  useEffect(() => {
+    setCurrentTab(props.addUser ? 1 : 0);
+  }, [props.addUser]);
+
+  useEffect(() => {
+    setOrganization({});
+  }, [props.open]);
 
   if (isLoading) {
     return <LoadingFillerBackdrop />;
@@ -116,23 +140,34 @@ export default function (props: Props) {
     allNetworks,
     shouldEnableAllNetworks,
     setShouldEnableAllNetworks,
+    edit: props.edit,
+    hideAdvancedFields: props.hideAdvancedFields,
   };
   const onSave = async () => {
     if (currentTab === 0) {
       if (!organization.name) {
         setCreateError('Name cannot be empty');
         return;
       }
-      const payload = {
+      const newOrg = {
         name: organization.name,
         networkIDs: shouldEnableAllNetworks
           ? allNetworks
           : Array.from(organization.networkIDs || []),
         customDomains: [], // TODO
-        // tabs: Array.from(tabs),
+        // default tab is nms
+        tabs: Array.from(organization.tabs || ['nms']),
+        csvCharset: '',
+        ssoSelectedType: 'none',
+        ssoCert: '',
+        ssoEntrypoint: '',
+        ssoIssuer: '',
+        ssoOidcClientID: '',
+        ssoOidcClientSecret: '',
+        ssoOidcConfigurationURL: '',
       };
 
-      props.onCreateOrg(payload);
+      props.onCreateOrg(newOrg);
       setCurrentTab(currentTab + 1);
       setCreateError('');
       props.setAddUser();
@@ -151,7 +186,7 @@ export default function (props: Props) {
         return;
       }
 
-      const payload: CreateUserType = {
+      const newUser: CreateUserType = {
         email: user.email,
         password: user.password,
         role: user.role,
@@ -160,17 +195,17 @@ export default function (props: Props) {
             ? []
             : Array.from(user.networkIDs || []),
       };
-      props.onCreateUser(payload);
+      props.onCreateUser(newUser);
     }
   };
 
   return (
     <Dialog
-      open={true}
+      open={props.open}
       onClose={props.onClose}
       maxWidth={'sm'}
       fullWidth={true}>
-      <DialogTitle>Add Organization</DialogTitle>
+      <DialogTitle>{organizationDialogTitle}</DialogTitle>
       <Tabs
         indicatorColor="primary"
         value={currentTab}