Show Entity task/note tabs (#1282)

* - show task tab - tab bar * - add notes tab * - fixed unused style * - add button - fixed company edit note test * - fixed merge & dropdown * - added Tests - refactored directory structure activities - moved Task/Note Pages to corresponding modules - fixed TabList * lint
2023-08-25 22:44:13 +02:00
parent f8e3dd3f6b
commit 7e264565ef
34 changed files with 957 additions and 188 deletions
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@ -1,7 +1,6 @@
 import { useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';

-import { Timeline } from '@/activities/timeline/components/Timeline';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
@ -13,9 +12,12 @@ import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/Edita
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconBuildingSkyscraper } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
+import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';

@ -49,47 +51,60 @@ export function CompanyShow() {
      isFavorite={isFavorite}
      icon={<IconBuildingSkyscraper size={theme.icon.size.md} />}
      onFavoriteButtonClick={handleFavoriteButtonClick}
+      extraButtons={[
+        <ShowPageAddButton
+          key="add"
+          entity={{
+            id: company.id,
+            type: ActivityTargetableEntityType.Company,
+          }}
+        />,
+      ]}
    >
-      <ShowPageContainer>
-        <ShowPageLeftContainer>
-          <ShowPageSummaryCard
-            id={company.id}
-            logoOrAvatar={getLogoUrlFromDomainName(company.domainName ?? '')}
-            title={company.name ?? 'No name'}
-            date={company.createdAt ?? ''}
-            renderTitleEditComponent={() => (
-              <CompanyNameEditableField company={company} />
-            )}
-          />
-          <PropertyBox extraPadding={true}>
-            <EditableFieldMutationContext.Provider
-              value={useUpdateOneCompanyMutation}
-            >
-              <EditableFieldEntityIdContext.Provider value={company.id}>
-                {companyShowFieldDefinition.map((fieldDefinition) => {
-                  return (
-                    <EditableFieldDefinitionContext.Provider
-                      value={fieldDefinition}
-                      key={fieldDefinition.id}
-                    >
-                      <GenericEditableField />
-                    </EditableFieldDefinitionContext.Provider>
-                  );
-                })}
-              </EditableFieldEntityIdContext.Provider>
-            </EditableFieldMutationContext.Provider>
-          </PropertyBox>
-          <CompanyTeam company={company}></CompanyTeam>
-        </ShowPageLeftContainer>
-        <ShowPageRightContainer>
-          <Timeline
+      <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
+        <ShowPageContainer>
+          <ShowPageLeftContainer>
+            <ShowPageSummaryCard
+              id={company.id}
+              logoOrAvatar={getLogoUrlFromDomainName(company.domainName ?? '')}
+              title={company.name ?? 'No name'}
+              date={company.createdAt ?? ''}
+              renderTitleEditComponent={() => (
+                <CompanyNameEditableField company={company} />
+              )}
+            />
+            <PropertyBox extraPadding={true}>
+              <EditableFieldMutationContext.Provider
+                value={useUpdateOneCompanyMutation}
+              >
+                <EditableFieldEntityIdContext.Provider value={company.id}>
+                  {companyShowFieldDefinition.map((fieldDefinition) => {
+                    return (
+                      <EditableFieldDefinitionContext.Provider
+                        value={fieldDefinition}
+                        key={fieldDefinition.id}
+                      >
+                        <GenericEditableField />
+                      </EditableFieldDefinitionContext.Provider>
+                    );
+                  })}
+                </EditableFieldEntityIdContext.Provider>
+              </EditableFieldMutationContext.Provider>
+            </PropertyBox>
+            <CompanyTeam company={company}></CompanyTeam>
+          </ShowPageLeftContainer>
+          <ShowPageRightContainer
            entity={{
              id: company.id,
              type: ActivityTargetableEntityType.Company,
            }}
+            timeline
+            tasks
+            notes
+            emails
          />
-        </ShowPageRightContainer>
-      </ShowPageContainer>
+        </ShowPageContainer>
+      </RecoilScope>
    </WithTopBarContainer>
  );
 }
--- a/front/src/pages/companies/stories/Company.stories.tsx
+++ b/front/src/pages/companies/stories/Company.stories.tsx
@ -15,7 +15,7 @@ import {
  type PageDecoratorArgs,
 } from '~/testing/decorators/PageDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
-import { mockedActivities } from '~/testing/mock-data/activities';
+import { mockedActivities, mockedTasks } from '~/testing/mock-data/activities';
 import { mockedCompaniesData } from '~/testing/mock-data/companies';

 import { CompanyShow } from '../CompanyShow';
@ -37,7 +37,10 @@ const meta: Meta<PageDecoratorArgs> = {
        (req, res, ctx) => {
          return res(
            ctx.data({
-              findManyActivities: mockedActivities,
+              findManyActivities:
+                req?.variables?.where?.type?.equals === 'Task'
+                  ? mockedTasks
+                  : mockedActivities,
            }),
          );
        },
@ -59,7 +62,7 @@ export type Story = StoryObj<typeof CompanyShow>;

 export const Default: Story = {};

-export const EditNote: Story = {
+export const EditNoteByAddButton: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const firstNoteTitle = await canvas.findByText('My very first note');
@ -74,6 +77,9 @@ export const EditNote: Story = {

    expect(await canvas.queryByDisplayValue('My very first note')).toBeNull();

+    const addDropdown = await canvas.findByTestId('add-showpage-button');
+    await addDropdown.click();
+
    const noteButton = await canvas.findByText('Note');
    await noteButton.click();

@ -114,3 +120,113 @@ export const EditNote: Story = {
    ],
  },
 };
+
+export const NoteTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const noteTab = await canvas.findByTestId('tab-notes');
+    await noteTab.click();
+
+    expect(await canvas.findByText('My very first note')).toBeInTheDocument();
+
+    const workspaceName = await canvas.findByText('Twenty');
+    await fireEvent.click(workspaceName);
+
+    expect(await canvas.queryByDisplayValue('My very first note')).toBeNull();
+
+    const addButton = await canvas.findByText('Add note');
+    await addButton.click();
+
+    const noteButton = await canvas.findByText('Note');
+    await noteButton.click();
+
+    expect(await canvas.findByText('My very first note')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: [
+      ...meta.parameters?.msw,
+      graphql.mutation(
+        getOperationName(CREATE_ACTIVITY_WITH_COMMENT) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              createOneActivity: mockedActivities[0],
+            }),
+          );
+        },
+      ),
+      graphql.query(getOperationName(GET_ACTIVITY) ?? '', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            findManyActivities: [mockedActivities[0]],
+          }),
+        );
+      }),
+      graphql.mutation(
+        getOperationName(UPDATE_ONE_COMPANY) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              updateOneCompany: [mockedCompaniesData[0]],
+            }),
+          );
+        },
+      ),
+    ],
+  },
+};
+
+export const TaskTab: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const taskTab = await canvas.findByTestId('tab-tasks');
+    await taskTab.click();
+
+    expect(await canvas.findByText('My very first task')).toBeInTheDocument();
+
+    const workspaceName = await canvas.findByText('Twenty');
+    await fireEvent.click(workspaceName);
+
+    expect(await canvas.queryByDisplayValue('My very first task')).toBeNull();
+
+    const addButton = await canvas.findByText('Add task');
+    await addButton.click();
+
+    const taskButton = await canvas.findByText('Task');
+    await taskButton.click();
+
+    expect(await canvas.findByText('My very first task')).toBeInTheDocument();
+  },
+  parameters: {
+    msw: [
+      ...meta.parameters?.msw,
+      graphql.mutation(
+        getOperationName(CREATE_ACTIVITY_WITH_COMMENT) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              createOneActivity: mockedTasks[0],
+            }),
+          );
+        },
+      ),
+      graphql.query(getOperationName(GET_ACTIVITY) ?? '', (req, res, ctx) => {
+        return res(
+          ctx.data({
+            findManyActivities: [mockedTasks[0]],
+          }),
+        );
+      }),
+      graphql.mutation(
+        getOperationName(UPDATE_ONE_COMPANY) ?? '',
+        (req, res, ctx) => {
+          return res(
+            ctx.data({
+              updateOneCompany: [mockedCompaniesData[0]],
+            }),
+          );
+        },
+      ),
+    ],
+  },
+};
--- a/front/src/pages/people/PersonShow.tsx
+++ b/front/src/pages/people/PersonShow.tsx
@ -2,7 +2,6 @@ import { useParams } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';

-import { Timeline } from '@/activities/timeline/components/Timeline';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
@ -14,9 +13,12 @@ import { EditableFieldMutationContext } from '@/ui/editable-field/contexts/Edita
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { IconUser } from '@/ui/icon';
 import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
+import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton';
 import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer';
 import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer';
 import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard';
+import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
  useUpdateOnePersonMutation,
  useUploadPersonPictureMutation,
@ -67,47 +69,60 @@ export function PersonShow() {
      hasBackButton
      isFavorite={isFavorite}
      onFavoriteButtonClick={handleFavoriteButtonClick}
+      extraButtons={[
+        <ShowPageAddButton
+          key="add"
+          entity={{
+            id: person.id,
+            type: ActivityTargetableEntityType.Person,
+          }}
+        />,
+      ]}
    >
-      <ShowPageContainer>
-        <ShowPageLeftContainer>
-          <ShowPageSummaryCard
-            id={person.id}
-            title={person.displayName ?? 'No name'}
-            logoOrAvatar={person.avatarUrl ?? undefined}
-            date={person.createdAt ?? ''}
-            renderTitleEditComponent={() =>
-              person ? <PeopleFullNameEditableField people={person} /> : <></>
-            }
-            onUploadPicture={onUploadPicture}
-          />
-          <PropertyBox extraPadding={true}>
-            <EditableFieldMutationContext.Provider
-              value={useUpdateOnePersonMutation}
-            >
-              <EditableFieldEntityIdContext.Provider value={person.id}>
-                {personShowFieldDefinition.map((fieldDefinition) => {
-                  return (
-                    <EditableFieldDefinitionContext.Provider
-                      value={fieldDefinition}
-                      key={fieldDefinition.id}
-                    >
-                      <GenericEditableField />
-                    </EditableFieldDefinitionContext.Provider>
-                  );
-                })}
-              </EditableFieldEntityIdContext.Provider>
-            </EditableFieldMutationContext.Provider>
-          </PropertyBox>
-        </ShowPageLeftContainer>
-        <ShowPageRightContainer>
-          <Timeline
+      <RecoilScope SpecificContext={ShowPageRecoilScopeContext}>
+        <ShowPageContainer>
+          <ShowPageLeftContainer>
+            <ShowPageSummaryCard
+              id={person.id}
+              title={person.displayName ?? 'No name'}
+              logoOrAvatar={person.avatarUrl ?? undefined}
+              date={person.createdAt ?? ''}
+              renderTitleEditComponent={() =>
+                person ? <PeopleFullNameEditableField people={person} /> : <></>
+              }
+              onUploadPicture={onUploadPicture}
+            />
+            <PropertyBox extraPadding={true}>
+              <EditableFieldMutationContext.Provider
+                value={useUpdateOnePersonMutation}
+              >
+                <EditableFieldEntityIdContext.Provider value={person.id}>
+                  {personShowFieldDefinition.map((fieldDefinition) => {
+                    return (
+                      <EditableFieldDefinitionContext.Provider
+                        value={fieldDefinition}
+                        key={fieldDefinition.id}
+                      >
+                        <GenericEditableField />
+                      </EditableFieldDefinitionContext.Provider>
+                    );
+                  })}
+                </EditableFieldEntityIdContext.Provider>
+              </EditableFieldMutationContext.Provider>
+            </PropertyBox>
+          </ShowPageLeftContainer>
+          <ShowPageRightContainer
            entity={{
              id: person.id ?? '',
              type: ActivityTargetableEntityType.Person,
            }}
+            timeline
+            tasks
+            notes
+            emails
          />
-        </ShowPageRightContainer>
-      </ShowPageContainer>
+        </ShowPageContainer>
+      </RecoilScope>
    </WithTopBarContainer>
  );
 }
--- a/front/src/pages/tasks/Tasks.tsx
+++ b/front/src/pages/tasks/Tasks.tsx
@ -1,9 +1,9 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';

-import { TaskGroups } from '@/activities/components/TaskGroups';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
+import { TaskGroups } from '@/activities/tasks/components/TaskGroups';
 import { FilterDropdownButton } from '@/ui/filter-n-sort/components/FilterDropdownButton';
 import { FiltersHotkeyScope } from '@/ui/filter-n-sort/types/FiltersHotkeyScope';
 import { IconArchive, IconCheck, IconCheckbox } from '@/ui/icon/index';