diff --git a/front/src/modules/metadata/hooks/useObjectMetadata.ts b/front/src/modules/metadata/hooks/useObjectMetadata.ts
index addab6790..0b30dc02f 100644
--- a/front/src/modules/metadata/hooks/useObjectMetadata.ts
+++ b/front/src/modules/metadata/hooks/useObjectMetadata.ts
@@ -1,15 +1,35 @@
-import { useRecoilValue } from 'recoil';
+import { MetadataObject } from '../types/MetadataObject';
-import { activeMetadataObjectsSelector } from '../states/selectors/activeMetadataObjectsSelector';
-import { disabledMetadataObjectsSelector } from '../states/selectors/disabledMetadataObjectsSelector';
+import { useFindManyMetadataObjects } from './useFindManyMetadataObjects';
+import { useUpdateOneMetadataObject } from './useUpdateOneMetadataObject';
export const useObjectMetadata = () => {
- const activeMetadataObjects = useRecoilValue(activeMetadataObjectsSelector);
- const disabledMetadataObjects = useRecoilValue(
- disabledMetadataObjectsSelector,
+ const { metadataObjects } = useFindManyMetadataObjects();
+
+ const activeMetadataObjects = metadataObjects.filter(
+ ({ isActive }) => isActive,
+ );
+ const disabledMetadataObjects = metadataObjects.filter(
+ ({ isActive }) => !isActive,
);
+ const { updateOneMetadataObject } = useUpdateOneMetadataObject();
+
+ const activateObject = (metadataObject: MetadataObject) =>
+ updateOneMetadataObject({
+ idToUpdate: metadataObject.id,
+ updatePayload: { isActive: true },
+ });
+
+ const disableObject = (metadataObject: MetadataObject) =>
+ updateOneMetadataObject({
+ idToUpdate: metadataObject.id,
+ updatePayload: { isActive: false },
+ });
+
return {
+ activateObject,
+ disableObject,
activeObjects: activeMetadataObjects,
disabledObjects: disabledMetadataObjects,
};
diff --git a/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
index 442705acd..3e29adb18 100644
--- a/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
+++ b/front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
@@ -1,81 +1,113 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
-import { IconDotsVertical } from '@/ui/display/icon';
+import { IconArchive, IconDotsVertical, IconPencil } from '@/ui/display/icon';
import { Tag } from '@/ui/display/tag/components/Tag';
import { H2Title } from '@/ui/display/typography/components/H2Title';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { Section } from '@/ui/layout/section/components/Section';
-import { TableCell } from '@/ui/layout/table/components/TableCell';
-import { TableRow } from '@/ui/layout/table/components/TableRow';
+import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
type SettingsAboutSectionProps = {
iconKey?: string;
isCustom: boolean;
name: string;
+ onDisable: () => void;
+ onEdit: () => void;
};
-const StyledIconTableCell = styled(TableCell)`
- justify-content: center;
- padding-right: ${({ theme }) => theme.spacing(1)};
-`;
-
-const StyledTableRow = styled(TableRow)`
+const StyledCard = styled.div`
+ align-items: center;
background-color: ${({ theme }) => theme.background.secondary};
border: ${({ theme }) => `1px solid ${theme.border.color.medium}`};
+ border-radius: ${({ theme }) => theme.border.radius.sm};
+ display: flex;
+ gap: ${({ theme }) => theme.spacing(2)};
+ padding: ${({ theme }) => theme.spacing(2)};
`;
-const StyledNameTableCell = styled(TableCell)`
+const StyledName = styled.div`
color: ${({ theme }) => theme.font.color.primary};
+ display: flex;
gap: ${({ theme }) => theme.spacing(2)};
+ margin-right: auto;
`;
const StyledTag = styled(Tag)`
box-sizing: border-box;
- height: ${({ theme }) => theme.spacing(4)};
+ height: ${({ theme }) => theme.spacing(6)};
`;
-const StyledIconDotsVertical = styled(IconDotsVertical)`
- color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
-const StyledFlexContainer = styled.div`
- display: flex;
- justify-content: flex-end;
-`;
+const dropdownScopeId = 'settings-object-edit-about-menu-dropdown';
export const SettingsAboutSection = ({
iconKey = '',
isCustom,
name,
+ onDisable,
+ onEdit,
}: SettingsAboutSectionProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(iconKey);
+ const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+ const handleEdit = () => {
+ onEdit();
+ closeDropdown();
+ };
+
+ const handleDisable = () => {
+ onDisable();
+ closeDropdown();
+ };
+
return (
-
-
+
+
{!!Icon && }
{name}
-
-
-
- {isCustom ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
+
+ {isCustom ? (
+
+ ) : (
+
+ )}
+
+
+ }
+ dropdownComponents={
+
+
+
+
+
+
+ }
+ dropdownHotkeyScope={{
+ scope: dropdownScopeId,
+ }}
+ />
+
+
);
};
diff --git a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
index ea969e25a..568def3c5 100644
--- a/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
+++ b/front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
@@ -4,24 +4,37 @@ import { IconArchiveOff } from '@/ui/input/constants/icons';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
type SettingsObjectDisabledMenuDropDownProps = {
scopeKey: string;
- handleActivate: () => void;
- handleErase: () => void;
+ onActivate: () => void;
+ onErase: () => void;
};
export const SettingsObjectDisabledMenuDropDown = ({
scopeKey,
- handleActivate,
- handleErase,
+ onActivate,
+ onErase,
}: SettingsObjectDisabledMenuDropDownProps) => {
+ const dropdownScopeId = scopeKey + '-settings-object-disabled-menu-dropdown';
+
+ const { closeDropdown } = useDropdown({ dropdownScopeId });
+
+ const handleActivate = () => {
+ onActivate();
+ closeDropdown();
+ };
+
+ const handleErase = () => {
+ onErase();
+ closeDropdown();
+ };
+
return (
-
+
@@ -44,7 +57,7 @@ export const SettingsObjectDisabledMenuDropDown = ({
}
dropdownHotkeyScope={{
- scope: scopeKey + '-settings-object-disabled-menu-dropdown',
+ scope: dropdownScopeId,
}}
/>
diff --git a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx
index 97e67f749..b3344c548 100644
--- a/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx
+++ b/front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx
@@ -23,8 +23,8 @@ const meta: Meta = {
component: SettingsObjectDisabledMenuDropDown,
args: {
scopeKey: 'settings-object-disabled-menu-dropdown',
- handleActivate: handleActivateMockFunction,
- handleErase: handleEraseMockFunction,
+ onActivate: handleActivateMockFunction,
+ onErase: handleEraseMockFunction,
},
decorators: [ComponentDecorator, ClearMocksDecorator],
parameters: {
diff --git a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
index cdca7fbd5..46a037a4a 100644
--- a/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectDetail.tsx
@@ -30,7 +30,7 @@ export const SettingsObjectDetail = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
- const { activeObjects } = useObjectMetadata();
+ const { activeObjects, disableObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
@@ -62,6 +62,13 @@ export const SettingsObjectDetail = () => {
iconKey={activeObject.icon ?? undefined}
name={activeObject.labelPlural || ''}
isCustom={activeObject.isCustom}
+ onDisable={() => {
+ disableObject(activeObject);
+ navigate('/settings/objects');
+ }}
+ onEdit={() =>
+ navigate(`/settings/objects/${pluralObjectName}/edit`)
+ }
/>
)}
@@ -76,15 +83,17 @@ export const SettingsObjectDetail = () => {
Data type
-
- {activeFields?.map((fieldItem) => (
-
- ))}
-
+ {!!activeFields?.length && (
+
+ {activeFields.map((fieldItem) => (
+
+ ))}
+
+ )}
{!!disabledFields?.length && (
{disabledFields.map((fieldItem) => (
diff --git a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
index cb2d49000..2e5dc3a5e 100644
--- a/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectEdit.tsx
@@ -17,7 +17,7 @@ export const SettingsObjectEdit = () => {
const navigate = useNavigate();
const { pluralObjectName = '' } = useParams();
- const { activeObjects } = useObjectMetadata();
+ const { activeObjects, disableObject } = useObjectMetadata();
const activeObject = activeObjects.find(
(activeObject) => activeObject.namePlural === pluralObjectName,
);
@@ -52,17 +52,20 @@ export const SettingsObjectEdit = () => {
pluralName={activeObject.labelPlural}
description={activeObject.description ?? undefined}
/>
+
+
+
>
)}
-
);
diff --git a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
index ec4b4785e..ebf7fc445 100644
--- a/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjectNewField/SettingsObjectNewFieldStep1.tsx
@@ -87,15 +87,17 @@ export const SettingsObjectNewFieldStep1 = () => {
Data type
-
- {activeFields?.map((fieldItem) => (
-
- ))}
-
+ {!!activeFields?.length && (
+
+ {activeFields.map((fieldItem) => (
+
+ ))}
+
+ )}
{!!disabledFields?.length && (
{disabledFields.map((fieldItem) => (
diff --git a/front/src/pages/settings/data-model/SettingsObjects.tsx b/front/src/pages/settings/data-model/SettingsObjects.tsx
index 2f79fd4fc..657d61287 100644
--- a/front/src/pages/settings/data-model/SettingsObjects.tsx
+++ b/front/src/pages/settings/data-model/SettingsObjects.tsx
@@ -33,7 +33,8 @@ export const SettingsObjects = () => {
const theme = useTheme();
const navigate = useNavigate();
- const { activeObjects, disabledObjects } = useObjectMetadata();
+ const { activateObject, activeObjects, disabledObjects } =
+ useObjectMetadata();
return (
@@ -62,23 +63,25 @@ export const SettingsObjects = () => {
Instances
-
- {activeObjects.map((objectItem) => (
-
- }
- onClick={() =>
- navigate(`/settings/objects/${objectItem.namePlural}`)
- }
- />
- ))}
-
+ {!!activeObjects.length && (
+
+ {activeObjects.map((objectItem) => (
+
+ }
+ onClick={() =>
+ navigate(`/settings/objects/${objectItem.namePlural}`)
+ }
+ />
+ ))}
+
+ )}
{!!disabledObjects.length && (
{disabledObjects.map((objectItem) => (
@@ -88,8 +91,8 @@ export const SettingsObjects = () => {
action={
undefined}
- handleErase={() => undefined}
+ onActivate={() => activateObject(objectItem)}
+ onErase={() => undefined}
/>
}
/>