From 2f9783c12ab47900159bb552783840aead6769dd Mon Sep 17 00:00:00 2001
From: ZecD <dominik.zecoli@gmail.com>
Date: Wed, 3 Jan 2024 17:06:03 +0100
Subject: [PATCH 1/2] fix: UI fixes to badge and Divider

---
 src/hooks/useFeatureFlag.ts                   |   4 +-
 src/pages/Bug/Actions.tsx                     |  24 ++--
 src/pages/Bug/Chat.tsx                        | 127 ++++++++----------
 .../Content/components/BugCommentsDetails.tsx |   2 +-
 4 files changed, 77 insertions(+), 80 deletions(-)

diff --git a/src/hooks/useFeatureFlag.ts b/src/hooks/useFeatureFlag.ts
index b26bd73b2..bc8462381 100644
--- a/src/hooks/useFeatureFlag.ts
+++ b/src/hooks/useFeatureFlag.ts
@@ -4,9 +4,9 @@ export const useFeatureFlag = () => {
   const { userData: user } = useAppSelector((state) => state.user);
 
   const hasFeatureFlag = (slug?: string) => {
-    if (user && user.role === 'administrator') {
+    /*  if (user && user.role === 'administrator') {
       return true;
-    }
+    } */
     if (user && user.features) {
       return user.features.some((feature) => feature.slug === slug);
     }
diff --git a/src/pages/Bug/Actions.tsx b/src/pages/Bug/Actions.tsx
index c54ec22d7..d1206eb42 100644
--- 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
index d095f59c2..1168eb1c4 100644
--- a/src/pages/Bug/Chat.tsx
+++ b/src/pages/Bug/Chat.tsx
@@ -7,8 +7,6 @@ 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';
@@ -16,6 +14,8 @@ import {
   useDeleteCampaignsByCidBugsAndBidCommentsCmidMutation,
   useGetCampaignsByCidBugsAndBidCommentsQuery,
 } from 'src/features/api';
+import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
+import { styled } from 'styled-components';
 import { DeleteCommentModal } from './DeleteCommentModal';
 
 function convertToLocalTime(utcString: string) {
@@ -67,10 +67,6 @@ export const ChatBox = ({
     commentsRefetch();
   };
 
-  const { hasFeatureFlag } = useFeatureFlag();
-
-  const canAccessFeature = hasFeatureFlag('bug-comments');
-
   useEffect(() => {
     if (comments) {
       // Scroll to bottom of chat
@@ -82,69 +78,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
index 94e09a4f6..64a3995cd 100644
--- 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};

From ae12b3e42e1a75db75e4ad1edc750488ec19ed85 Mon Sep 17 00:00:00 2001
From: ZecD <dominik.zecoli@gmail.com>
Date: Wed, 3 Jan 2024 17:23:48 +0100
Subject: [PATCH 2/2] fix: uncommented wrongly commented code

---
 src/hooks/useFeatureFlag.ts | 4 ++--
 src/pages/Bug/Chat.tsx      | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useFeatureFlag.ts b/src/hooks/useFeatureFlag.ts
index bc8462381..b26bd73b2 100644
--- a/src/hooks/useFeatureFlag.ts
+++ b/src/hooks/useFeatureFlag.ts
@@ -4,9 +4,9 @@ export const useFeatureFlag = () => {
   const { userData: user } = useAppSelector((state) => state.user);
 
   const hasFeatureFlag = (slug?: string) => {
-    /*  if (user && user.role === 'administrator') {
+    if (user && user.role === 'administrator') {
       return true;
-    } */
+    }
     if (user && user.features) {
       return user.features.some((feature) => feature.slug === slug);
     }
diff --git a/src/pages/Bug/Chat.tsx b/src/pages/Bug/Chat.tsx
index 1168eb1c4..d7913ee43 100644
--- a/src/pages/Bug/Chat.tsx
+++ b/src/pages/Bug/Chat.tsx
@@ -14,7 +14,6 @@ import {
   useDeleteCampaignsByCidBugsAndBidCommentsCmidMutation,
   useGetCampaignsByCidBugsAndBidCommentsQuery,
 } from 'src/features/api';
-import { useFeatureFlag } from 'src/hooks/useFeatureFlag';
 import { styled } from 'styled-components';
 import { DeleteCommentModal } from './DeleteCommentModal';