Merge pull request #720 from AppQuality/bug-comments-bug-detail

Bug comments bug detail
AppQuality · Jan 3, 2024 · 65c330f · 65c330f
2 parents 943a095 + 02a3504
commit 65c330f
Show file tree

Hide file tree

Showing 11 changed files with 763 additions and 78 deletions.
diff --git a/src/assets/empty-comments.svg b/src/assets/empty-comments.svg
diff --git a/src/assets/existing-comments.svg b/src/assets/existing-comments.svg
diff --git a/src/assets/icons/speech-bubble-fill.svg b/src/assets/icons/speech-bubble-fill.svg
diff --git a/src/assets/icons/speech-bubble-plain-stroke.svg b/src/assets/icons/speech-bubble-plain-stroke.svg
diff --git a/src/hooks/useFeatureFlag.ts b/src/hooks/useFeatureFlag.ts
@@ -0,0 +1,17 @@
+import { useAppSelector } from 'src/app/hooks';
+
+export const useFeatureFlag = () => {
+  const { userData: user } = useAppSelector((state) => state.user);
+
+  const hasFeatureFlag = (slug?: string) => {
+    if (user && user.role === 'administrator') {
+      return true;
+    }
+    if (user && user.features) {
+      return user.features.some((feature) => feature.slug === slug);
+    }
+    return false;
+  };
+
+  return { hasFeatureFlag };
+};
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -42,6 +42,8 @@
   "__BUG_CUSTOM_STATUS_TO_BE_REGISTERED": "To be retested",
   "__BUG_CUSTOM_STATUS_TO_DO": "To do",
   "__BUG_PAGE_ACTIONS_TITLE": "Manage the bug independently",
+  "__BUG_PAGE_BUG_COMMENTS_BUTTON_TEXT_EMPTY": "",
+  "__BUG_PAGE_BUG_COMMENTS_BUTTON_TEXT_EXISTING": "",
   "__BUG_PAGE_HEADER_SHARE_LINK_CTA": "Share public link",
   "__BUG_PRIORITY_HIGH": "High",
   "__BUG_PRIORITY_HIGHEST": "Highest",
@@ -71,6 +73,9 @@
   "__BUGS_ORDER_LOWEST_TO_HIGHEST": "By lowest to highest",
   "__BUGS_OS_FILTER_ITEM_NO_ITEMS": "OS",
   "__BUGS_PAGE_BUG_CARD_DUPLICATES_LABEL": "Duplicates",
+  "__BUGS_PAGE_BUG_COMMENTS_EMPTY_TEXT": "",
+  "__BUGS_PAGE_BUG_COMMENTS_EXISITING_TEXT": "",
+  "__BUGS_PAGE_BUG_COMMENTS_TITLE": "Comments",
   "__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL": "Additional notes",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_DOWNLOAD_BUTTON": "Download this media",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_EXTRA_TAB_ITEM_LABEL": "File extra",
@@ -226,6 +231,9 @@
   "__BUGS_PAGE_USECASE_COMPLETION_3_TOOLTIP": "We are doing the last checks on this Use Case",
   "__BUGS_PAGE_USECASE_COMPLETION_4": "<0>Use Case <1>completed</1></0>",
   "__BUGS_PAGE_USECASE_COMPLETION_4_TOOLTIP": "We are ready with this Use Case: view all the bugs",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_one": "",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_other": "",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_EMPTY": "",
   "__BUGS_PAGE_VIEW_BUG_TOOLTIP": "Open bug",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_CASES": "As of now we couldn't find any more bugs in other use cases",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_STATUS": "As of now we couldn't find any more bugs in other statuses",

diff --git a/src/locales/it/translation.json b/src/locales/it/translation.json
@@ -43,6 +43,8 @@
   "__BUG_CUSTOM_STATUS_TO_BE_REGISTERED": "Da riprovare",
   "__BUG_CUSTOM_STATUS_TO_DO": "Da fare",
   "__BUG_PAGE_ACTIONS_TITLE": "Gestisci in autonomia il bug",
+  "__BUG_PAGE_BUG_COMMENTS_BUTTON_TEXT_EMPTY": "Scrivi tu il primo",
+  "__BUG_PAGE_BUG_COMMENTS_BUTTON_TEXT_EXISTING": "Leggili tutti",
   "__BUG_PAGE_HEADER_SHARE_LINK_CTA": "Condividi link pubblico",
   "__BUG_PRIORITY_HIGH": "Alta",
   "__BUG_PRIORITY_HIGHEST": "Altissima",
@@ -72,6 +74,9 @@
   "__BUGS_ORDER_LOWEST_TO_HIGHEST": "Meno alta",
   "__BUGS_OS_FILTER_ITEM_NO_ITEMS": "OS",
   "__BUGS_PAGE_BUG_CARD_DUPLICATES_LABEL": "Duplicati",
+  "__BUGS_PAGE_BUG_COMMENTS_EMPTY_TEXT": "Non ci sono ancora commenti su questo bug.",
+  "__BUGS_PAGE_BUG_COMMENTS_EXISITING_TEXT": "Ci sono dei commenti su questo bug.",
+  "__BUGS_PAGE_BUG_COMMENTS_TITLE": "Commenti",
   "__BUGS_PAGE_BUG_DETAIL_ADDITIONAL_NOTES_LABEL": "Altri commenti",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_DOWNLOAD_BUTTON": "Scarica questo media",
   "__BUGS_PAGE_BUG_DETAIL_ATTACHMENTS_EXTRA_TAB_ITEM_LABEL": "File extra",
@@ -243,6 +248,10 @@
   "__BUGS_PAGE_USECASE_COMPLETION_3_TOOLTIP": "Stiamo facendo gli ultimi controlli sullo Use Case",
   "__BUGS_PAGE_USECASE_COMPLETION_4": "<0>Use case <1>completato</1></0>",
   "__BUGS_PAGE_USECASE_COMPLETION_4_TOOLTIP": "Siamo pronti con lo Use Case: analizza tutti i bug raccolti",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_one": "{{count}} commento nella pagina di dettaglio bug",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_many": "{{count}} commenti nella pagina di dettaglio bug",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_other": "{{count}} commenti nella pagina di dettaglio bug",
+  "__BUGS_PAGE_VIEW_BUG_COMMENTS_TOOLTIP_EMPTY": "Non ci sono commenti su questo bug",
   "__BUGS_PAGE_VIEW_BUG_TOOLTIP": "Apri il bug",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_CASES": "Al momento non abbiamo trovato bug in altri Use Case oppure il test non prevede altri Use Case",
   "__BUGS_PAGE_WARNING_POSSIBLE_EMPTY_STATUS": "Al momento non abbiamo trovato bug in altri Stati oppure il test non prevede altri Stati",

diff --git a/src/pages/Bug/Chat.tsx b/src/pages/Bug/Chat.tsx
@@ -7,6 +7,7 @@ import {
 import { format } from 'date-fns';
 import { t } from 'i18next';
 import { useEffect, useState } from 'react';
+import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
 import { styled } from 'styled-components';
 import { useAppSelector } from 'src/app/hooks';
 import defaultBkg from 'src/assets/bg-chat.svg';
@@ -66,6 +67,10 @@ export const ChatBox = ({
     commentsRefetch();
   };
 
+  const { hasFeatureFlag } = useFeatureFlag();
+
+  const canAccessFeature = hasFeatureFlag('bug-comments');
+
   useEffect(() => {
     if (comments) {
       // Scroll to bottom of chat
@@ -75,67 +80,68 @@ export const ChatBox = ({
       }
     }
   }, [comments]);
-
   return (
     <>
-      <Chat>
-        <Chat.Header>{t('__BUG_COMMENTS_CHAT_HEADER__')}</Chat.Header>
-        <StyledComments
-          id="bug-comments-container"
-          chatBkg={`url(${defaultBkg}) repeat center center`}
-        >
-          {comments &&
-            comments.items.length > 0 &&
-            comments.items.map((comment) => (
-              <Comment
-                author={{
-                  avatar: getInitials(comment.creator.name),
-                  name: comment.creator.name,
-                }}
-                date={convertToLocalTime(comment.creation_date)}
-                message={comment.text}
-                key={comment.id}
-              >
-                <>
-                  <br />
-                  {(comment.creator.id === user.profile_id ||
-                    user.role === 'administrator') && (
-                    <Button isBasic onClick={() => openModal(`${comment.id}`)}>
-                      {t('__BUG_COMMENTS_CHAT_DELETE__')}
-                    </Button>
-                  )}
-                </>
-              </Comment>
-            ))}
-        </StyledComments>
-        <Chat.Input
-          author={{ avatar: getInitials(user.name), name: user.name }}
-          placeholderOptions={{
-            placeholder: () => t('__BUG_COMMENTS_CHAT_PLACEHOLDER'),
-          }}
-        />
-        <Chat.Footer>
-          <Button
-            isBasic
-            onClick={() => {
-              editor?.commands.clearContent(true);
-            }}
-          >
-            {t('__BUG_COMMENTS_CHAT_CANCEL__')}
-          </Button>
-          <Button
-            isPrimary
-            isAccent
-            disabled={isSubmitting}
-            onClick={() => {
-              triggerSave();
-              setIsSubmitting(true);
-            }}
-          >
-            {t('__BUG_COMMENTS_CHAT_CONFIRM__')}
-          </Button>
-        </Chat.Footer>
-      </Chat>
+      {canAccessFeature && (
+        <Chat>
+          <Chat.Header>{t('__BUG_COMMENTS_CHAT_HEADER__')}</Chat.Header>
+          {comments && comments.items.length > 0 && (
+            <StyledComments
+              id="bug-comments-container"
+              chatBkg={`url(${defaultBkg}) repeat center center`}
+            >
+              {comments.items.map((comment) => (
+                <Comment
+                  author={{
+                    avatar: getInitials(comment.creator.name),
+                    name: comment.creator.name,
+                  }}
+                  date={convertToLocalTime(comment.creation_date)}
+                  message={comment.text}
+                  key={comment.id}
+                >
+                  <>
+                    <br />
+                    {(comment.creator.id === user.id ||
+                      user.role === 'administrator') && (
+                      <Button
+                        isBasic
+                        onClick={() => openModal(`${comment.id}`)}
+                      >
+                        {t('__BUG_COMMENTS_CHAT_DELETE__')}
+                      </Button>
+                    )}
+                  </>
+                </Comment>
+              ))}
+            </StyledComments>
+          )}
+          <Chat.Input
+            author={{ avatar: getInitials(user.name), name: user.name }}
+          />
+          <Chat.Footer>
+            <Button
+              isBasic
+              onClick={() => {
+                editor?.commands.clearContent(true);
+              }}
+            >
+              {t('__BUG_COMMENTS_CHAT_CANCEL__')}
+            </Button>
+            <Button
+              isPrimary
+              isAccent
+              disabled={isSubmitting}
+              onClick={() => {
+                triggerSave();
+                setIsSubmitting(true);
+              }}
+            >
+              {t('__BUG_COMMENTS_CHAT_CONFIRM__')}
+            </Button>
+          </Chat.Footer>
+        </Chat>
+      )}
       {isModalOpen && (
         <DeleteCommentModal
           setIsModalOpen={setIsModalOpen}

diff --git a/src/pages/Bugs/Content/BugPreview.tsx b/src/pages/Bugs/Content/BugPreview.tsx
@@ -1,17 +1,22 @@
 import { Skeleton } from '@appquality/unguess-design-system';
-import styled from 'styled-components';
-import BugMeta from 'src/common/components/BugDetail/Meta';
-import BugPriority from 'src/common/components/BugDetail/Priority';
-import BugDescription from 'src/common/components/BugDetail/Description';
+import { useEffect, useRef } from 'react';
+import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
 import BugAttachments from 'src/common/components/BugDetail/Attachments';
+import { BugDuplicates } from 'src/common/components/BugDetail/BugDuplicates';
+import { BugStateDropdown } from 'src/common/components/BugDetail/BugStateDropdown';
+import BugDescription from 'src/common/components/BugDetail/Description';
 import BugDetails from 'src/common/components/BugDetail/Details';
+import BugMeta from 'src/common/components/BugDetail/Meta';
+import BugPriority from 'src/common/components/BugDetail/Priority';
 import BugTags from 'src/common/components/BugDetail/Tags';
-import { BugDuplicates } from 'src/common/components/BugDetail/BugDuplicates';
-import { useGetCampaignsByCidBugsAndBidQuery } from 'src/features/api';
+import {
+  useGetCampaignsByCidBugsAndBidCommentsQuery,
+  useGetCampaignsByCidBugsAndBidQuery,
+} from 'src/features/api';
 import { getSelectedBugId } from 'src/features/bugsPage/bugsPageSlice';
-import { useEffect, useRef } from 'react';
-import { BugStateDropdown } from 'src/common/components/BugDetail/BugStateDropdown';
-import { AnchorButtons } from 'src/common/components/BugDetail/AnchorButtons';
+import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
+import styled from 'styled-components';
+import { BugCommentsDetail } from './components/BugCommentsDetails';
 import BugHeader from './components/BugHeader';
 import { BugPreviewContextProvider } from './context/BugPreviewContext';
 
@@ -70,7 +75,14 @@ export const BugPreview = ({
     bid: bugId.toString(),
   });
   const currentBugId = getSelectedBugId();
+  const { data: comments } = useGetCampaignsByCidBugsAndBidCommentsQuery({
+    cid: campaignId.toString(),
+    bid: bugId.toString(),
+  });
+
+  const { hasFeatureFlag } = useFeatureFlag();
 
+  const canAccessFeature = hasFeatureFlag('bug-comments');
   // Reset container scroll position when bug changes
   useEffect(() => {
     if (refScroll.current) {
@@ -89,10 +101,13 @@ export const BugPreview = ({
     column-gap: ${({ theme }) => theme.space.sm};
     margin-bottom: ${({ theme }) => theme.space.md};
   `;
-
   return (
     <DetailContainer isFetching={isFetching}>
-      <BugHeader bug={bug} />
+      <BugHeader
+        bug={bug}
+        comments={comments}
+        showComments={canAccessFeature}
+      />
       <ScrollingContainer ref={refScroll} id={scrollerBoxId}>
         <BugPreviewContextProvider>
           <BugMeta bug={bug} />
@@ -104,6 +119,13 @@ export const BugPreview = ({
           <BugTags bug={bug} refetchBugTags={refetch} />
           <BugDescription bug={bug} />
           {media && media.length ? <BugAttachments bug={bug} /> : null}
+          {canAccessFeature && (
+            <BugCommentsDetail
+              commentsCount={comments?.items.length ?? 0}
+              bugId={bugId}
+              campaignId={campaignId}
+            />
+          )}
           <BugDetails bug={bug} />
           {currentBugId && (
             <BugDuplicates cid={campaignId} bugId={currentBugId} />