Merge pull request #337 from akhilmhdh/feat/new-org-settings

Revamped the org settings page

frontend/src/components/v2/Card/Card.tsx

@@ -3,14 +3,19 @@ import { twMerge } from 'tailwind-merge';
 
 export type CardTitleProps = {
   children: ReactNode;
-  subTitle?: string;
+  subTitle?: ReactNode;
   className?: string;
 };
 
 export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
-  <div className={twMerge('px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600', className)}>
+  <div
+    className={twMerge(
+      'px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600',
+      className
+    )}
+  >
     {children}
-    {subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
+    {subTitle && <p className="pt-2 text-sm font-normal text-gray-400">{subTitle}</p>}
   </div>
 );
 

frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx

@@ -5,7 +5,7 @@ import { useToggle } from '@app/hooks';
 import { Button } from '../Button';
 import { FormControl } from '../FormControl';
 import { Input } from '../Input';
-import { Modal, ModalContent } from '../Modal';
+import { Modal, ModalClose, ModalContent } from '../Modal';
 
 type Props = {
   isOpen?: boolean;
@@ -64,9 +64,11 @@ export const DeleteActionModal = ({
             >
               Delete
             </Button>
-            <Button variant="plain" colorSchema="secondary" onClick={onClose}>
-              Cancel
-            </Button>
+            <ModalClose asChild>
+              <Button variant="plain" colorSchema="secondary" onClick={onClose}>
+                Cancel
+              </Button>
+            </ModalClose>{' '}
           </div>
         }
         onClose={onClose}

frontend/src/components/v2/Input/Input.tsx

@@ -84,19 +84,19 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   ): JSX.Element => {
     return (
       <div className={inputParentContainerVariants({ isRounded, isError, isFullWidth, variant })}>
-        {leftIcon && <span className="absolute left-0 ml-2">{leftIcon}</span>}
+        {leftIcon && <span className="absolute left-0 ml-3">{leftIcon}</span>}
         <input
           {...props}
           required={isRequired}
           ref={ref}
           disabled={isDisabled}
           className={twMerge(
-            leftIcon ? 'pl-9' : 'pl-2.5',
-            rightIcon ? 'pr-9' : 'pr-2.5',
+            leftIcon ? 'pl-10' : 'pl-2.5',
+            rightIcon ? 'pr-10' : 'pr-2.5',
             inputVariants({ className, isError, size, isRounded, variant })
           )}
         />
-        {rightIcon && <span className="absolute right-0 mr-2">{rightIcon}</span>}
+        {rightIcon && <span className="absolute right-0 mr-3">{rightIcon}</span>}
       </div>
     );
   }

frontend/src/components/v2/Modal/Modal.tsx

@@ -9,7 +9,7 @@ import { IconButton } from '../IconButton';
 
 export type ModalContentProps = DialogPrimitive.DialogContentProps & {
   title?: ReactNode;
-  subTitle?: string;
+  subTitle?: ReactNode;
   footerContent?: ReactNode;
   onClose?: () => void;
 };

frontend/src/components/v2/Select/Select.tsx

@@ -14,18 +14,28 @@ type Props = {
   dropdownContainerClassName?: string;
   isLoading?: boolean;
   position?: 'item-aligned' | 'popper';
+  isDisabled?: boolean;
   icon?: IconProp;
 };
 
-export type SelectProps = SelectPrimitive.SelectProps & Props;
+export type SelectProps = Omit<SelectPrimitive.SelectProps, 'disabled'> & Props;
 
 export const Select = forwardRef<HTMLButtonElement, SelectProps>(
   (
-    { children, placeholder, className, isLoading, dropdownContainerClassName, position, ...props },
+    {
+      children,
+      placeholder,
+      className,
+      isLoading,
+      isDisabled,
+      dropdownContainerClassName,
+      position,
+      ...props
+    },
     ref
   ): JSX.Element => {
     return (
-      <SelectPrimitive.Root {...props}>
+      <SelectPrimitive.Root {...props} disabled={isDisabled}>
         <SelectPrimitive.Trigger
           ref={ref}
           className={twMerge(
@@ -34,10 +44,10 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             className
           )}
         >
-          <SelectPrimitive.Value placeholder={placeholder}> 
+          <SelectPrimitive.Value placeholder={placeholder}>
             {props.icon ? <FontAwesomeIcon icon={props.icon} /> : placeholder}
           </SelectPrimitive.Value>
-          {!props.disabled && (
+          {!isDisabled && (
             <SelectPrimitive.Icon className="ml-3">
               <FontAwesomeIcon icon={faChevronDown} size="sm" />
             </SelectPrimitive.Icon>
@@ -46,7 +56,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         <SelectPrimitive.Portal>
           <SelectPrimitive.Content
             className={twMerge(
-              'relative top-1 overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md z-[100]',
+              'relative top-1 z-[100] overflow-hidden rounded-md bg-bunker-800 font-inter text-bunker-100 shadow-md',
               dropdownContainerClassName
             )}
             position={position}
@@ -89,11 +99,12 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
       <SelectPrimitive.Item
         {...props}
         className={twMerge(
-          `relative flex cursor-pointer
-          select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
+          `relative mb-0.5 flex
+          cursor-pointer select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
           outline-none transition-all hover:bg-mineshaft-500`,
           isSelected && 'bg-primary',
-          isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
+          isDisabled &&
+            'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-mineshaft-600',
           className
         )}
         ref={forwardedRef}

frontend/src/components/v2/Tag/Tag.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { cva, VariantProps } from 'cva';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  children: ReactNode;
+  className?: string;
+} & VariantProps<typeof tagVariants>;
+
+const tagVariants = cva('inline-flex whitespace-nowrap text-sm rounded-md mx-1 text-bunker-200 ', {
+  variants: {
+    colorSchema: {
+      gray: 'bg-mineshaft-500',
+      red: 'bg-red/80 text-bunker-100'
+    },
+    size: {
+      sm: 'px-2 py-1'
+    }
+  }
+});
+
+export const Tag = ({ children, className, colorSchema = 'gray', size = 'sm' }: Props) => (
+  <div className={twMerge(tagVariants({ colorSchema, className, size }))}>{children}</div>
+);

frontend/src/components/v2/Tag/index.tsx

@@ -0,0 +1 @@
+export { Tag } from './Tag';

frontend/src/components/v2/index.tsx

@@ -12,5 +12,6 @@ export * from './Select';
 export * from './Spinner';
 export * from './Switch';
 export * from './Table';
+export * from './Tag';
 export * from './TextArea';
 export * from './UpgradePlanModal';

frontend/src/hooks/api/incidentContacts/index.tsx

@@ -0,0 +1,5 @@
+export {
+  useAddIncidentContact,
+  useDeleteIncidentContact,
+  useGetOrgIncidentContact
+} from './queries';

frontend/src/hooks/api/incidentContacts/queries.tsx

@@ -0,0 +1,57 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { AddIncidentContactDTO, DeleteIncidentContactDTO, IncidentContact } from './types';
+
+const incidentContactKeys = {
+  getAllContact: (orgId: string) => ['org-incident-contacts', { orgId }] as const
+};
+
+const fetchOrgIncidentContacts = async (orgId: string) => {
+  const { data } = await apiRequest.get<{ incidentContactsOrg: IncidentContact[] }>(
+    `/api/v1/organization/${orgId}/incidentContactOrg`
+  );
+
+  return data.incidentContactsOrg;
+};
+
+export const useGetOrgIncidentContact = (orgId: string) =>
+  useQuery({
+    queryKey: incidentContactKeys.getAllContact(orgId),
+    queryFn: () => fetchOrgIncidentContacts(orgId),
+    enabled: Boolean(orgId)
+  });
+
+// mutation
+export const useAddIncidentContact = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, AddIncidentContactDTO>({
+    mutationFn: async ({ orgId, email }) => {
+      const { data } = await apiRequest.post(`/api/v1/organization/${orgId}/incidentContactOrg`, {
+        email
+      });
+      return data;
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(incidentContactKeys.getAllContact(orgId));
+    }
+  });
+};
+
+export const useDeleteIncidentContact = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, DeleteIncidentContactDTO>({
+    mutationFn: async ({ orgId, email }) => {
+      const { data } = await apiRequest.delete(`/api/v1/organization/${orgId}/incidentContactOrg`, {
+        data: { email }
+      });
+      return data;
+    },
+    onSuccess: (_, { orgId }) => {
+      queryClient.invalidateQueries(incidentContactKeys.getAllContact(orgId));
+    }
+  });
+};

frontend/src/hooks/api/incidentContacts/types.ts

@@ -0,0 +1,18 @@
+export type IncidentContact = {
+  _id: string;
+  email: string;
+  organization: string;
+  __v: number;
+  createdAt: Date;
+  updatedAt: Date;
+};
+
+export type DeleteIncidentContactDTO = {
+  orgId: string;
+  email: string;
+};
+
+export type AddIncidentContactDTO = {
+  orgId: string;
+  email: string;
+};

frontend/src/hooks/api/index.tsx

@@ -1,4 +1,5 @@
 export * from './auth';
+export * from './incidentContacts';
 export * from './keys';
 export * from './organization';
 export * from './serviceTokens';

frontend/src/hooks/api/organization/index.ts

@@ -1 +1 @@
-export { useGetOrganization } from './queries';
+export { useGetOrganization, useRenameOrg } from './queries';

frontend/src/hooks/api/organization/queries.tsx

@@ -1,8 +1,8 @@
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { apiRequest } from '@app/config/request';
 
-import { Organization } from './types';
+import { Organization, RenameOrgDTO } from './types';
 
 const organizationKeys = {
   getUserOrganization: ['organization'] as const
@@ -16,3 +16,16 @@ const fetchUserOrganization = async () => {
 
 export const useGetOrganization = () =>
   useQuery({ queryKey: organizationKeys.getUserOrganization, queryFn: fetchUserOrganization });
+
+// mutation
+export const useRenameOrg = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, RenameOrgDTO>({
+    mutationFn: ({ newOrgName, orgId }) =>
+      apiRequest.patch(`/api/v1/organization/${orgId}/name`, { name: newOrgName }),
+    onSuccess: () => {
+      queryClient.invalidateQueries(organizationKeys.getUserOrganization);
+    }
+  });
+};

frontend/src/hooks/api/organization/types.ts

@@ -4,3 +4,8 @@ export type Organization = {
   createAt: string;
   updatedAt: string;
 };
+
+export type RenameOrgDTO = {
+  orgId: string;
+  newOrgName: string;
+};

frontend/src/hooks/api/types.ts

@@ -1,14 +1,17 @@
 export type { GetAuthTokenAPI } from './auth/types';
+export type { IncidentContact } from './incidentContacts/types';
 export type { UserWsKeyPair } from './keys/types';
 export type { Organization } from './organization/types';
 export type { CreateServiceTokenDTO, ServiceToken } from './serviceTokens/types';
 export type { GetSubscriptionPlan, SubscriptionPlan } from './subscriptions/types';
-export type { User } from './users/types';
+export type { AddUserToWsDTO, AddUserToWsRes, OrgUser, User } from './users/types';
 export type {
   CreateEnvironmentDTO,
+  CreateWorkspaceDTO,
   DeleteEnvironmentDTO,
   DeleteWorkspaceDTO,
   RenameWorkspaceDTO,
+  ToggleAutoCapitalizationDTO,
   UpdateEnvironmentDTO,
   Workspace,
   WorkspaceEnv,

frontend/src/hooks/api/users/index.tsx

@@ -1,7 +1,10 @@
 export {
   fetchOrgUsers,
+  useAddUserToOrg,
   useAddUserToWs,
+  useDeleteOrgMembership,
   useGetOrgUsers,
   useGetUser,
-  useLogoutUser
+  useLogoutUser,
+  useUpdateOrgUserRole
 } from './queries';