refactor: rename admin page variables in line with UI (#3481)

* refactor: rename "Builder" to "CreatePage" where relevant

* refactor: rename "ResponsesPage" to "ResultsPage"

* refactor: move admin-form-builder into admin-form/create

* refactor: rename BuilderDrawer to BuilderAndDesignDrawer

* refactor: rename to BuilderAndDesignPlaceholder

* refactor: rename design dir to builder-and-design

* refactor: rename RESPONSES to RESULTS in subroute

* docs: update outdated variable names in comments

frontend/src/app/AppRouter.tsx

@@ -2,7 +2,7 @@ import { lazy, Suspense } from 'react'
 import { Route, Routes } from 'react-router-dom'
 
 import {
-  ADMINFORM_RESPONSES_SUBROUTE,
+  ADMINFORM_RESULTS_SUBROUTE,
   ADMINFORM_ROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
   LOGIN_ROUTE,
@@ -11,9 +11,9 @@ import {
 } from '~constants/routes'
 
 import { AdminFormLayout } from '~features/admin-form/common/AdminFormLayout'
-import ResponsesPage from '~features/admin-form/responses/ResponsesPage'
+import { CreatePage } from '~features/admin-form/create/CreatePage'
+import ResultsPage from '~features/admin-form/responses/ResultsPage'
 import { SettingsPage } from '~features/admin-form/settings/SettingsPage'
-import { FormBuilderPage } from '~features/admin-form-builder/FormBuilderPage'
 
 import { PrivateElement } from './PrivateElement'
 import { PublicElement } from './PublicElement'
@@ -48,15 +48,12 @@ export const AppRouter = (): JSX.Element => {
           path={`${ADMINFORM_ROUTE}/:formId`}
           element={<PrivateElement element={<AdminFormLayout />} />}
         >
-          <Route index element={<FormBuilderPage />} />
+          <Route index element={<CreatePage />} />
           <Route
             path={ADMINFORM_SETTINGS_SUBROUTE}
             element={<SettingsPage />}
           />
-          <Route
-            path={ADMINFORM_RESPONSES_SUBROUTE}
-            element={<ResponsesPage />}
-          />
+          <Route path={ADMINFORM_RESULTS_SUBROUTE} element={<ResultsPage />} />
         </Route>
         <Route path="*" element={<div>404!!!</div>} />
       </Routes>

frontend/src/constants/routes.ts

@@ -12,4 +12,4 @@ export const ADMINFORM_ROUTE = '/admin/form'
 /** Build tab has no subroute, its the index admin form route. */
 export const ADMINFORM_BUILD_SUBROUTE = ''
 export const ADMINFORM_SETTINGS_SUBROUTE = 'settings'
-export const ADMINFORM_RESPONSES_SUBROUTE = 'responses'
+export const ADMINFORM_RESULTS_SUBROUTE = 'results'

frontend/src/features/admin-form/AdminFormBuilderPage.stories.tsx → frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx

@@ -6,12 +6,12 @@ import { getAdminFormResponse } from '~/mocks/msw/handlers/admin-form'
 
 import { viewports } from '~utils/storybook'
 
-import { FormBuilderPage } from '~features/admin-form-builder/FormBuilderPage'
+import { CreatePage } from '~features/admin-form/create/CreatePage'
 
 import { AdminFormLayout } from './common/AdminFormLayout'
 
 export default {
-  title: 'Pages/AdminFormPage/Builder',
+  title: 'Pages/AdminFormPage/Create',
   // component: To be implemented,
   decorators: [
     (storyFn) => {
@@ -36,7 +36,7 @@ export default {
   },
 } as Meta
 
-const Template: Story = () => <FormBuilderPage />
+const Template: Story = () => <CreatePage />
 export const Desktop = Template.bind({})
 
 export const Tablet = Template.bind({})

frontend/src/features/admin-form/AdminFormResponsesPage.stories.tsx → frontend/src/features/admin-form/AdminFormResultsPage.stories.tsx

@@ -9,17 +9,17 @@ import { viewports } from '~utils/storybook'
 import { AdminFormLayout } from './common/AdminFormLayout'
 
 export default {
-  title: 'Pages/AdminFormPage/Responses',
+  title: 'Pages/AdminFormPage/Results',
   // component: To be implemented,
   decorators: [
     (storyFn) => {
       // MemoryRouter is used so react-router-dom#Link components can work
-      // (and also to force the initial tab the page renders to be the settings tab).
+      // (and also to force the initial tab the page renders to be the results tab).
       return (
-        <MemoryRouter initialEntries={['/12345/responses']}>
+        <MemoryRouter initialEntries={['/12345/results']}>
           <Routes>
             <Route path={'/:formId'} element={<AdminFormLayout />}>
-              <Route path="responses" element={storyFn()} />
+              <Route path="results" element={storyFn()} />
             </Route>
           </Routes>
         </MemoryRouter>

frontend/src/features/admin-form/common/components/AdminFormNavbar/AdminFormNavbarContainer.tsx

@@ -4,7 +4,7 @@ import { Tabs, useBreakpointValue } from '@chakra-ui/react'
 
 import {
   ADMINFORM_BUILD_SUBROUTE,
-  ADMINFORM_RESPONSES_SUBROUTE,
+  ADMINFORM_RESULTS_SUBROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
   ROOT_ROUTE,
 } from '~constants/routes'
@@ -16,7 +16,7 @@ import { AdminFormNavbar } from './AdminFormNavbar'
 const ADMINFORM_ROUTES = [
   ADMINFORM_BUILD_SUBROUTE,
   ADMINFORM_SETTINGS_SUBROUTE,
-  ADMINFORM_RESPONSES_SUBROUTE,
+  ADMINFORM_RESULTS_SUBROUTE,
 ]
 
 const useAdminFormNavbar = () => {

frontend/src/features/admin-form/create/CreatePage.tsx

@@ -0,0 +1,16 @@
+import { Flex } from '@chakra-ui/react'
+
+import { CreatePageSidebar } from './common/components/BuilderSidebar'
+import { CreatePageContent } from './common/components/CreatePageContent'
+import { CreatePageDrawerProvider } from './CreatePageDrawerContext'
+
+export const CreatePage = (): JSX.Element => {
+  return (
+    <Flex h="100%" w="100%" overflow="auto" bg="neutral.200" direction="row">
+      <CreatePageDrawerProvider>
+        <CreatePageSidebar />
+        <CreatePageContent />
+      </CreatePageDrawerProvider>
+    </Flex>
+  )
+}

frontend/src/features/admin-form-builder/BuilderDrawerContext.tsx → frontend/src/features/admin-form/create/CreatePageDrawerContext.tsx

@@ -9,15 +9,18 @@ import {
 } from 'react'
 import { isEmpty } from 'lodash'
 
-import { EditFieldStoreState, useEditFieldStore } from './design/editFieldStore'
+import {
+  EditFieldStoreState,
+  useEditFieldStore,
+} from './builder-and-design/editFieldStore'
 
 export enum DrawerTabs {
   Builder,
   Design,
   Logic,
 }
 
-type BuilderDrawerContextProps = {
+type CreatePageDrawerContextProps = {
   activeTab: DrawerTabs | null
   isShowDrawer: boolean
   handleClose: (clearActiveTab?: boolean) => void
@@ -26,32 +29,32 @@ type BuilderDrawerContextProps = {
   handleLogicClick: () => void
 }
 
-const BuilderDrawerContext = createContext<
-  BuilderDrawerContextProps | undefined
+const CreatePageDrawerContext = createContext<
+  CreatePageDrawerContextProps | undefined
 >(undefined)
 
 /**
  * Provider component that makes drawer context object available to any
- * child component that calls `useBuilderDrawer()`.
+ * child component that calls `useCreatePageDrawer()`.
  */
-export const BuilderDrawerProvider: FC = ({ children }) => {
+export const CreatePageDrawerProvider: FC = ({ children }) => {
   const context = useProvideDrawerContext()
 
   return (
-    <BuilderDrawerContext.Provider value={context}>
+    <CreatePageDrawerContext.Provider value={context}>
       {children}
-    </BuilderDrawerContext.Provider>
+    </CreatePageDrawerContext.Provider>
   )
 }
 
 /**
  * Hook for components nested in ProvideAuth component to get the current auth object.
  */
-export const useBuilderDrawer = (): BuilderDrawerContextProps => {
-  const context = useContext(BuilderDrawerContext)
+export const useCreatePageDrawer = (): CreatePageDrawerContextProps => {
+  const context = useContext(CreatePageDrawerContext)
   if (!context) {
     throw new Error(
-      `useBuilderDrawer must be used within a BuilderDrawerProvider component`,
+      `useCreatePageDrawer must be used within a CreatePageDrawerProvider component`,
     )
   }
   return context
@@ -66,7 +69,7 @@ const editFieldStoreSelector = (state: EditFieldStoreState) => {
   }
 }
 
-const useProvideDrawerContext = (): BuilderDrawerContextProps => {
+const useProvideDrawerContext = (): CreatePageDrawerContextProps => {
   const [activeTab, setActiveTab] = useState<DrawerTabs | null>(null)
   const { hasActiveField, clearActiveField } = useEditFieldStore(
     editFieldStoreSelector,

frontend/src/features/admin-form-builder/design/BuilderDesignContainer.tsx → frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContainer.tsx

@@ -8,8 +8,8 @@ import {
 
 import { useAdminForm } from '~features/admin-form/common/queries'
 
-import { BuilderDrawer } from './components/BuilderDrawer'
-import { BuilderDesign } from './BuilderDesign'
+import { BuilderAndDesignDrawer } from './components/BuilderAndDesignDrawer'
+import { BuilderAndDesignContent } from './BuilderAndDesignContent'
 import {
   CREATE_FIELD_DROP_ID,
   CREATE_FIELD_FIELDS_ORDERED,
@@ -44,7 +44,7 @@ const getDestinationDom = (dropabbleId: unknown) => {
   return destinationDOM
 }
 
-export const BuilderDesignContainer = (): JSX.Element => {
+export const BuilderAndDesignContainer = (): JSX.Element => {
   const { data } = useAdminForm()
   const { mutateReorderField } = useMutateFormFields()
   const setFieldToCreate = useEditFieldStore(setFieldToCreateSelector)
@@ -193,8 +193,8 @@ export const BuilderDesignContainer = (): JSX.Element => {
       onDragUpdate={onDragUpdate}
       onDragEnd={onDragEnd}
     >
-      <BuilderDrawer />
-      <BuilderDesign placeholderProps={placeholderProps} />
+      <BuilderAndDesignDrawer />
+      <BuilderAndDesignContent placeholderProps={placeholderProps} />
     </DragDropContext>
   )
 }

frontend/src/features/admin-form-builder/design/BuilderDesign.tsx → frontend/src/features/admin-form/create/builder-and-design/BuilderAndDesignContent.tsx

@@ -4,20 +4,20 @@ import { Box, Flex } from '@chakra-ui/react'
 
 import { AdminFormDto } from '~shared/types/form'
 
-import { BuilderDesignPlaceholder } from './components/BuilderDesignPlaceholder'
+import { BuilderAndDesignPlaceholder } from './components/BuilderAndDesignPlaceholder'
 import FieldRow from './components/FieldRow'
 import { FIELD_LIST_DROP_ID } from './constants'
 import { useEditFieldStore } from './editFieldStore'
 import { DndPlaceholderProps } from './types'
 import { useBuilderFormFields } from './useBuilderFormFields'
 
-interface BuilderDesignProps {
+interface BuilderAndDesignContentProps {
   placeholderProps: DndPlaceholderProps
 }
 
-export const BuilderDesign = ({
+export const BuilderAndDesignContent = ({
   placeholderProps,
-}: BuilderDesignProps): JSX.Element => {
+}: BuilderAndDesignContentProps): JSX.Element => {
   const { clearActiveField, clearFieldToCreate } = useEditFieldStore(
     useCallback((state) => {
       return {
@@ -65,7 +65,7 @@ export const BuilderDesign = ({
                 <BuilderFields fields={builderFields} />
                 {provided.placeholder}
                 {snapshot.isDraggingOver ? (
-                  <BuilderDesignPlaceholder
+                  <BuilderAndDesignPlaceholder
                     placeholderProps={placeholderProps}
                   />
                 ) : null}

frontend/src/features/admin-form-builder/design/components/BuilderDrawer/BuilderDrawer.tsx → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/BuilderAndDesignDrawer.tsx

@@ -4,7 +4,10 @@ import { AnimatePresence } from 'framer-motion'
 
 import { MotionBox } from '~components/motion'
 
-import { DrawerTabs, useBuilderDrawer } from '../../../BuilderDrawerContext'
+import {
+  DrawerTabs,
+  useCreatePageDrawer,
+} from '../../../CreatePageDrawerContext'
 import { activeFieldSelector, useEditFieldStore } from '../../editFieldStore'
 
 import { CreateFieldDrawer } from './CreateFieldDrawer'
@@ -29,8 +32,8 @@ const DRAWER_MOTION_PROPS = {
   },
 }
 
-export const BuilderDrawer = (): JSX.Element => {
-  const { isShowDrawer, activeTab } = useBuilderDrawer()
+export const BuilderAndDesignDrawer = (): JSX.Element => {
+  const { isShowDrawer, activeTab } = useCreatePageDrawer()
   const activeField = useEditFieldStore(activeFieldSelector)
 
   const renderDrawerContent = useMemo(() => {

frontend/src/features/admin-form-builder/design/components/BuilderDrawer/CreateFieldDrawer/CreateFieldDrawer.tsx → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/CreateFieldDrawer/CreateFieldDrawer.tsx

@@ -22,7 +22,7 @@ import {
   CREATE_PAGE_DROP_ID,
   CREATE_PAGE_FIELDS_ORDERED,
 } from '../../../constants'
-import { BuilderDrawerCloseButton } from '../BuilderDrawerCloseButton'
+import { CreatePageDrawerCloseButton } from '../CreatePageDrawerCloseButton'
 
 import { DraggableCreateFieldOption } from './CreateFieldOption'
 
@@ -36,7 +36,7 @@ export const CreateFieldDrawer = (): JSX.Element => {
           <Text textStyle="subhead-3" color="secondary.500" mb="1rem">
             Builder
           </Text>
-          <BuilderDrawerCloseButton />
+          <CreatePageDrawerCloseButton />
         </Flex>
         <TabList mx="-1rem" w="100%">
           <Tab isDisabled={isLoading}>Basic</Tab>

frontend/src/features/admin-form-builder/design/components/BuilderDrawer/BuilderDrawerCloseButton.tsx → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/CreatePageDrawerCloseButton.tsx

@@ -2,10 +2,10 @@ import { useCallback } from 'react'
 import { BiX } from 'react-icons/bi'
 import { CloseButton } from '@chakra-ui/react'
 
-import { useBuilderDrawer } from '~features/admin-form-builder/BuilderDrawerContext'
+import { useCreatePageDrawer } from '~features/admin-form/create/CreatePageDrawerContext'
 
-export const BuilderDrawerCloseButton = (): JSX.Element => {
-  const { handleClose } = useBuilderDrawer()
+export const CreatePageDrawerCloseButton = (): JSX.Element => {
+  const { handleClose } = useCreatePageDrawer()
 
   const handleCloseDrawer = useCallback(() => {
     handleClose(/* clearActiveTab= */ true)

frontend/src/features/admin-form-builder/design/components/BuilderDrawer/EditFieldDrawer/EditFieldDrawer.tsx → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/EditFieldDrawer/EditFieldDrawer.tsx

@@ -12,7 +12,7 @@ import {
   useEditFieldStore,
 } from '../../../editFieldStore'
 import { transformBasicFieldToText } from '../../../utils'
-import { BuilderDrawerCloseButton } from '../BuilderDrawerCloseButton'
+import { CreatePageDrawerCloseButton } from '../CreatePageDrawerCloseButton'
 
 import { EditCheckbox } from './EditCheckbox'
 import { EditHeader } from './EditHeader'
@@ -49,7 +49,7 @@ export const EditFieldDrawer = (): JSX.Element | null => {
           icon={<BiLeftArrowAlt />}
         />
         <Box m="auto">Edit {basicFieldText} field</Box>
-        <BuilderDrawerCloseButton />
+        <CreatePageDrawerCloseButton />
       </Flex>
       {/* key required to refresh content whenever the active field changes */}
       <MemoFieldDrawerContent key={activeField._id} field={activeField} />

frontend/src/features/admin-form-builder/design/components/BuilderDrawer/index.ts → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignDrawer/index.ts

@@ -1,3 +1,3 @@
-export * from './BuilderDrawer'
+export * from './BuilderAndDesignDrawer'
 export * from './CreateFieldDrawer'
 export * from './EditFieldDrawer'

frontend/src/features/admin-form-builder/design/components/BuilderDesignPlaceholder.tsx → frontend/src/features/admin-form/create/builder-and-design/components/BuilderAndDesignPlaceholder.tsx

@@ -9,7 +9,7 @@ export interface BuilderDesignPlaceholderProps {
   placeholderProps: DndPlaceholderProps
 }
 
-export const BuilderDesignPlaceholder = ({
+export const BuilderAndDesignPlaceholder = ({
   placeholderProps,
 }: BuilderDesignPlaceholderProps): JSX.Element | null => {
   const renderedContents = useMemo(() => {

frontend/src/features/admin-form/create/builder-and-design/index.ts

@@ -0,0 +1 @@
+export { BuilderAndDesignContainer as default } from './BuilderAndDesignContainer'