feat: activate and disable objects (#2194)

Closes #2144, Closes #2148, Closes #2154

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,
   };

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 (
     <Section>
       <H2Title title="About" description="Manage your object" />
-      <StyledTableRow>
-        <StyledNameTableCell>
+      <StyledCard>
+        <StyledName>
           {!!Icon && <Icon size={theme.icon.size.md} />}
           {name}
-        </StyledNameTableCell>
-        <StyledFlexContainer>
-          <TableCell>
-            {isCustom ? (
-              <StyledTag color="orange" text="Custom" />
-            ) : (
-              <StyledTag color="blue" text="Standard" />
-            )}
-          </TableCell>
-          <StyledIconTableCell>
-            <StyledIconDotsVertical
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-            />
-          </StyledIconTableCell>
-        </StyledFlexContainer>
-      </StyledTableRow>
+        </StyledName>
+        {isCustom ? (
+          <StyledTag color="orange" text="Custom" />
+        ) : (
+          <StyledTag color="blue" text="Standard" />
+        )}
+        <DropdownScope dropdownScopeId={dropdownScopeId}>
+          <Dropdown
+            clickableComponent={
+              <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
+            }
+            dropdownComponents={
+              <DropdownMenu width="160px">
+                <DropdownMenuItemsContainer>
+                  <MenuItem
+                    text="Edit"
+                    LeftIcon={IconPencil}
+                    onClick={handleEdit}
+                  />
+                  <MenuItem
+                    text="Disable"
+                    LeftIcon={IconArchive}
+                    onClick={handleDisable}
+                  />
+                </DropdownMenuItemsContainer>
+              </DropdownMenu>
+            }
+            dropdownHotkeyScope={{
+              scope: dropdownScopeId,
+            }}
+          />
+        </DropdownScope>
+      </StyledCard>
     </Section>
   );
 };

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 (
-    <DropdownScope
-      dropdownScopeId={scopeKey + '-settings-object-disabled-menu-dropdown'}
-    >
+    <DropdownScope dropdownScopeId={dropdownScopeId}>
       <Dropdown
         clickableComponent={
           <LightIconButton Icon={IconDotsVertical} accent="tertiary" />
@@ -44,7 +57,7 @@ export const SettingsObjectDisabledMenuDropDown = ({
           </DropdownMenu>
         }
         dropdownHotkeyScope={{
-          scope: scopeKey + '-settings-object-disabled-menu-dropdown',
+          scope: dropdownScopeId,
         }}
       />
     </DropdownScope>

front/src/modules/settings/data-model/objects/__stories__/SettingsObjectDisabledMenuDropDown.stories.tsx

@@ -23,8 +23,8 @@ const meta: Meta<typeof SettingsObjectDisabledMenuDropDown> = {
   component: SettingsObjectDisabledMenuDropDown,
   args: {
     scopeKey: 'settings-object-disabled-menu-dropdown',
-    handleActivate: handleActivateMockFunction,
-    handleErase: handleEraseMockFunction,
+    onActivate: handleActivateMockFunction,
+    onErase: handleEraseMockFunction,
   },
   decorators: [ComponentDecorator, ClearMocksDecorator],
   parameters: {