feat: add Settings/Accounts Connected Accounts section accounts list (#2953)

Closes #2887
2023-12-12 16:03:39 +01:00
parent 2a4ab2ffd3
commit 0048216abf
24 changed files with 437 additions and 201 deletions
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx
@ -7,6 +7,8 @@ import { FieldContext } from '@/object-record/field/contexts/FieldContext';
 import { BooleanFieldInput } from '@/object-record/field/meta-types/input/components/BooleanFieldInput';
 import { RatingFieldInput } from '@/object-record/field/meta-types/input/components/RatingFieldInput';
 import { Tag } from '@/ui/display/tag/components/Tag';
+import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { Field, FieldMetadataType } from '~/generated-metadata/graphql';

 import { SettingsObjectFieldPreviewValueEffect } from '../components/SettingsObjectFieldPreviewValueEffect';
@ -23,13 +25,14 @@ export type SettingsObjectFieldPreviewProps = {
  shrink?: boolean;
 };

-const StyledContainer = styled.div`
-  background-color: ${({ theme }) => theme.background.secondary};
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
+const StyledCard = styled(Card)`
  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-sizing: border-box;
  color: ${({ theme }) => theme.font.color.primary};
  max-width: 480px;
+`;
+
+const StyledCardContent = styled(CardContent)`
+  display: grid;
  padding: ${({ theme }) => theme.spacing(2)};
 `;

@ -95,65 +98,67 @@ export const SettingsObjectFieldPreview = ({
  });

  return (
-    <StyledContainer className={className}>
-      <StyledObjectSummary>
-        <StyledObjectName>
-          {!!ObjectIcon && (
-            <ObjectIcon
-              size={theme.icon.size.sm}
-              stroke={theme.icon.stroke.sm}
-            />
-          )}
-          {objectMetadataItem?.labelPlural}
-        </StyledObjectName>
-        {objectMetadataItem?.isCustom ? (
-          <Tag color="orange" text="Custom" />
-        ) : (
-          <Tag color="blue" text="Standard" />
-        )}
-      </StyledObjectSummary>
-      <SettingsObjectFieldPreviewValueEffect
-        entityId={entityId}
-        fieldName={fieldName}
-        value={value}
-      />
-      <StyledFieldPreview shrink={shrink}>
-        <StyledFieldLabel>
-          {!!FieldIcon && (
-            <FieldIcon
-              size={theme.icon.size.md}
-              stroke={theme.icon.stroke.sm}
-            />
-          )}
-          {fieldMetadata.label}:
-        </StyledFieldLabel>
-        <FieldContext.Provider
-          value={{
-            entityId,
-            isLabelIdentifier: false,
-            fieldDefinition: {
-              type: parseFieldType(fieldMetadata.type),
-              iconName: 'FieldIcon',
-              fieldMetadataId: fieldMetadata.id || '',
-              label: fieldMetadata.label,
-              metadata: {
-                fieldName,
-                relationObjectMetadataNameSingular:
-                  relationObjectMetadataItem?.nameSingular,
-              },
-            },
-            hotkeyScope: 'field-preview',
-          }}
-        >
-          {fieldMetadata.type === FieldMetadataType.Boolean ? (
-            <BooleanFieldInput readonly />
-          ) : fieldMetadata.type === FieldMetadataType.Rating ? (
-            <RatingFieldInput readonly />
+    <StyledCard className={className}>
+      <StyledCardContent>
+        <StyledObjectSummary>
+          <StyledObjectName>
+            {!!ObjectIcon && (
+              <ObjectIcon
+                size={theme.icon.size.sm}
+                stroke={theme.icon.stroke.sm}
+              />
+            )}
+            {objectMetadataItem?.labelPlural}
+          </StyledObjectName>
+          {objectMetadataItem?.isCustom ? (
+            <Tag color="orange" text="Custom" />
          ) : (
-            <FieldDisplay />
+            <Tag color="blue" text="Standard" />
          )}
-        </FieldContext.Provider>
-      </StyledFieldPreview>
-    </StyledContainer>
+        </StyledObjectSummary>
+        <SettingsObjectFieldPreviewValueEffect
+          entityId={entityId}
+          fieldName={fieldName}
+          value={value}
+        />
+        <StyledFieldPreview shrink={shrink}>
+          <StyledFieldLabel>
+            {!!FieldIcon && (
+              <FieldIcon
+                size={theme.icon.size.md}
+                stroke={theme.icon.stroke.sm}
+              />
+            )}
+            {fieldMetadata.label}:
+          </StyledFieldLabel>
+          <FieldContext.Provider
+            value={{
+              entityId,
+              isLabelIdentifier: false,
+              fieldDefinition: {
+                type: parseFieldType(fieldMetadata.type),
+                iconName: 'FieldIcon',
+                fieldMetadataId: fieldMetadata.id || '',
+                label: fieldMetadata.label,
+                metadata: {
+                  fieldName,
+                  relationObjectMetadataNameSingular:
+                    relationObjectMetadataItem?.nameSingular,
+                },
+              },
+              hotkeyScope: 'field-preview',
+            }}
+          >
+            {fieldMetadata.type === FieldMetadataType.Boolean ? (
+              <BooleanFieldInput readonly />
+            ) : fieldMetadata.type === FieldMetadataType.Rating ? (
+              <RatingFieldInput readonly />
+            ) : (
+              <FieldDisplay />
+            )}
+          </FieldContext.Provider>
+        </StyledFieldPreview>
+      </StyledCardContent>
+    </StyledCard>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
@ -71,6 +71,7 @@ export const SettingsObjectFieldRelationForm = ({
        <Select
          label="Relation type"
          dropdownScopeId="relation-type-select"
+          fullWidth
          disabled={disableRelationEdition}
          value={values.type}
          options={Object.entries(relationTypes).map(
@ -85,6 +86,7 @@ export const SettingsObjectFieldRelationForm = ({
        <Select
          label="Object destination"
          dropdownScopeId="object-destination-select"
+          fullWidth
          disabled={disableRelationEdition}
          value={values.objectMetadataId}
          options={objectMetadataItems.map((objectMetadataItem) => ({
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx
@ -3,7 +3,9 @@ import { DropResult } from '@hello-pangea/dnd';
 import { v4 } from 'uuid';

 import { IconPlus } from '@/ui/display/icon';
-import { Button } from '@/ui/input/button/components/Button';
+import { LightButton } from '@/ui/input/button/components/LightButton';
+import { CardContent } from '@/ui/layout/card/components/CardContent';
+import { CardFooter } from '@/ui/layout/card/components/CardFooter';
 import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem';
 import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList';
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
@ -20,8 +22,7 @@ type SettingsObjectFieldSelectFormProps = {
  values: SettingsObjectFieldSelectFormValues;
 };

-const StyledContainer = styled.div`
-  padding: ${({ theme }) => theme.spacing(4)};
+const StyledContainer = styled(CardContent)`
  padding-bottom: ${({ theme }) => theme.spacing(3.5)};
 `;

@ -35,13 +36,14 @@ const StyledLabel = styled.span`
  text-transform: uppercase;
 `;

-const StyledButton = styled(Button)`
-  border-bottom: 0;
-  border-left: 0;
-  border-radius: 0;
-  border-right: 0;
+const StyledFooter = styled(CardFooter)`
+  background-color: ${({ theme }) => theme.background.secondary};
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledButton = styled(LightButton)`
  justify-content: center;
-  text-align: center;
+  width: 100%;
 `;

 const getNextColor = (currentColor: ThemeColor) => {
@ -117,21 +119,22 @@ export const SettingsObjectFieldSelectForm = ({
          }
        />
      </StyledContainer>
-      <StyledButton
-        title="Add option"
-        fullWidth
-        Icon={IconPlus}
-        onClick={() =>
-          onChange([
-            ...values,
-            {
-              color: getNextColor(values[values.length - 1].color),
-              label: `Option ${values.length + 1}`,
-              value: v4(),
-            },
-          ])
-        }
-      />
+      <StyledFooter>
+        <StyledButton
+          title="Add option"
+          Icon={IconPlus}
+          onClick={() =>
+            onChange([
+              ...values,
+              {
+                color: getNextColor(values[values.length - 1].color),
+                label: `Option ${values.length + 1}`,
+                value: v4(),
+              },
+            ])
+          }
+        />
+      </StyledFooter>
    </>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeCard.tsx
@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import styled from '@emotion/styled';

 import { Card } from '@/ui/layout/card/components/Card';
+import { CardContent } from '@/ui/layout/card/components/CardContent';

 type SettingsObjectFieldTypeCardProps = {
  className?: string;
@ -9,14 +10,10 @@ type SettingsObjectFieldTypeCardProps = {
  form?: ReactNode;
 };

-const StyledPreviewContainer = styled(Card)`
-  background-color: ${({ theme }) => theme.background.transparent.lighter};
-  padding: ${({ theme }) => theme.spacing(4)};
+const StyledCard = styled(Card)``;

-  &:not(:last-child) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
+const StyledPreviewContainer = styled(CardContent)`
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
 `;

 const StyledTitle = styled.h3`
@ -32,11 +29,7 @@ const StyledPreviewContent = styled.div`
  gap: 6px;
 `;

-const StyledFormContainer = styled(Card)`
-  border-top: 0;
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  overflow: hidden;
+const StyledFormContainer = styled(CardContent)`
  padding: 0;
 `;

@ -46,12 +39,12 @@ export const SettingsObjectFieldTypeCard = ({
  form,
 }: SettingsObjectFieldTypeCardProps) => {
  return (
-    <div className={className}>
-      <StyledPreviewContainer>
+    <StyledCard className={className}>
+      <StyledPreviewContainer divider={!!form}>
        <StyledTitle>Preview</StyledTitle>
        <StyledPreviewContent>{preview}</StyledPreviewContent>
      </StyledPreviewContainer>
      {!!form && <StyledFormContainer>{form}</StyledFormContainer>}
-    </div>
+    </StyledCard>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx
@ -77,6 +77,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
        description="The field's type and values."
      />
      <Select
+        fullWidth
        disabled={!!fieldMetadata?.id}
        dropdownScopeId="object-field-type-select"
        value={values?.type}