Drawer-fixes-pro

src/locales/en/translation.json

@@ -778,6 +778,8 @@
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Group by Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "Show all",
+  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "Publish",
+  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Unpublish",
   "__INSIGHTS_PAGE_DELETE_MODAL_BODY_TEXT": "Are you sure to delete this insight?",
   "__INSIGHTS_PAGE_DELETE_MODAL_CONTINUE_BUTTON": "Delete",
   "__INSIGHTS_PAGE_DELETE_MODAL_HEADER_TITLE": "Delete insight",

src/locales/it/translation.json

@@ -807,6 +807,8 @@
   "__INSIGHTS_PAGE_CLOSE_DRAWER_BUTTON": "Close drawer",
   "__INSIGHTS_PAGE_COLLECTION_GROUP_BY_USECASE": "Organizza per Use Case",
   "__INSIGHTS_PAGE_COLLECTION_UNGROUP": "",
+  "__INSIGHTS_PAGE_DRAWER_PUBLISH": "pubblica",
+  "__INSIGHTS_PAGE_DRAWER_UNPUBLISH": "Spubblica",
   "__INSIGHTS_PAGE_DELETE_MODAL_BODY_TEXT": "Sei sicuro di voler eliminare questo insight",
   "__INSIGHTS_PAGE_DELETE_MODAL_CONTINUE_BUTTON": "Elimina",
   "__INSIGHTS_PAGE_DELETE_MODAL_HEADER_TITLE": "Elimina insight",

src/pages/Bugs/Filters/GroupBy.tsx

@@ -10,7 +10,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { setGroupBy } from 'src/features/bugsPage/bugsPageSlice';
-import { ReactComponent as Icon } from './assets/layers_icon.svg';
+import { ReactComponent as Icon } from 'src/assets/icons/layers_icon.svg';
 import { DropdownLabel } from './DropdownLabel';
 
 export const GroupBy = () => {

src/pages/Insights/Collection/components/GroupByToggle.tsx

@@ -5,10 +5,10 @@ import {
 } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { styled } from 'styled-components';
-import { ReactComponent as GroupedStroke } from '@zendeskgarden/svg-icons/src/16/rearrange-stroke.svg';
-import { ReactComponent as GroupedFill } from '@zendeskgarden/svg-icons/src/16/rearrange-fill.svg';
 import { ReactComponent as UngroupedFill } from '@zendeskgarden/svg-icons/src/16/grid-2x2-fill.svg';
 import { appTheme } from 'src/app/theme';
+import { ReactComponent as GroupedFill } from 'src/assets/icons/layers_icon.svg';
+import { ReactComponent as GroupedFillGrey } from 'src/assets/icons/layers_icon-grey.svg';
 import { useInsightContext } from '../../InsightContext';
 
 const Wrapper = styled.div`
@@ -34,9 +34,9 @@ export const GroupByToggle = () => {
           isPrimary={groupObservationsBy === 'usecase-grapes'}
         >
           {groupObservationsBy === 'usecase-grapes' ? (
-            <GroupedStroke />
+            <GroupedFill />
           ) : (
-            <GroupedFill color={getColor(appTheme.colors.neutralHue, 600)} />
+            <GroupedFillGrey />
           )}
         </IconButton>
       </Tooltip>

src/pages/Insights/InsightsDrawer/InsightAccordion.tsx

@@ -3,6 +3,7 @@ import { useFormikContext } from 'formik';
 import { appTheme } from 'src/app/theme';
 import { Divider } from 'src/common/components/divider';
 import { GetCampaignsByCidInsightsApiResponse } from 'src/features/api';
+import { ReactComponent as ObservationIcon } from '@zendeskgarden/svg-icons/src/16/speech-bubble-conversation-stroke.svg';
 import { InsightFormValues } from '../FormProvider';
 import { AccordionLabel } from './components/AccordionLabel';
 import { getBgColor, getSeverityColor } from '../utils/getSeverityColor';
@@ -27,47 +28,40 @@ const Insight = ({
       >
         <Accordion.Section>
           <Accordion.Header>
-            <AccordionLabel
-              title={insight.title}
-              isPublished={insight.visible}
-              id={insight.id.toString()}
-            />
+            <AccordionLabel insight={insight} />
           </Accordion.Header>
           <Accordion.Panel style={{ padding: 0 }}>
-            <div style={{ marginBottom: appTheme.space.xl }}>
-              <Tag
-                isPill
-                color={getSeverityColor(insight.severity.name)}
-                hue={getBgColor(insight.severity.name)}
-              >
-                {insight.severity.name}
-              </Tag>
-            </div>
-            <MD isBold style={{ marginBottom: appTheme.space.xs }}>
-              Description
-            </MD>
-            <MD style={{ marginBottom: appTheme.space.sm }}>
-              {insight.description}
-            </MD>
+            {insight.description && (
+              <div style={{ marginBottom: appTheme.space.md }}>
+                <MD isBold style={{ marginBottom: appTheme.space.xs }}>
+                  Description
+                </MD>
+                <MD style={{ paddingBottom: appTheme.space.xs }}>
+                  {insight.description}
+                </MD>
+              </div>
+            )}
             <LG isBold style={{ marginBottom: appTheme.space.sm }}>
-              Observations
+              <ObservationIcon /> Observations
             </LG>
-            <MD>
-              In this insight there are: {insight.observations.length}{' '}
-              observations
-            </MD>
+            <MD>Observations in this insight: {insight.observations.length}</MD>
             <div style={{ marginBottom: appTheme.space.md }}>
               {insight.observations.map((o) => (
                 <div
                   style={{
                     borderLeft: `2px solid${appTheme.palette.grey[500]}`,
-                    paddingTop: appTheme.space.md,
-                    paddingLeft: appTheme.space.md,
-                    paddingBottom: appTheme.space.md,
+                    paddingTop: appTheme.space.sm,
+                    paddingLeft: appTheme.space.sm,
+                    paddingBottom: appTheme.space.sm,
                     marginTop: appTheme.space.md,
                   }}
                 >
-                  <SM isBold>&quot;{o.quotes}&quot;</SM>
+                  <SM isBold style={{ marginBottom: appTheme.space.sm }}>
+                    &quot;{o.quotes}&quot;
+                  </SM>
+                  <Tag isPill hue="">
+                    T{o.uploaderId}
+                  </Tag>
                 </div>
               ))}
             </div>

src/pages/Insights/InsightsDrawer/InsightForm.tsx

@@ -12,6 +12,7 @@ import {
   Skeleton,
   Tag,
   Textarea,
+  XL,
 } from '@appquality/unguess-design-system';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { Field as FormField } from '@zendeskgarden/react-forms';
@@ -58,6 +59,7 @@ const InsightForm = () => {
 
   return (
     <FormContainer>
+      <XL isBold>{t('__INSIGHTS_PAGE_INSIGHT_FORM_TITLE')}</XL>
       <div>
         <Label>{t('__INSIGHTS_PAGE_INSIGHT_FORM_FIELD_TITLE_LABEL')}</Label>
         <Field name="title">

src/pages/Insights/InsightsDrawer/components/AccordionLabel.tsx

@@ -6,37 +6,50 @@ import {
   Tooltip,
   useToast,
   Notification,
+  Tag,
+  SM,
 } from '@appquality/unguess-design-system';
-import { ReactComponent as Published } from '@zendeskgarden/svg-icons/src/16/eye-stroke.svg';
-import { ReactComponent as NotPublished } from '@zendeskgarden/svg-icons/src/16/eye-hide-fill.svg';
-import { usePatchInsightsByIidMutation } from 'src/features/api';
+import { ReactComponent as Published } from '@zendeskgarden/svg-icons/src/16/lock-locked-stroke.svg';
+import { ReactComponent as NotPublished } from '@zendeskgarden/svg-icons/src/16/lock-unlocked-fill.svg';
+import {
+  GetCampaignsByCidInsightsApiResponse,
+  usePatchInsightsByIidMutation,
+} from 'src/features/api';
 import { useTranslation } from 'react-i18next';
+import { getBgColor, getSeverityColor } from '../../utils/getSeverityColor';
 
 const Style = styled(Accordion.Label)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0;
+  display: grid;
+  grid-template-areas:
+    'title icon'
+    'usecase icon';
+  gap: ${({ theme }) => theme.space.sm};
+  .icon-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    grid-area: icon;
+    height: 100%;
+  }
 `;
 
-interface Props {
-  title: string;
-  id: string;
-  isPublished?: number;
-}
-
-export const AccordionLabel = ({ title, id, isPublished }: Props) => {
+export const AccordionLabel = ({
+  insight,
+}: {
+  insight: GetCampaignsByCidInsightsApiResponse[number];
+}) => {
   const { t } = useTranslation();
+  const { id, title, visible } = insight;
   const { addToast } = useToast();
   const [patchInsight, result] = usePatchInsightsByIidMutation();
   const handlePublish = () => {
     let notificationProps = {};
-    patchInsight({ iid: id, body: { visible: isPublished ? 0 : 1 } })
+    patchInsight({ iid: id.toString(), body: { visible: visible ? 0 : 1 } })
       .unwrap()
       .then(() => {
         notificationProps = {
           type: 'success',
-          message: isPublished
+          message: visible
             ? `${`Insight "${title}" ${t('_TOAST_UNPUBLISHED_MESSAGE')}`}`
             : `${`Insight "${title}" ${t('_TOAST_PUBLISHED_MESSAGE')}`}`,
         };
@@ -63,23 +76,39 @@ export const AccordionLabel = ({ title, id, isPublished }: Props) => {
   };
   return (
     <Style>
-      <LG isBold>{title}</LG>
-      <Tooltip
-        size="small"
-        type="light"
-        content={
-          isPublished
-            ? 'Click to unpublish this insight'
-            : 'Click to publish insight'
-        }
-      >
-        <IconButton
-          onClick={handlePublish}
-          disabled={result.status === 'pending'}
+      <LG isBold style={{ gridArea: 'title' }}>
+        {title}
+      </LG>
+      <div className="icon-button-wrapper">
+        <Tooltip
+          size="small"
+          type="light"
+          content={
+            visible
+              ? t('__INSIGHTS_PAGE_DRAWER_UNPUBLISH')
+              : t('__INSIGHTS_PAGE_DRAWER_PUBLISH')
+          }
+        >
+          <IconButton
+            onClick={handlePublish}
+            disabled={result.status === 'pending'}
+          >
+            {visible ? <Published /> : <NotPublished />}
+          </IconButton>
+        </Tooltip>
+      </div>
+      <div style={{ display: 'flex', gridArea: 'usecase' }}>
+        <Tag
+          isPill
+          color={getSeverityColor(insight.severity.name)}
+          hue={getBgColor(insight.severity.name)}
         >
-          {isPublished ? <Published /> : <NotPublished />}
-        </IconButton>
-      </Tooltip>
+          {insight.severity.name}
+        </Tag>
+        {insight.usecases.map((usecase) => (
+          <SM>{usecase.name}</SM>
+        ))}
+      </div>
     </Style>
   );
 };

src/pages/Insights/InsightsDrawer/components/ButtonsFooter.tsx

@@ -4,8 +4,8 @@ import {
   useToast,
 } from '@appquality/unguess-design-system';
 import { useFormikContext } from 'formik';
-import { ReactComponent as Published } from '@zendeskgarden/svg-icons/src/16/lock-unlocked-fill.svg';
-import { ReactComponent as NotPublished } from '@zendeskgarden/svg-icons/src/16/lock-locked-stroke.svg';
+import { ReactComponent as Published } from '@zendeskgarden/svg-icons/src/16/lock-locked-stroke.svg';
+import { ReactComponent as NotPublished } from '@zendeskgarden/svg-icons/src/16/lock-unlocked-fill.svg';
 import {
   GetCampaignsByCidInsightsApiResponse,
   usePatchInsightsByIidMutation,
@@ -60,7 +60,9 @@ export const ButtonsFooter = ({
       });
   };
   return (
-    <>
+    <div
+      style={{ paddingTop: appTheme.space.xs, marginBottom: appTheme.space.sm }}
+    >
       <div
         style={{
           display: 'grid',
@@ -96,7 +98,11 @@ export const ButtonsFooter = ({
         >
           {t('__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_EDIT')}
         </Button>
-        <Button isPrimary isAccent onClick={handlePublish}>
+        <Button
+          isPrimary={!insight.visible}
+          isAccent={!insight.visible}
+          onClick={handlePublish}
+        >
           {insight.visible ? (
             <span>
               <Published /> {t('__INSIGHTS_PAGE_INSIGHT_FORM_BUTTON_UNPUBLISH')}
@@ -116,6 +122,6 @@ export const ButtonsFooter = ({
           setIsConfirmationModalOpen={setConfirmDeleteModalOpen}
         />
       )}
-    </>
+    </div>
   );
 };

src/pages/Insights/InsightsDrawer/index.tsx

@@ -3,8 +3,8 @@ import { styled } from 'styled-components';
 import { getColor, Skeleton, XL } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
-import { ReactComponent as InsightIcon } from '@zendeskgarden/svg-icons/src/12/lightbulb-stroke.svg';
 import { useGetCampaignsByCidInsightsQuery } from 'src/features/api';
+import { ReactComponent as InsightIcon } from '@zendeskgarden/svg-icons/src/12/lightbulb-stroke.svg';
 import { useParams } from 'react-router-dom';
 import { Insight } from './InsightAccordion';
 import { InsightFormValues } from '../FormProvider';
@@ -53,19 +53,21 @@ const InsightsDrawer = () => {
 
   return (
     <DetailContainer>
-      <XL isBold>
-        {values.id === 0 && (
-          <InsightIcon style={{ marginRight: appTheme.space.md }} />
-        )}
-        {t('__INSIGHTS_PAGE_INSIGHTS_DRAWER_TITLE')}
-      </XL>
       <div
         style={{ marginTop: appTheme.space.md, opacity: isFetching ? 0.5 : 1 }}
       >
         {values.id === 0 ? (
-          insights &&
-          // insights list
-          insights.map((insight) => <Insight insight={insight} />)
+          <>
+            <XL isBold>
+              {values.id === 0 && (
+                <InsightIcon style={{ marginRight: appTheme.space.md }} />
+              )}
+              {t('__INSIGHTS_PAGE_INSIGHTS_DRAWER_TITLE')}
+            </XL>
+            {insights &&
+              // insights list
+              insights.map((insight) => <Insight insight={insight} />)}
+          </>
         ) : (
           // create or update insight
           <InsightForm />