Merge pull request #722 from AppQuality/bug-comments-fixes

fix: UI fixes to badge and Divider
AppQuality · Jan 3, 2024 · 9eb5669 · 9eb5669
2 parents 15054ee + ae12b3e
commit 9eb5669
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 78 deletions.
diff --git a/src/pages/Bug/Actions.tsx b/src/pages/Bug/Actions.tsx
@@ -2,6 +2,7 @@ import { ChatProvider, LG } from '@appquality/unguess-design-system';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
 import { appTheme } from 'src/app/theme';
 import { BugStateDropdown } from 'src/common/components/BugDetail/BugStateDropdown';
 import BugPriority from 'src/common/components/BugDetail/Priority';
@@ -44,6 +45,9 @@ export const Actions = () => {
 
   const cid = campaignId ? campaignId.toString() : '';
   const bid = bugId ? bugId.toString() : '';
+  const { hasFeatureFlag } = useFeatureFlag();
+
+  const canAccessComments = hasFeatureFlag('bug-comments');
 
   const {
     data: bug,
@@ -96,15 +100,17 @@ export const Actions = () => {
         <BugPriority bug={bug} />
       </GridWrapper>
       <BugTags bug={bug} refetchBugTags={refetch} />
-      <Divider style={{ margin: `${appTheme.space.sm} auto` }} />
-      <ChatProvider onSave={createCommentHandler}>
-        <ChatBox
-          campaignId={cid}
-          bugId={bid}
-          isSubmitting={isSubmitting}
-          setIsSubmitting={setIsSubmitting}
-        />
-      </ChatProvider>
+      {canAccessComments && (
+        <ChatProvider onSave={createCommentHandler}>
+          <Divider style={{ margin: `${appTheme.space.sm} auto` }} />
+          <ChatBox
+            campaignId={cid}
+            bugId={bid}
+            isSubmitting={isSubmitting}
+            setIsSubmitting={setIsSubmitting}
+          />
+        </ChatProvider>
+      )}
     </Container>
   );
 };
diff --git a/src/pages/Bug/Chat.tsx b/src/pages/Bug/Chat.tsx
@@ -7,15 +7,14 @@ 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';
 import { getInitials } from 'src/common/components/navigation/header/utils';
 import {
   useDeleteCampaignsByCidBugsAndBidCommentsCmidMutation,
   useGetCampaignsByCidBugsAndBidCommentsQuery,
 } from 'src/features/api';
+import { styled } from 'styled-components';
 import { DeleteCommentModal } from './DeleteCommentModal';
 
 function convertToLocalTime(utcString: string) {
@@ -67,10 +66,6 @@ export const ChatBox = ({
     commentsRefetch();
   };
 
-  const { hasFeatureFlag } = useFeatureFlag();
-
-  const canAccessFeature = hasFeatureFlag('bug-comments');
-
   useEffect(() => {
     if (comments) {
       // Scroll to bottom of chat
@@ -82,69 +77,64 @@ export const ChatBox = ({
   }, [comments]);
   return (
     <>
-      {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 }}
-            placeholderOptions={{
-              placeholder: () => t('__BUG_COMMENTS_CHAT_PLACEHOLDER'),
+      <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 }}
+          placeholderOptions={{
+            placeholder: () => t('__BUG_COMMENTS_CHAT_PLACEHOLDER'),
+          }}
+        />
+        <Chat.Footer>
+          <Button
+            isBasic
+            onClick={() => {
+              editor?.commands.clearContent(true);
             }}
-          />
-          <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>
-      )}
+          >
+            {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/components/BugCommentsDetails.tsx b/src/pages/Bugs/Content/components/BugCommentsDetails.tsx
@@ -31,7 +31,7 @@ const CommentsCountBadge = styled.span`
   background-color: ${({ theme }) => theme.palette.azure[600]};
   color: ${({ theme }) => theme.palette.white};
   margin-right: ${({ theme }) => theme.space.md};
-  width: ${appTheme.space.md};
+  padding: 0 ${appTheme.space.xxs};
   height: ${appTheme.space.sm};
   font-size: ${appTheme.fontSizes.xs};
   border-radius: ${appTheme.borderRadii.lg};