fix(workspaces): QA issues

frontend/src/features/workspace/WorkspaceContent.tsx

@@ -56,7 +56,7 @@ export const WorkspaceContent = (): JSX.Element => {
           templateRows="auto 1fr auto"
           minH="100vh"
           templateAreas=" 'header' 'main'"
-          overflowY="scroll"
+          overflowY="auto"
         >
           <Container
             gridArea="header"

frontend/src/features/workspace/WorkspacePage.tsx

@@ -132,7 +132,7 @@ export const WorkspacePage = (): JSX.Element => {
         )}
         {!isMobile && (
           <GridItem area="nav" borderRight="1px" borderRightColor="neutral.300">
-            <Box overflowY="scroll">
+            <Box overflowY="auto">
               <Stack minH="100vh">
                 <WorkspaceMenuHeader shouldShowAddWorkspaceButton />
                 <WorkspaceMenuTabs

frontend/src/features/workspace/components/EmptyWorkspace/EmptyWorkspace.tsx

@@ -35,10 +35,16 @@ export const EmptyWorkspace = ({
       bg="neutral.100"
       css={fillHeightCss}
     >
-      <Text as="h2" textStyle="h2" color="primary.500" mb="1rem">
+      <Text
+        as="h2"
+        textStyle="h2"
+        color="primary.500"
+        mb="1rem"
+        textAlign="center"
+      >
         {title}
       </Text>
-      <Text textStyle="body-1" color="secondary.500">
+      <Text textStyle="body-1" color="secondary.500" textAlign="center">
         {subText}
       </Text>
       {!!handleOpenCreateFormModal && (

frontend/src/features/workspace/components/WorkspaceFormRow/RowActions/RowActionsDrawer.tsx

@@ -67,6 +67,11 @@ export const RowActionsDrawer = ({
     [],
   )
 
+  const handleClose = () => {
+    setIsMoveWorkspace(false)
+    onClose()
+  }
+
   const handleMoveWorkspace = () => {
     setIsMoveWorkspace(true)
   }
@@ -79,7 +84,7 @@ export const RowActionsDrawer = ({
         icon={<BiDotsHorizontalRounded fontSize="1.25rem" />}
         onClick={onOpen}
       />
-      <Drawer placement="bottom" onClose={onClose} isOpen={isOpen}>
+      <Drawer placement="bottom" onClose={handleClose} isOpen={isOpen}>
         <DrawerOverlay />
         <DrawerContent borderTopRadius="0.25rem">
           <DrawerBody px={0} py="0.5rem">

frontend/src/features/workspace/components/WorkspaceHeader/WorkspaceEditMenu.tsx

@@ -30,11 +30,13 @@ export const WorkspaceEditMenu = (): JSX.Element => {
 
   return (
     <>
-      <RenameWorkspaceModal
-        onClose={renameModal.onClose}
-        isOpen={renameModal.isOpen}
-        activeWorkspace={activeWorkspace}
-      />
+      {renameModal.isOpen && (
+        <RenameWorkspaceModal
+          onClose={renameModal.onClose}
+          isOpen={renameModal.isOpen}
+          activeWorkspace={activeWorkspace}
+        />
+      )}
       <DeleteWorkspaceModal
         onClose={deleteModal.onClose}
         isOpen={deleteModal.isOpen}

frontend/src/features/workspace/components/WorkspaceHeader/WorkspaceHeader.tsx

@@ -137,6 +137,7 @@ export const WorkspaceHeader = ({
         isDisabled={isLoading}
         onClick={handleOpenCreateFormModal}
         leftIcon={<BiPlus fontSize="1.5rem" />}
+        minW="9.625rem"
       >
         Create form
       </Button>

frontend/src/utils/workspaceValidation.ts

@@ -1,13 +1,15 @@
 import { UseControllerProps } from 'react-hook-form'
 
-const MAX_TITLE_LENGTH = 50
-const MIN_TITLE_LENGTH = 4
+import {
+  WORKSPACE_MAX_TITLE_LENGTH,
+  WORKSPACE_MIN_TITLE_LENGTH,
+} from '~shared/constants'
 
 export const WORKSPACE_TITLE_VALIDATION_RULES: UseControllerProps['rules'] = {
   required: 'Folder name is required',
   maxLength: {
-    value: MAX_TITLE_LENGTH,
-    message: `Folder name should contain less than ${MAX_TITLE_LENGTH} characters`,
+    value: WORKSPACE_MAX_TITLE_LENGTH,
+    message: `Folder name should contain less than ${WORKSPACE_MAX_TITLE_LENGTH} characters`,
   },
   pattern: {
     value: /^[a-zA-Z0-9_\-./() &`;'"]*$/,
@@ -16,8 +18,8 @@ export const WORKSPACE_TITLE_VALIDATION_RULES: UseControllerProps['rules'] = {
   validate: {
     trimMinLength: (value: string) => {
       return (
-        value.trim().length >= MIN_TITLE_LENGTH ||
-        `Folder name should contain more than ${MIN_TITLE_LENGTH} characters`
+        value.trim().length >= WORKSPACE_MIN_TITLE_LENGTH ||
+        `Folder name should contain more than ${WORKSPACE_MIN_TITLE_LENGTH} characters`
       )
     },
   },

shared/constants/index.ts

@@ -4,3 +4,4 @@ export * from './links'
 export * from './feature-flags'
 export * from './errors'
 export * from './dates'
+export * from './workspace'

shared/constants/workspace.ts

@@ -0,0 +1,2 @@
+export const WORKSPACE_MAX_TITLE_LENGTH = 25
+export const WORKSPACE_MIN_TITLE_LENGTH = 4

src/app/models/workspace.server.model.ts

@@ -1,5 +1,9 @@
 import { ClientSession, Mongoose, Schema } from 'mongoose'
 
+import {
+  WORKSPACE_MAX_TITLE_LENGTH,
+  WORKSPACE_MIN_TITLE_LENGTH,
+} from '../../../shared/constants'
 import {
   IFormSchema,
   IUserSchema,
@@ -24,8 +28,14 @@ const compileWorkspaceModel = (db: Mongoose): IWorkspaceModel => {
           'Workspace title cannot contain special characters',
         ],
         required: 'Workspace title cannot be blank',
-        minlength: [4, 'Workspace title must be at least 4 characters'],
-        maxlength: [50, 'Workspace title can have a maximum of 50 characters'],
+        minlength: [
+          WORKSPACE_MIN_TITLE_LENGTH,
+          `Workspace title must be at least ${WORKSPACE_MIN_TITLE_LENGTH} characters`,
+        ],
+        maxlength: [
+          WORKSPACE_MAX_TITLE_LENGTH,
+          `Workspace title can have a maximum of ${WORKSPACE_MAX_TITLE_LENGTH} characters`,
+        ],
         trim: true,
       },
       admin: {

src/app/modules/workspace/workspace.controller.ts

@@ -4,6 +4,10 @@ import { StatusCodes } from 'http-status-codes'
 import { ErrorDto } from 'shared/types'
 import { WorkspaceDto } from 'shared/types/workspace'
 
+import {
+  WORKSPACE_MAX_TITLE_LENGTH,
+  WORKSPACE_MIN_TITLE_LENGTH,
+} from '../../../../shared/constants'
 import { createLoggerWithLabel } from '../../config/logger'
 import { ControllerHandler } from '../core/core.types'
 
@@ -15,7 +19,10 @@ const logger = createLoggerWithLabel(module)
 // Validators
 const workspaceTitleValidator = celebrate({
   [Segments.BODY]: {
-    title: Joi.string().min(4).max(50).required(),
+    title: Joi.string()
+      .min(WORKSPACE_MIN_TITLE_LENGTH)
+      .max(WORKSPACE_MAX_TITLE_LENGTH)
+      .required(),
   },
 })