Merge branch 'main' into 7417-workflows-i-can-send-emails-using-the-e…

…mail-account
twentyhq · Oct 8, 2024 · 82b9586 · 82b9586
2 parents 7c2cc7e + fcd60be
commit 82b9586
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 63 deletions.
diff --git a/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts b/packages/twenty-front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts
@@ -67,8 +67,8 @@ export const useOpenCreateActivityDrawer = ({
     targetableObjects: ActivityTargetableObject[];
     customAssignee?: WorkspaceMember;
   }) => {
-    openRightDrawer(RightDrawerPages.ViewRecord);
     setIsNewViewableRecordLoading(true);
+    openRightDrawer(RightDrawerPages.ViewRecord);
     setViewableRecordId(null);
     setViewableRecordNameSingular(activityObjectNameSingular);
 

diff --git a/...enty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx b/...enty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
@@ -1,5 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
+import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
 import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
@@ -18,7 +19,19 @@ export const RightDrawerRecord = () => {
   const viewableRecordNameSingular = useRecoilValue(
     viewableRecordNameSingularState,
   );
+  const isNewViewableRecordLoading = useRecoilValue(
+    isNewViewableRecordLoadingState,
+  );
   const viewableRecordId = useRecoilValue(viewableRecordIdState);
+
+  if (!viewableRecordNameSingular && !isNewViewableRecordLoading) {
+    throw new Error(`Object name is not defined`);
+  }
+
+  if (!viewableRecordId && !isNewViewableRecordLoading) {
+    throw new Error(`Record id is not defined`);
+  }
+
   const { objectNameSingular, objectRecordId } = useRecordShowPage(
     viewableRecordNameSingular ?? '',
     viewableRecordId ?? '',
@@ -27,12 +40,15 @@ export const RightDrawerRecord = () => {
   return (
     <StyledRightDrawerRecord>
       <RecordFieldValueSelectorContextProvider>
-        <RecordValueSetterEffect recordId={objectRecordId} />
+        {!isNewViewableRecordLoading && (
+          <RecordValueSetterEffect recordId={objectRecordId} />
+        )}
         <RecordShowContainer
           objectNameSingular={objectNameSingular}
           objectRecordId={objectRecordId}
           loading={false}
           isInRightDrawer={true}
+          isNewRightDrawerItemLoading={isNewViewableRecordLoading}
         />
       </RecordFieldValueSelectorContextProvider>
     </StyledRightDrawerRecord>

diff --git a/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx b/...ges/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
@@ -21,7 +21,6 @@ import { RecordInlineCell } from '@/object-record/record-inline-cell/components/
 import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
 import { PropertyBoxSkeletonLoader } from '@/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader';
 import { InlineCellHotkeyScope } from '@/object-record/record-inline-cell/types/InlineCellHotkeyScope';
-import { isNewViewableRecordLoadingState } from '@/object-record/record-right-drawer/states/isNewViewableRecordLoading';
 import { RecordDetailDuplicatesSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailDuplicatesSection';
 import { RecordDetailRelationSection } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationSection';
 import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState';
@@ -49,13 +48,15 @@ type RecordShowContainerProps = {
   objectRecordId: string;
   loading: boolean;
   isInRightDrawer?: boolean;
+  isNewRightDrawerItemLoading?: boolean;
 };
 
 export const RecordShowContainer = ({
   objectNameSingular,
   objectRecordId,
   loading,
   isInRightDrawer = false,
+  isNewRightDrawerItemLoading = false,
 }: RecordShowContainerProps) => {
   const { objectMetadataItem } = useObjectMetadataItem({
     objectNameSingular,
@@ -82,9 +83,6 @@ export const RecordShowContainer = ({
       recordId: objectRecordId,
     }),
   );
-  const isNewViewableRecordLoading = useRecoilValue(
-    isNewViewableRecordLoadingState,
-  );
   const [uploadImage] = useUploadImageMutation();
   const { updateOneRecord } = useUpdateOneRecord({ objectNameSingular });
 
@@ -166,8 +164,6 @@ export const RecordShowContainer = ({
   const isReadOnly = objectMetadataItem.isRemote;
   const isMobile = useIsMobile() || isInRightDrawer;
   const isPrefetchLoading = useIsPrefetchLoading();
-  const isNewRightDrawerItemLoading =
-    isInRightDrawer && isNewViewableRecordLoading;
 
   const summaryCard =
     !isNewRightDrawerItemLoading && isDefined(recordFromStore) ? (

diff --git a/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts b/packages/twenty-front/src/modules/object-record/record-show/hooks/useRecordShowPage.ts
@@ -23,10 +23,10 @@ export const useRecordShowPage = (
     objectRecordId: paramObjectRecordId,
   } = useParams();
 
-  const objectNameSingular = propsObjectNameSingular || paramObjectNameSingular;
-  const objectRecordId = propsObjectRecordId || paramObjectRecordId;
+  const objectNameSingular = propsObjectNameSingular ?? paramObjectNameSingular;
+  const objectRecordId = propsObjectRecordId ?? paramObjectRecordId;
 
-  if (!objectNameSingular || !objectRecordId) {
+  if (!isDefined(objectNameSingular) || !isDefined(objectRecordId)) {
     throw new Error('Object name or Record id is not defined');
   }
 

diff --git a/...bject-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/...bject-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
@@ -24,12 +24,15 @@ import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRela
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 import { EntityForSelect } from '@/object-record/relation-picker/types/EntityForSelect';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
+import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData';
+import { PrefetchKey } from '@/prefetch/types/PrefetchKey';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { FilterQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
+import { View } from '@/views/types/View';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
@@ -119,12 +122,21 @@ export const RecordDetailRelationSection = ({
     scopeId: dropdownId,
   });
 
+  const { records: views } = usePrefetchedData<View>(PrefetchKey.AllViews);
+
+  const indexView = views.find(
+    (view) =>
+      view.key === 'INDEX' &&
+      view.objectMetadataId === relationObjectMetadataItem.id,
+  );
+
   const filterQueryParams: FilterQueryParams = {
     filter: {
       [relationFieldMetadataItem?.name || '']: {
         [ViewFilterOperand.Is]: [recordId],
       },
     },
+    view: indexView?.id,
   };
   const filterLinkHref = `/objects/${
     relationObjectMetadataItem.namePlural

diff --git a/...nty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx b/...nty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
@@ -7,7 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 312px 132px 68px;
+  grid-template-columns: 312px auto 28px;
 `;
 
 const StyledNameTableCell = styled(TableCell)`
@@ -18,6 +18,7 @@ const StyledNameTableCell = styled(TableCell)`
 const StyledIconTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-left: 0;
 `;
 
 const StyledIconChevronRight = styled(IconChevronRight)`

diff --git a/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx b/packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
@@ -18,7 +18,7 @@ const StyledTableBody = styled(TableBody)`
 `;
 
 const StyledTableRow = styled(TableRow)`
-  grid-template-columns: 312px 132px 68px;
+  grid-template-columns: 312px auto 28px;
 `;
 
 export const SettingsApiKeysTable = () => {

diff --git a/...ty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx b/...ty-front/src/modules/settings/developers/components/SettingsDevelopersWebhookTableRow.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconChevronRight } from 'twenty-ui';
@@ -8,12 +7,13 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 
 export const StyledApisFieldTableRow = styled(TableRow)`
-  grid-template-columns: 444px 68px;
+  grid-template-columns: 1fr 28px;
 `;
 
 const StyledIconTableCell = styled(TableCell)`
   justify-content: center;
   padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-left: 0;
 `;
 
 const StyledUrlTableCell = styled(TableCell)`

diff --git a/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx b/packages/twenty-front/src/modules/views/components/QueryParamsFiltersEffect.tsx
@@ -1,23 +1,24 @@
 import { useEffect } from 'react';
 
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
 import { useViewFromQueryParams } from '@/views/hooks/internal/useViewFromQueryParams';
-import { useGetCurrentView } from '@/views/hooks/useGetCurrentView';
 import { useResetUnsavedViewStates } from '@/views/hooks/useResetUnsavedViewStates';
+import { currentViewIdComponentState } from '@/views/states/currentViewIdComponentState';
 import { unsavedToUpsertViewFiltersComponentFamilyState } from '@/views/states/unsavedToUpsertViewFiltersComponentFamilyState';
-import { isDefined } from 'twenty-ui';
 
 export const QueryParamsFiltersEffect = () => {
   const { hasFiltersQueryParams, getFiltersFromQueryParams, viewIdQueryParam } =
     useViewFromQueryParams();
 
+  const currentViewId = useRecoilComponentValueV2(currentViewIdComponentState);
+
   const setUnsavedViewFilter = useSetRecoilComponentFamilyStateV2(
     unsavedToUpsertViewFiltersComponentFamilyState,
-    { viewId: viewIdQueryParam },
+    { viewId: viewIdQueryParam ?? currentViewId },
   );
 
   const { resetUnsavedViewStates } = useResetUnsavedViewStates();
-  const { currentViewId } = useGetCurrentView();
 
   useEffect(() => {
     if (!hasFiltersQueryParams) {
@@ -29,18 +30,11 @@ export const QueryParamsFiltersEffect = () => {
         setUnsavedViewFilter(filtersFromParams);
       }
     });
-
-    return () => {
-      if (isDefined(currentViewId)) {
-        resetUnsavedViewStates(currentViewId);
-      }
-    };
   }, [
     getFiltersFromQueryParams,
     hasFiltersQueryParams,
     resetUnsavedViewStates,
     setUnsavedViewFilter,
-    currentViewId,
   ]);
 
   return <></>;

diff --git a/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx b/packages/twenty-front/src/pages/settings/SettingsWorkspaceMembers.tsx
@@ -7,8 +7,8 @@ import {
   IconUsers,
   IconReload,
   IconMail,
-  StyledText,
   Avatar,
+  MOBILE_VIEWPORT,
 } from 'twenty-ui';
 import { isNonEmptyArray } from '@sniptt/guards';
 import { useTheme } from '@emotion/react';
@@ -53,6 +53,47 @@ const StyledTable = styled(Table)`
   margin-top: ${({ theme }) => theme.spacing(0.5)};
 `;
 
+const StyledTableRow = styled(TableRow)`
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    display: grid;
+    grid-template-columns: 3fr;
+  }
+`;
+const StyledTableCell = styled(TableCell)`
+  padding: ${({ theme }) => theme.spacing(1)};
+  @media (max-width: ${MOBILE_VIEWPORT}px) {
+    &:first-child {
+      max-width: 100%;
+      padding-top: 2px;
+      white-space: nowrap;
+      overflow: scroll;
+      scroll-behavior: smooth;
+    }
+  }
+`;
+const StyledIconWrapper = styled.div`
+  left: 2px;
+  margin-right: ${({ theme }) => theme.spacing(2)};
+  position: relative;
+  top: 1px;
+`;
+
+const StyledScrollableTextContainer = styled.div`
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-line;
+`;
+
+const StyledTextContainer = styled.div`
+  color: ${({ theme }) => theme.font.color.secondary};
+  max-width: max-content;
+  overflow-x: auto;
+  position: absolute;
+  @media (min-width: 360px) and (max-width: 420px) {
+    max-width: 150px;
+    margin-top: ${({ theme }) => theme.spacing(1)};
+  }
+`;
 const StyledTableHeaderRow = styled(Table)`
   margin-bottom: ${({ theme }) => theme.spacing(1.5)};
 `;
@@ -165,28 +206,25 @@ export const SettingsWorkspaceMembers = () => {
               <StyledTable key={workspaceMember.id}>
                 <TableRow>
                   <TableCell>
-                    <StyledText
-                      PrefixComponent={
-                        <Avatar
-                          avatarUrl={workspaceMember.avatarUrl}
-                          placeholderColorSeed={workspaceMember.id}
-                          placeholder={workspaceMember.name.firstName ?? ''}
-                          type="rounded"
-                          size="sm"
-                        />
-                      }
-                      text={
-                        workspaceMember.name.firstName +
+                    <StyledIconWrapper>
+                      <Avatar
+                        avatarUrl={workspaceMember.avatarUrl}
+                        placeholderColorSeed={workspaceMember.id}
+                        placeholder={workspaceMember.name.firstName ?? ''}
+                        type="rounded"
+                        size="sm"
+                      />
+                    </StyledIconWrapper>
+                    <StyledScrollableTextContainer>
+                      {workspaceMember.name.firstName +
                         ' ' +
-                        workspaceMember.name.lastName
-                      }
-                    />
+                        workspaceMember.name.lastName}
+                    </StyledScrollableTextContainer>
                   </TableCell>
                   <TableCell>
-                    <StyledText
-                      text={workspaceMember.userEmail}
-                      color={theme.font.color.secondary}
-                    />
+                    <StyledTextContainer>
+                      {workspaceMember.userEmail}
+                    </StyledTextContainer>
                   </TableCell>
                   <TableCell align={'right'}>
                     {currentWorkspaceMember?.id !== workspaceMember.id && (
@@ -225,25 +263,27 @@ export const SettingsWorkspaceMembers = () => {
               </StyledTableHeaderRow>
               {workspaceInvitations?.map((workspaceInvitation) => (
                 <StyledTable key={workspaceInvitation.id}>
-                  <TableRow gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}>
-                    <TableCell>
-                      <StyledText
-                        PrefixComponent={
-                          <IconMail
-                            size={theme.icon.size.md}
-                            stroke={theme.icon.stroke.sm}
-                          />
-                        }
-                        text={workspaceInvitation.email}
-                      />
-                    </TableCell>
-                    <TableCell align={'right'}>
+                  <StyledTableRow
+                    gridAutoColumns={`1fr 1fr ${theme.spacing(22)}`}
+                  >
+                    <StyledTableCell>
+                      <StyledIconWrapper>
+                        <IconMail
+                          size={theme.icon.size.md}
+                          stroke={theme.icon.stroke.sm}
+                        />
+                      </StyledIconWrapper>
+                      <StyledScrollableTextContainer>
+                        {workspaceInvitation.email}
+                      </StyledScrollableTextContainer>
+                    </StyledTableCell>
+                    <StyledTableCell align={'right'}>
                       <Status
                         color={'gray'}
                         text={getExpiresAtText(workspaceInvitation.expiresAt)}
                       />
-                    </TableCell>
-                    <TableCell align={'right'}>
+                    </StyledTableCell>
+                    <StyledTableCell align={'right'}>
                       <StyledButtonContainer>
                         <IconButton
                           onClick={() => {
@@ -266,8 +306,8 @@ export const SettingsWorkspaceMembers = () => {
                           Icon={IconTrash}
                         />
                       </StyledButtonContainer>
-                    </TableCell>
-                  </TableRow>
+                    </StyledTableCell>
+                  </StyledTableRow>
                 </StyledTable>
               ))}
             </Table>