UN-627-priority-dropdown

src/common/components/BugDetail/Meta/NeedReviewPill.tsx → src/common/components/BugDetail/Meta/NeedReviewTag.tsx

@@ -3,7 +3,7 @@ import { ReactComponent as NeedReviewIcon } from 'src/assets/icons/pill-icon-nee
 import { useTranslation } from 'react-i18next';
 import { theme } from 'src/app/theme';
 
-export const NeedReviewPill = () => {
+export const NeedReviewTag = () => {
   const { t } = useTranslation();
   return (
     <Tooltip

src/common/components/BugDetail/Meta/index.tsx

@@ -9,7 +9,7 @@ import { theme as globalTheme } from 'src/app/theme';
 import { Bug } from 'src/features/api';
 import { Pipe } from 'src/common/components/Pipe';
 import { WrappedText } from 'src/common/components/WrappedText';
-import { NeedReviewPill } from './NeedReviewPill';
+import { NeedReviewTag } from './NeedReviewTag';
 
 const Container = styled.div`
   margin-top: ${({ theme }) => theme.space.xs};
@@ -58,7 +58,7 @@ export default ({
         hasBackground
         severity={bug.severity.name.toLowerCase() as Severities}
       />
-      {bug.status.id === 4 && <NeedReviewPill />}
+      {bug.status.id === 4 && <NeedReviewTag />}
     </SeverityContainer>
     <XL
       isBold

src/common/components/BugDetail/Priority.tsx

@@ -0,0 +1,148 @@
+import {
+  Dropdown,
+  Select,
+  Item,
+  Menu,
+  Skeleton,
+} from '@appquality/unguess-design-system';
+import { Field } from '@zendeskgarden/react-dropdowns';
+import { useEffect, useState } from 'react';
+import { DEFAULT_BUG_PRIORITY } from 'src/constants';
+import {
+  Bug,
+  useGetCampaignsByCidPrioritiesQuery,
+  usePatchCampaignsByCidBugsAndBidMutation,
+} from 'src/features/api';
+import styled from 'styled-components';
+import { theme as globalTheme } from 'src/app/theme';
+import { useTranslation } from 'react-i18next';
+import { getPriorityInfo } from '../utils/getPriorityInfo';
+import { Label } from './Label';
+
+const StyledItem = styled(Item)`
+  display: flex;
+  align-items: center;
+
+  > svg {
+    margin-right: ${({ theme }) => theme.space.xs};
+  }
+`;
+
+const Container = styled.div`
+  display: inline-block;
+  width: 100%;
+  margin-top: ${({ theme }) => theme.space.md};
+`;
+
+const SelectedItem = styled.div`
+  display: flex;
+  align-items: center;
+
+  > svg {
+    margin-right: ${({ theme }) => theme.space.xs};
+  }
+`;
+
+type DropdownItem = {
+  id: number;
+  text: string;
+  slug: string;
+  icon: React.ReactNode;
+};
+
+const Priority = ({ bug }: { bug: Bug }) => {
+  const { t } = useTranslation();
+  const { priority: bugPriority } = bug;
+  const [selectedItem, setSelectedItem] = useState<DropdownItem>({
+    id: DEFAULT_BUG_PRIORITY.id,
+    slug: DEFAULT_BUG_PRIORITY.name,
+    text: getPriorityInfo(DEFAULT_BUG_PRIORITY.name as Priority, t).text,
+    icon: getPriorityInfo(DEFAULT_BUG_PRIORITY.name as Priority, t).icon,
+  });
+  const [options, setOptions] = useState<DropdownItem[]>([]);
+  const [patchBug] = usePatchCampaignsByCidBugsAndBidMutation();
+  const {
+    data: cpPriorities,
+    isLoading,
+    isFetching,
+    isError,
+  } = useGetCampaignsByCidPrioritiesQuery({
+    cid: bug.campaign_id.toString(),
+  });
+
+  useEffect(() => {
+    if (cpPriorities) {
+      setOptions(
+        cpPriorities.map((priority) => ({
+          id: priority.id,
+          slug: priority.name,
+          text: getPriorityInfo(priority.name as Priority, t).text,
+          icon: getPriorityInfo(priority.name as Priority, t).icon,
+        }))
+      );
+    }
+  }, [cpPriorities]);
+
+  useEffect(() => {
+    if (bugPriority) {
+      setSelectedItem({
+        id: bugPriority.id,
+        slug: bugPriority.name,
+        text: getPriorityInfo(bugPriority.name as Priority, t).text,
+        icon: getPriorityInfo(bugPriority.name as Priority, t).icon,
+      });
+    }
+  }, [bugPriority]);
+
+  if (isError) return null;
+
+  return (
+    <Container>
+      <Label style={{ marginBottom: globalTheme.space.xxs }}>
+        {t('__BUGS_PAGE_BUG_DETAIL_PRIORITY_LABEL')}
+      </Label>
+      {isLoading || isFetching ? (
+        <Skeleton
+          height="30px"
+          style={{ borderRadius: globalTheme.borderRadii.md }}
+        />
+      ) : (
+        <Dropdown
+          selectedItem={selectedItem}
+          onSelect={async (item: DropdownItem) => {
+            await patchBug({
+              cid: bug.campaign_id.toString(),
+              bid: bug.id.toString(),
+              body: {
+                priority_id: item.id,
+              },
+            });
+
+            setSelectedItem(item);
+          }}
+          downshiftProps={{
+            itemToString: (item: DropdownItem) => item && item.slug,
+          }}
+        >
+          <Field>
+            <Select isCompact>
+              <SelectedItem>
+                {selectedItem.icon} {selectedItem.text}
+              </SelectedItem>
+            </Select>
+          </Field>
+          <Menu>
+            {options &&
+              options.map((item) => (
+                <StyledItem key={item.slug} value={item}>
+                  {item.icon} {item.text}
+                </StyledItem>
+              ))}
+          </Menu>
+        </Dropdown>
+      )}
+    </Container>
+  );
+};
+
+export default Priority;

src/common/components/utils/getPriorityInfo.tsx

@@ -0,0 +1,49 @@
+import { TFunction } from 'react-i18next';
+import { ReactComponent as PriorityHighest } from 'src/assets/icons/priority-highest.svg';
+import { ReactComponent as PriorityHigh } from 'src/assets/icons/priority-high.svg';
+import { ReactComponent as PriorityMedium } from 'src/assets/icons/priority-medium.svg';
+import { ReactComponent as PriorityLow } from 'src/assets/icons/priority-low.svg';
+import { ReactComponent as PriorityLowest } from 'src/assets/icons/priority-lowest.svg';
+
+type PriorityInfo = {
+  icon: React.ReactNode;
+  text: string;
+};
+
+export const getPriorityInfo = (
+  priority: Priority,
+  t: TFunction
+): PriorityInfo => {
+  switch (priority) {
+    case 'highest':
+      return {
+        icon: <PriorityHighest />,
+        text: t('__BUG_PRIORITY_HIGHEST'),
+      };
+    case 'high':
+      return {
+        icon: <PriorityHigh />,
+        text: t('__BUG_PRIORITY_HIGH'),
+      };
+    case 'medium':
+      return {
+        icon: <PriorityMedium />,
+        text: t('__BUG_PRIORITY_MEDIUM'),
+      };
+    case 'low':
+      return {
+        icon: <PriorityLow />,
+        text: t('__BUG_PRIORITY_LOW'),
+      };
+    case 'lowest':
+      return {
+        icon: <PriorityLowest />,
+        text: t('__BUG_PRIORITY_LOWEST'),
+      };
+    default:
+      return {
+        icon: <PriorityMedium />,
+        text: t('__BUG_PRIORITY_MEDIUM'),
+      };
+  }
+};

src/common/components/utils/getStatusInfo.tsx

@@ -7,7 +7,6 @@ import {
   CampaignFunctionalIcon,
 } from '@appquality/unguess-design-system';
 import { theme } from 'src/app/theme';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 type StatusInfo = {

src/common/schema.ts

@@ -143,6 +143,15 @@ export interface paths {
       };
     };
   };
+  '/campaigns/{cid}/priorities': {
+    get: operations['get-campaigns-cid-priorities'];
+    parameters: {
+      path: {
+        /** Campaign id */
+        cid: string;
+      };
+    };
+  };
   '/campaigns/{cid}/usecases': {
     get: operations['get-campaigns-cid-usecases'];
     parameters: {
@@ -282,6 +291,7 @@ export interface components {
       severity: components['schemas']['BugSeverity'];
       type: components['schemas']['BugType'];
       replicability: components['schemas']['BugReplicability'];
+      priority?: components['schemas']['BugPriority'];
       created: string;
       occurred_date: string;
       updated?: string;
@@ -350,6 +360,11 @@ export interface components {
       id: number;
       name: string;
     };
+    /** BugPriority */
+    BugPriority: {
+      id: number;
+      name: string;
+    };
     /** BugTag */
     BugTag: {
       id: number;
@@ -1031,6 +1046,7 @@ export interface operations {
               tag_id: number;
               tag_name: string;
             }[];
+            priority?: components['schemas']['BugPriority'];
           };
         };
       };
@@ -1046,6 +1062,7 @@ export interface operations {
                 tag_name: string;
               }
           )[];
+          priority_id?: number;
         };
       };
     };
@@ -1249,6 +1266,25 @@ export interface operations {
       500: components['responses']['Error'];
     };
   };
+  'get-campaigns-cid-priorities': {
+    parameters: {
+      path: {
+        /** Campaign id */
+        cid: string;
+      };
+    };
+    responses: {
+      /** OK */
+      200: {
+        content: {
+          'application/json': components['schemas']['BugPriority'][];
+        };
+      };
+      400: components['responses']['Error'];
+      403: components['responses']['Error'];
+      500: components['responses']['Error'];
+    };
+  };
   'get-campaigns-cid-usecases': {
     parameters: {
       path: {

src/constants.ts

@@ -22,6 +22,11 @@ export const DEFAULT_EXPRESS_REQUIRED_COINS = 1;
 export const SERVICES_SHOW_TIPS = true;
 export const EXPRESS_USE_CASES_LIMIT = 5;
 
+export const DEFAULT_BUG_PRIORITY = {
+  id: 3,
+  name: 'medium',
+};
+
 export const EXPRESS_START_DATE_MAX_VALUE = 30;
 export const EXPRESS_BUSINESS_DAYS_TO_ADD = 2;
 export const EXPRESS_3_BUSINESS_DAYS_TO_ADD = 3;