Update SettingsObjectAboutSection.tsx changed "Disable" CTA to "Deact… (#4175)

* Update SettingsObjectAboutSection.tsx changed "Disable" CTA to "Deactivate"

* Update SettingsObjects.tsx

Additional changes: Disabled sections to inactive

* Update SettingsObjectAboutSection.tsx

I think you meant changing Disable to Deactivate

* Update and rename SettingsObjectDisabledMenuDropDown.tsx to SettingsObjectInactiveMenuDropDown.tsx

 additional changes to #4153

* Update SettingsObjects.tsx

* Update and rename SettingsObjectDisabledMenuDropDown.stories.tsx to SettingsObjectInactiveMenuDropDown.stories.tsx

* fix typescript errors

* respect issue requirements

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>

packages/twenty-front/src/modules/object-metadata/hooks/useObjectMetadataItemForSettings.ts

@@ -16,7 +16,7 @@ export const useObjectMetadataItemForSettings = () => {
   const activeObjectMetadataItems = objectMetadataItems.filter(
     ({ isActive, isSystem }) => isActive && !isSystem,
   );
-  const disabledObjectMetadataItems = objectMetadataItems.filter(
+  const inactiveObjectMetadataItems = objectMetadataItems.filter(
     ({ isActive, isSystem }) => !isActive && !isSystem,
   );
 
@@ -88,7 +88,7 @@ export const useObjectMetadataItemForSettings = () => {
     activateObjectMetadataItem,
     activeObjectMetadataItems,
     createObjectMetadataItem,
-    disabledObjectMetadataItems,
+    inactiveObjectMetadataItems,
     disableObjectMetadataItem,
     editObjectMetadataItem,
     eraseObjectMetadataItem,

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx

@@ -19,7 +19,7 @@ type SettingsAboutSectionProps = {
   iconKey?: string;
   isCustom: boolean;
   name: string;
-  onDisable: () => void;
+  onDeactivate: () => void;
   onEdit: () => void;
 };
 
@@ -49,7 +49,7 @@ export const SettingsAboutSection = ({
   iconKey = '',
   isCustom,
   name,
-  onDisable,
+  onDeactivate,
   onEdit,
 }: SettingsAboutSectionProps) => {
   const theme = useTheme();
@@ -63,8 +63,8 @@ export const SettingsAboutSection = ({
     closeDropdown();
   };
 
-  const handleDisable = () => {
+  const handleDeactivate = () => {
-    onDisable();
+    onDeactivate();
     closeDropdown();
   };
 
@@ -92,9 +92,9 @@ export const SettingsAboutSection = ({
                     onClick={handleEdit}
                   />
                   <MenuItem
-                    text="Disable"
+                    text="Deactivate"
                     LeftIcon={IconArchive}
-                    onClick={handleDisable}
+                    onClick={handleDeactivate}
                   />
                 </DropdownMenuItemsContainer>
               </DropdownMenu>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx

@@ -14,7 +14,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
 type SettingsObjectFieldActiveActionDropdownProps = {
   isCustomField?: boolean;
-  onDisable?: () => void;
+  onDeactivate?: () => void;
   onEdit: () => void;
   onSetAsLabelIdentifier?: () => void;
   scopeKey: string;
@@ -22,7 +22,7 @@ type SettingsObjectFieldActiveActionDropdownProps = {
 
 export const SettingsObjectFieldActiveActionDropdown = ({
   isCustomField,
-  onDisable,
+  onDeactivate,
   onEdit,
   onSetAsLabelIdentifier,
   scopeKey,
@@ -36,8 +36,8 @@ export const SettingsObjectFieldActiveActionDropdown = ({
     closeDropdown();
   };
 
-  const handleDisable = () => {
+  const handleDeactivate = () => {
-    onDisable?.();
+    onDeactivate?.();
     closeDropdown();
   };
 
@@ -67,11 +67,11 @@ export const SettingsObjectFieldActiveActionDropdown = ({
                 onClick={handleSetAsLabelIdentifier}
               />
             )}
-            {!!onDisable && (
+            {!!onDeactivate && (
               <MenuItem
-                text="Disable"
+                text="Deactivate"
                 LeftIcon={IconArchive}
-                onClick={handleDisable}
+                onClick={handleDeactivate}
               />
             )}
           </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx

@@ -6,17 +6,17 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
-type SettingsObjectFieldDisabledActionDropdownProps = {
+type SettingsObjectFieldInactiveActionDropdownProps = {
   isCustomField?: boolean;
   onActivate: () => void;
   onErase: () => void;
   scopeKey: string;
 };
 
-export const SettingsObjectFieldDisabledActionDropdown = ({
+export const SettingsObjectFieldInactiveActionDropdown = ({
   onActivate,
   scopeKey,
-}: SettingsObjectFieldDisabledActionDropdownProps) => {
+}: SettingsObjectFieldInactiveActionDropdownProps) => {
   const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`;
 
   const { closeDropdown } = useDropdown(dropdownId);

packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectInactiveMenuDropDown.tsx

@@ -6,20 +6,20 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 
-type SettingsObjectDisabledMenuDropDownProps = {
+type SettingsObjectInactiveMenuDropDownProps = {
   isCustomObject: boolean;
   onActivate: () => void;
   onErase: () => void;
   scopeKey: string;
 };
 
-export const SettingsObjectDisabledMenuDropDown = ({
+export const SettingsObjectInactiveMenuDropDown = ({
   onActivate,
   scopeKey,
   onErase,
   isCustomObject,
-}: SettingsObjectDisabledMenuDropDownProps) => {
+}: SettingsObjectInactiveMenuDropDownProps) => {
-  const dropdownId = `${scopeKey}-settings-object-disabled-menu-dropdown`;
+  const dropdownId = `${scopeKey}-settings-object-inactive-menu-dropdown`;
 
   const { closeDropdown } = useDropdown(dropdownId);
 

packages/twenty-front/src/modules/settings/data-model/objects/__stories__/SettingsObjectInactiveMenuDropDown.stories.tsx

@@ -3,7 +3,7 @@ import { expect, fn, userEvent, within } from '@storybook/test';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import { SettingsObjectDisabledMenuDropDown } from '../SettingsObjectDisabledMenuDropDown';
+import { SettingsObjectInactiveMenuDropDown } from '../SettingsObjectInactiveMenuDropDown';
 
 const handleActivateMockFunction = fn();
 const handleEraseMockFunction = fn();
@@ -16,11 +16,11 @@ const ClearMocksDecorator: Decorator = (Story, context) => {
   return <Story />;
 };
 
-const meta: Meta<typeof SettingsObjectDisabledMenuDropDown> = {
+const meta: Meta<typeof SettingsObjectInactiveMenuDropDown> = {
-  title: 'Modules/Settings/DataModel/SettingsObjectDisabledMenuDropDown',
+  title: 'Modules/Settings/DataModel/SettingsObjectInactiveMenuDropDown',
-  component: SettingsObjectDisabledMenuDropDown,
+  component: SettingsObjectInactiveMenuDropDown,
   args: {
-    scopeKey: 'settings-object-disabled-menu-dropdown',
+    scopeKey: 'settings-object-inactive-menu-dropdown',
     onActivate: handleActivateMockFunction,
     onErase: handleEraseMockFunction,
   },
@@ -31,7 +31,7 @@ const meta: Meta<typeof SettingsObjectDisabledMenuDropDown> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof SettingsObjectDisabledMenuDropDown>;
+type Story = StoryObj<typeof SettingsObjectInactiveMenuDropDown>;
 
 export const Default: Story = {};
 

packages/twenty-front/src/pages/settings/data-model/SettingsObjectDetail.tsx

@@ -10,7 +10,7 @@ import { isLabelIdentifierField } from '@/object-metadata/utils/isLabelIdentifie
 import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
 import { SettingsAboutSection } from '@/settings/data-model/object-details/components/SettingsObjectAboutSection';
 import { SettingsObjectFieldActiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown';
-import { SettingsObjectFieldDisabledActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
+import { SettingsObjectFieldInactiveActionDropdown } from '@/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown';
 import {
   SettingsObjectFieldItemTableRow,
   StyledObjectFieldTableRow,
@@ -94,7 +94,7 @@ export const SettingsObjectDetail = () => {
           iconKey={activeObjectMetadataItem.icon ?? undefined}
           name={activeObjectMetadataItem.labelPlural || ''}
           isCustom={activeObjectMetadataItem.isCustom}
-          onDisable={handleDisableObject}
+          onDeactivate={handleDisableObject}
           onEdit={() => navigate('./edit')}
         />
         <Section>
@@ -155,7 +155,7 @@ export const SettingsObjectDetail = () => {
                                   )
                               : undefined
                           }
-                          onDisable={
+                          onDeactivate={
                             isLabelIdentifier
                               ? undefined
                               : () => handleDisableField(activeMetadataField)
@@ -168,7 +168,7 @@ export const SettingsObjectDetail = () => {
               </TableSection>
             )}
             {!!disabledMetadataFields.length && (
-              <TableSection isInitiallyExpanded={false} title="Disabled">
+              <TableSection isInitiallyExpanded={false} title="Inactive">
                 {disabledMetadataFields.map((disabledMetadataField) => (
                   <SettingsObjectFieldItemTableRow
                     key={disabledMetadataField.id}
@@ -179,7 +179,7 @@ export const SettingsObjectDetail = () => {
                     }
                     fieldMetadataItem={disabledMetadataField}
                     ActionIcon={
-                      <SettingsObjectFieldDisabledActionDropdown
+                      <SettingsObjectFieldInactiveActionDropdown
                         isCustomField={!!disabledMetadataField.isCustom}
                         scopeKey={disabledMetadataField.id}
                         onActivate={() =>

packages/twenty-front/src/pages/settings/data-model/SettingsObjects.tsx

@@ -11,7 +11,7 @@ import {
   StyledObjectTableRow,
 } from '@/settings/data-model/object-details/components/SettingsObjectItemTableRow';
 import { SettingsObjectCoverImage } from '@/settings/data-model/objects/SettingsObjectCoverImage';
-import { SettingsObjectDisabledMenuDropDown } from '@/settings/data-model/objects/SettingsObjectDisabledMenuDropDown';
+import { SettingsObjectInactiveMenuDropDown } from '@/settings/data-model/objects/SettingsObjectInactiveMenuDropDown';
 import { IconChevronRight, IconPlus, IconSettings } from '@/ui/display/icon';
 import { H1Title } from '@/ui/display/typography/components/H1Title';
 import { H2Title } from '@/ui/display/typography/components/H2Title';
@@ -37,7 +37,7 @@ export const SettingsObjects = () => {
   const {
     activateObjectMetadataItem,
     activeObjectMetadataItems,
-    disabledObjectMetadataItems,
+    inactiveObjectMetadataItems,
     eraseObjectMetadataItem,
   } = useObjectMetadataItemForSettings();
 
@@ -89,25 +89,25 @@ export const SettingsObjects = () => {
                   ))}
                 </TableSection>
               )}
-              {!!disabledObjectMetadataItems.length && (
+              {!!inactiveObjectMetadataItems.length && (
-                <TableSection title="Disabled">
+                <TableSection title="Inactive">
-                  {disabledObjectMetadataItems.map(
+                  {inactiveObjectMetadataItems.map(
-                    (disabledObjectMetadataItem) => (
+                    (inactiveObjectMetadataItem) => (
                       <SettingsObjectItemTableRow
-                        key={disabledObjectMetadataItem.namePlural}
+                        key={inactiveObjectMetadataItem.namePlural}
-                        objectItem={disabledObjectMetadataItem}
+                        objectItem={inactiveObjectMetadataItem}
                         action={
-                          <SettingsObjectDisabledMenuDropDown
+                          <SettingsObjectInactiveMenuDropDown
-                            isCustomObject={disabledObjectMetadataItem.isCustom}
+                            isCustomObject={inactiveObjectMetadataItem.isCustom}
-                            scopeKey={disabledObjectMetadataItem.namePlural}
+                            scopeKey={inactiveObjectMetadataItem.namePlural}
                             onActivate={() =>
                               activateObjectMetadataItem(
-                                disabledObjectMetadataItem,
+                                inactiveObjectMetadataItem,
                               )
                             }
                             onErase={() =>
                               eraseObjectMetadataItem(
-                                disabledObjectMetadataItem,
+                                inactiveObjectMetadataItem,
                               )
                             }
                           />