feat: add active/disabled fields table to New Field - Step 1 page (#2069)

Closes #1785

front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -1,7 +1,8 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { IconDotsVertical } from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
@@ -9,6 +10,11 @@ import { ObjectFieldItem } from '../../types/ObjectFieldItem';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
 
+type SettingsObjectFieldItemTableRowProps = {
+  ActionIcon: IconComponent;
+  fieldItem: ObjectFieldItem;
+};
+
 export const StyledObjectFieldTableRow = styled(TableRow)`
   grid-template-columns: 180px 148px 148px 36px;
 `;
@@ -23,15 +29,10 @@ const StyledIconTableCell = styled(TableCell)`
   padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledIconDotsVertical = styled(IconDotsVertical)`
-  color: ${({ theme }) => theme.font.color.tertiary};
-`;
-
 export const SettingsObjectFieldItemTableRow = ({
+  ActionIcon,
   fieldItem,
-}: {
-  fieldItem: ObjectFieldItem;
-}) => {
+}: SettingsObjectFieldItemTableRowProps) => {
   const theme = useTheme();
 
   return (
@@ -47,10 +48,7 @@ export const SettingsObjectFieldItemTableRow = ({
         <SettingsObjectFieldDataType value={fieldItem.dataType} />
       </TableCell>
       <StyledIconTableCell>
-        <StyledIconDotsVertical
-          size={theme.icon.size.md}
-          stroke={theme.icon.stroke.sm}
-        />
+        <LightIconButton Icon={ActionIcon} accent="tertiary" />
       </StyledIconTableCell>
     </StyledObjectFieldTableRow>
   );

front/src/modules/ui/input/button/components/LightIconButton.tsx

@@ -104,7 +104,7 @@ export const LightIconButton = ({
       size={size}
       active={active}
     >
-      {Icon && <Icon size={theme.icon.size.md} />}
+      {Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.sm} />}
     </StyledButton>
   );
 };

front/src/modules/ui/layout/section/components/Section.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 
 type SectionProps = {
   children: ReactNode;
+  className?: string;
   alignment?: SectionAlignment;
   fullWidth?: boolean;
   fontColor?: SectionFontColor;
@@ -31,11 +32,13 @@ const StyledSection = styled.div<{
 
 export const Section = ({
   children,
+  className,
   alignment = SectionAlignment.Left,
   fullWidth = true,
   fontColor = SectionFontColor.Primary,
 }: SectionProps) => (
   <StyledSection
+    className={className}
     alignment={alignment}
     fullWidth={fullWidth}
     fontColor={fontColor}