[EASI-4636] GRB discussions card

src/data/mock/discussions.ts

@@ -0,0 +1,65 @@
+import {
+  SystemIntakeGRBReviewDiscussionFragment,
+  SystemIntakeGRBReviewerRole,
+  SystemIntakeGRBReviewerVotingRole
+} from 'gql/gen/graphql';
+
+import { systemIntake } from './systemIntake';
+import users from './users';
+
+const mockDiscussions = (
+  systemIntakeID: string = systemIntake.id
+): SystemIntakeGRBReviewDiscussionFragment[] => [
+  {
+    __typename: 'SystemIntakeGRBReviewDiscussion',
+    initialPost: {
+      __typename: 'SystemIntakeGRBReviewDiscussionPost',
+      id: '882357e4-c0b0-44ef-b749-f71879ad7878',
+      content:
+        '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>',
+      votingRole: SystemIntakeGRBReviewerVotingRole.VOTING,
+      grbRole: SystemIntakeGRBReviewerRole.SUBJECT_MATTER_EXPERT,
+      createdByUserAccount: {
+        __typename: 'UserAccount',
+        id: '034fa2b3-00ff-4ec6-857e-75291a59df74',
+        commonName: users[5].commonName
+      },
+      systemIntakeID,
+      createdAt: '2024-11-12T10:00:00.368862Z'
+    },
+    replies: [
+      {
+        __typename: 'SystemIntakeGRBReviewDiscussionPost',
+        id: '4099dbb7-2752-4bf9-a3e1-da225ceb9fae',
+        content:
+          '<p>Nisi nobis consectetur voluptatem neque tempore. Ea nihil sed beatae?</p>',
+        votingRole: SystemIntakeGRBReviewerVotingRole.NON_VOTING,
+        grbRole: SystemIntakeGRBReviewerRole.CMCS_REP,
+        createdByUserAccount: {
+          __typename: 'UserAccount',
+          id: '909a7888-4d6f-4bbf-9b9d-71ec1e2c3068',
+          commonName: users[1].commonName
+        },
+        systemIntakeID,
+        createdAt: '2024-11-13T10:00:00.368862Z'
+      },
+      {
+        __typename: 'SystemIntakeGRBReviewDiscussionPost',
+        id: '47b0081d-de33-4514-b68f-a7e2bbf2610f',
+        content:
+          '<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>',
+        votingRole: SystemIntakeGRBReviewerVotingRole.VOTING,
+        grbRole: SystemIntakeGRBReviewerRole.CO_CHAIR_CIO,
+        createdByUserAccount: {
+          __typename: 'UserAccount',
+          id: '601d52be-7baa-4b45-91cd-88b4a5935c3f',
+          commonName: users[7].commonName
+        },
+        systemIntakeID,
+        createdAt: '2024-11-13T10:00:00.368862Z'
+      }
+    ]
+  }
+];
+
+export default mockDiscussions;

src/gql/apolloGQL/grbReview/GetSystemIntakeGRBReviewers.ts → src/gql/apolloGQL/grbReview/GetSystemIntakeGRBReview.ts

@@ -1,18 +1,21 @@
 import { gql } from '@apollo/client';
 
+import SystemIntakeGRBReviewDiscussion from './SystemIntakeGRBReviewDiscussion';
 import SystemIntakeGRBReviewer from './SystemIntakeGRBReviewer';
 
-const GetSystemIntakeGRBReviewers = gql(/* GraphQL */ `
+export default gql(/* GraphQL */ `
   ${SystemIntakeGRBReviewer}
-  query GetSystemIntakeGRBReviewers($id: UUID!) {
+  ${SystemIntakeGRBReviewDiscussion}
+  query GetSystemIntakeGRBReview($id: UUID!) {
     systemIntake(id: $id) {
       id
       grbReviewStartedAt
       grbReviewers {
         ...SystemIntakeGRBReviewer
       }
+      grbDiscussions {
+        ...SystemIntakeGRBReviewDiscussion
+      }
     }
   }
 `);
-
-export default GetSystemIntakeGRBReviewers;

src/gql/apolloGQL/grbReview/SystemIntakeGRBReviewDiscussion.ts

@@ -0,0 +1,28 @@
+import { gql } from '@apollo/client';
+
+const SystemIntakeGRBReviewDiscussionPost = gql(/* GraphQL */ `
+  fragment SystemIntakeGRBReviewDiscussionPost on SystemIntakeGRBReviewDiscussionPost {
+    id
+    content
+    votingRole
+    grbRole
+    createdByUserAccount {
+      id
+      commonName
+    }
+    systemIntakeID
+    createdAt
+  }
+`);
+
+export default gql(/* GraphQL */ `
+  ${SystemIntakeGRBReviewDiscussionPost}
+  fragment SystemIntakeGRBReviewDiscussion on SystemIntakeGRBReviewDiscussion {
+    initialPost {
+      ...SystemIntakeGRBReviewDiscussionPost
+    }
+    replies {
+      ...SystemIntakeGRBReviewDiscussionPost
+    }
+  }
+`);

src/i18n/en-US/discussions.ts

@@ -14,12 +14,15 @@ const discussions = {
     discussedTopics_plural: '{{count}} discussions with replies',
     fieldsMarkedRequired:
       'Fields marked with an asterisk (<asterisk />) are required.', // TODO: this is in other i18n files, move to general.ts?
-    nonDiscussedTopics: '{{count}} discussion without replies',
-    nonDiscussedTopics_plural: '{{count}} discussions without replies',
+    discussionsWithoutReplies: '{{count}} discussion without replies',
+    discussionsWithoutReplies_plural: '{{count}} discussions without replies',
     readMore: 'Read more', // TODO: this is in other i18n files, move to general.ts?
     repliesInDiscussion: '{{count}} reply in this discussion',
     repliesInDiscussion_plural: '{{count}} replies in this discussion',
+    repliesCount: '{{count}} reply',
+    repliesCount_plural: '{{count}} replies',
     reply: 'Reply',
+    lastReply: 'Last reply {{date}} at {{time}}',
     saveDiscussion: 'Save discussion',
 
     startDiscussion: 'Start a new discussion',
@@ -30,6 +33,8 @@ const discussions = {
     alerts: {
       noDiscussions:
         'There are no discussions yet. When a discussion topic is started, it will appear here.',
+      noDiscussionsStartButton:
+        'There are not yet any discussions. <button>Start a discussion</button>.',
       replyError:
         'There was an issue with adding your reply, please try again.',
       replySuccess: 'Success! Your reply has been added.',
@@ -56,23 +61,20 @@ const discussions = {
       label: 'Tips for using the discussion boards',
       content: [
         'Start a new discussion thread for each new topic',
-        // 'Use tags (@) any time you need input from a specific individual or group. Group tags will notify all members of that group. Avalailble group tags: @Governance Review Board, @Governance Admin Team, @Admin Lead',
-        'Use tags (@) any time you need input from a specific individual or group. Group tags will notify all members of that group. Avalailble group tags {{groupNames}}', // TODO: wont display @ symbol?
+        'Use tags (@) any time you need input from a specific individual or group. Group tags will notify all members of that group. Avalailble group tags: <span>@Governance Review Board</span>, <span>@Governance Admin Team</span>, and <span>@Admin Lead</span>',
         'Participating individuals will get an email notification when a new discussion is started, or when they are tagged in a discussion or reply'
       ]
     }
   },
 
   // Board Specific Translations
   governanceReviewBoard: {
-    adminPanel: {
-      // description:
-      //   'Use the discussion boards below to discuss this project. The internal GRB discussion board is a space for the Governance Admin Team and GRB members to discuss privately; the project team will not be able to view discussions there.',
-      description:
-        'Use the discussion boards below to discuss this project. The {{discussionBoardType}} is a space for the {{groupNames}} members to discuss privately; the project team will not be able to view discussions there.'
-    },
+    discussionsDescription:
+      'Use the discussion boards below to discuss this project. The internal GRB discussion board is a space for the Governance Admin Team and GRB members to discuss privately; the project team will not be able to view discussions there.',
+    governanceAdminTeam: 'Governance Admin Team',
     internal: {
       label: 'Internal GRB discussion board', // TODO: enum translation?
+      visibilityRestricted: 'Visibility restricted',
       // description:
       //   'Use this discussion board to ask questions or have dicussions with the Governance Admin Team and other Governance Review Board (GRB) members. The conversations here are not visible to the Project team.'
       description:

src/utils/date.test.ts

@@ -5,6 +5,7 @@ import {
   formatDateLocal,
   formatDateUtc,
   getFiscalYear,
+  getRelativeDate,
   parseAsUTC
 } from './date';
 
@@ -91,3 +92,33 @@ describe('getFiscalYear', () => {
     expect(getFiscalYear(date)).toEqual(2029);
   });
 });
+
+describe('getRelativeDate', () => {
+  it('returns formatted date after 30 days', () => {
+    const date = DateTime.fromObject({ year: 2021, month: 3, day: 1 });
+
+    const formattedDate = date.toFormat('MM/dd/yyyy');
+
+    const relativeDate = getRelativeDate(date.toISO());
+
+    expect(relativeDate).toEqual(formattedDate);
+  });
+
+  it('formats past relative date', () => {
+    const days = 3;
+
+    const date = DateTime.now().minus({ days });
+
+    const relativeDate = getRelativeDate(date.toISO());
+
+    expect(relativeDate).toEqual(`${days} days ago`);
+  });
+
+  it('formats relative date for today', () => {
+    const date = DateTime.now();
+
+    const relativeDate = getRelativeDate(date.toISO());
+
+    expect(relativeDate).toEqual('today');
+  });
+});

src/utils/date.ts

@@ -1,4 +1,4 @@
-import { DateTime } from 'luxon';
+import { DateTime, Interval } from 'luxon';
 
 // Used to parse out mintute, day, ,month, and years from ISOString
 export const parseAsUTC = (date: string) => DateTime.fromISO(date).toUTC();
@@ -72,3 +72,37 @@ export const isDateInPast = (date: string | null): boolean => {
   }
   return false;
 };
+
+/**
+ * If less than 30 days have passed since `date`, returns "today" or "X days ago".
+ *
+ * Otherwise, returns formatted date.
+ */
+export const getRelativeDate = (
+  date: string | null,
+  /**
+   * Number of days between `date` and now to display relative date
+   * before switching to formatted date
+   */
+  relativeDateLimit: number = 30
+): string => {
+  if (!date) return '';
+
+  const dateTime = DateTime.fromISO(date);
+
+  if (!dateTime.isValid) return '';
+
+  /** Interval between now and `date` */
+  const interval = Interval.fromDateTimes(dateTime, DateTime.now());
+
+  // Subtract one from the interval count to see how many days since the initial date
+  const days = interval.count('days') - 1;
+
+  // If more than 30 days have passed, return formatted date
+  if (days > relativeDateLimit) {
+    return DateTime.fromISO(date).toFormat('MM/dd/yyyy');
+  }
+
+  // Return relative date
+  return dateTime.toRelativeCalendar({ unit: 'days' });
+};

src/views/DiscussionBoard/DiscussionPost/index.scss

@@ -0,0 +1,9 @@
+.easi-discussion-post {
+  &__header {
+    justify-content: space-between;
+  }
+
+  &__content * {
+    line-height: 1.6 !important;
+  }
+}

src/views/DiscussionBoard/DiscussionPost/index.test.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SystemIntakeGRBReviewDiscussionFragment } from 'gql/gen/graphql';
+import i18next from 'i18next';
+
+import mockDiscussions from 'data/mock/discussions';
+import { getRelativeDate } from 'utils/date';
+
+import DiscussionPost from '.';
+
+const [discussion] = mockDiscussions();
+const { initialPost, replies } = discussion;
+
+describe('DiscussionPost', () => {
+  it('renders a discussion post with replies', () => {
+    render(
+      <DiscussionPost
+        {...discussion.initialPost}
+        replies={discussion.replies}
+      />
+    );
+
+    const {
+      createdByUserAccount: { commonName },
+      grbRole,
+      votingRole,
+      createdAt
+    } = initialPost;
+
+    expect(screen.getByText(commonName)).toBeInTheDocument();
+
+    const formattedRole = `${i18next.t(`grbReview:votingRoles.${votingRole}`)}, ${i18next.t(`grbReview:reviewerRoles.${grbRole}`)}`;
+    expect(
+      screen.getByRole('heading', { level: 5, name: formattedRole })
+    ).toBeInTheDocument();
+
+    const dateText = getRelativeDate(createdAt);
+    expect(screen.getByText(dateText)).toBeInTheDocument();
+
+    const repliesCount = replies.length;
+    expect(
+      screen.getByRole('button', { name: `${repliesCount} replies` })
+    ).toBeInTheDocument();
+
+    const lastReplyAtText = i18next.t('discussions:general.lastReply', {
+      date: getRelativeDate(replies[0].createdAt, 1),
+      time: '10:00 AM'
+    });
+    expect(screen.getByText(lastReplyAtText)).toBeInTheDocument();
+  });
+
+  it('renders a discussion post without replies', () => {
+    render(<DiscussionPost {...discussion.initialPost} replies={[]} />);
+
+    expect(screen.getByRole('button', { name: 'Reply' })).toBeInTheDocument();
+
+    expect(screen.queryByTestId('lastReplyAtText')).toBeNull();
+  });
+
+  it('hides discussion reply data', () => {
+    render(<DiscussionPost {...discussion.initialPost} />);
+
+    expect(screen.queryByTestId('discussionReplies')).toBeNull();
+  });
+
+  it('displays roles fallback text', () => {
+    const discussionNoRole: SystemIntakeGRBReviewDiscussionFragment = {
+      ...discussion,
+      initialPost: {
+        ...initialPost,
+        grbRole: null,
+        votingRole: null
+      }
+    };
+
+    render(
+      <DiscussionPost
+        {...discussionNoRole.initialPost}
+        replies={discussionNoRole.replies}
+      />
+    );
+
+    expect(screen.getByText('Governance Admin Team')).toBeInTheDocument();
+  });
+});