feat: add Object Field Edit page sections (#2243)

Closes #2160, Closes #2163

front/src/modules/metadata/hooks/useObjectMetadata.ts

@@ -8,7 +8,7 @@ import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
 import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
 
 export const useObjectMetadata = () => {
-  const { metadataObjects } = useFindManyMetadataObjects();
+  const { metadataObjects, loading } = useFindManyMetadataObjects();
 
   const activeMetadataObjects = metadataObjects.filter(
     ({ isActive }) => isActive,
@@ -68,5 +68,6 @@ export const useObjectMetadata = () => {
     editObject,
     eraseObject,
     findActiveObjectBySlug,
+    loading,
   };
 };

front/src/modules/metadata/utils/getFieldSlug.ts

@@ -0,0 +1,6 @@
+import toKebabCase from 'lodash.kebabcase';
+
+import { Field } from '~/generated-metadata/graphql';
+
+export const getFieldSlug = (metadataField: Pick<Field, 'label'>) =>
+  toKebabCase(metadataField.label);

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -6,16 +6,18 @@ import { dataTypes } from '../constants/dataTypes';
 import { ObjectFieldDataType } from '../types/ObjectFieldDataType';
 
 type SettingsObjectFieldTypeSelectSectionProps = {
+  disabled?: boolean;
+  onChange?: (value: ObjectFieldDataType) => void;
   type: ObjectFieldDataType;
-  onChange: (value: ObjectFieldDataType) => void;
 };
 
 // TODO: remove "relation" type for now, add it back when the backend is ready.
 const { relation: _, ...dataTypesWithoutRelation } = dataTypes;
 
 export const SettingsObjectFieldTypeSelectSection = ({
-  type,
+  disabled,
   onChange,
+  type,
 }: SettingsObjectFieldTypeSelectSectionProps) => (
   <Section>
     <H2Title
@@ -23,6 +25,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
       description="The field's type and values."
     />
     <Select
+      disabled={disabled}
       dropdownScopeId="object-field-type-select"
       value={type}
       onChange={onChange}

front/src/modules/types/SettingsPath.ts

@@ -6,7 +6,7 @@ export enum SettingsPath {
   ObjectEdit = 'objects/:objectSlug/edit',
   ObjectNewFieldStep1 = 'objects/:objectSlug/new-field/step-1',
   ObjectNewFieldStep2 = 'objects/:objectSlug/new-field/step-2',
-  ObjectFieldEdit = 'objects/:objectSlug/:fieldName',
+  ObjectFieldEdit = 'objects/:objectSlug/:fieldSlug',
   NewObject = 'objects/new',
   WorkspaceMembersPage = 'workspace-members',
   Workspace = 'workspace',

front/src/modules/ui/display/icon/types/IconComponent.ts

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 
 export type IconComponent = FunctionComponent<{
+  color?: string;
   size?: number;
   stroke?: number;
 }>;

front/src/modules/ui/input/components/Select.tsx

@@ -12,19 +12,21 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { SelectHotkeyScope } from '../types/SelectHotkeyScope';
 
 export type SelectProps<Value extends string | number | null> = {
+  disabled?: boolean;
   dropdownScopeId: string;
-  onChange: (value: Value) => void;
+  onChange?: (value: Value) => void;
   options: { value: Value; label: string; Icon?: IconComponent }[];
   value?: Value;
 };
 
-const StyledContainer = styled.div`
+const StyledContainer = styled.div<{ disabled?: boolean }>`
   align-items: center;
   background-color: ${({ theme }) => theme.background.transparent.lighter};
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ theme }) => theme.font.color.primary};
-  cursor: pointer;
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.tertiary : theme.font.color.primary};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ theme }) => theme.spacing(8)};
@@ -38,7 +40,13 @@ const StyledLabel = styled.div`
   gap: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledIconChevronDown = styled(IconChevronDown)<{ disabled?: boolean }>`
+  color: ${({ disabled, theme }) =>
+    disabled ? theme.font.color.extraLight : theme.font.color.tertiary};
+`;
+
 export const Select = <Value extends string | number | null>({
+  disabled,
   dropdownScopeId,
   onChange,
   options,
@@ -50,28 +58,30 @@ export const Select = <Value extends string | number | null>({
 
   const { closeDropdown } = useDropdown({ dropdownScopeId });
 
-  return (
+  const selectControl = (
+    <StyledContainer disabled={disabled}>
+      <StyledLabel>
+        {!!selectedOption.Icon && (
+          <selectedOption.Icon
+            color={disabled ? theme.font.color.light : theme.font.color.primary}
+            size={theme.icon.size.md}
+            stroke={theme.icon.stroke.sm}
+          />
+        )}
+        {selectedOption.label}
+      </StyledLabel>
+      <StyledIconChevronDown disabled={disabled} size={theme.icon.size.md} />
+    </StyledContainer>
+  );
+
+  return disabled ? (
+    selectControl
+  ) : (
     <DropdownScope dropdownScopeId={dropdownScopeId}>
       <Dropdown
         dropdownMenuWidth={176}
         dropdownPlacement="bottom-start"
-        clickableComponent={
-          <StyledContainer>
-            <StyledLabel>
-              {!!selectedOption.Icon && (
-                <selectedOption.Icon
-                  size={theme.icon.size.md}
-                  stroke={theme.icon.stroke.sm}
-                />
-              )}
-              {selectedOption.label}
-            </StyledLabel>
-            <IconChevronDown
-              color={theme.font.color.tertiary}
-              size={theme.icon.size.md}
-            />
-          </StyledContainer>
-        }
+        clickableComponent={selectControl}
         dropdownComponents={
           <DropdownMenuItemsContainer>
             {options.map((option) => (
@@ -80,7 +90,7 @@ export const Select = <Value extends string | number | null>({
                 LeftIcon={option.Icon}
                 text={option.label}
                 onClick={() => {
-                  onChange(option.value);
+                  onChange?.(option.value);
                   closeDropdown();
                 }}
               />

front/src/modules/ui/input/components/__stories__/Select.stories.tsx

@@ -49,3 +49,7 @@ export const Open: Story = {
     await userEvent.click(selectLabel);
   },
 };
+
+export const Disabled: Story = {
+  args: { disabled: true },
+};