Feat/new feedback endpoint (#1278)

* refactor: Replace update feedback form to use new workitem endpoint for slack/devops logic

* refactor: Update severity label to use urgency display text and clean up unused code

* refactor: sort severity options

* refactor: small fixes from review

* test: change handlers to new endpoint

* test: fix handlers in mockHandlers

* refactor: update feedback handling to allow undefined values and clean up urgency options

* refactor: smaller fixes from review

* test: use display name to look for severity options

* test: adjustment to tests to fit reduced endpoint amount

* test: changed test to fit only 2 endpoints instead of 3

* refactor: smaller fixes from review

* test: adjustments for coverage

Author: aslakihle

bun.lock

@@ -1,10 +1,11 @@
+import { BugSeverity } from '@equinor/subsurface-app-management';
+
 import { FeedbackLocalStorage, StatusEnum } from './Feedback.types';
 
 export const MAX_FILE_SIZE_BYTES = 1048575;
 
 export const SERVICE_NOW_QUERY_KEY = 'serviceNowIncident';
-export const SLACK_POST_QUERY_KEY = 'slackPostMessage';
-export const SLACK_FILE_QUERY_KEY = 'slackFileUpload';
+export const CREATE_WORK_ITEM_QUERY_KEY = 'createWorkItem';
 
 export const EQUINOR_EMAIL_SUFFIX = '.equinor.com';
 
@@ -13,12 +14,21 @@ export const DEFAULT_REQUEST_ERROR_MESSAGE =
 
 export const ONE_HOUR_IN_MS: number = 1000 * 60 * 60;
 
+const BUG_SEVERITY_ORDER: BugSeverity[] = [
+  BugSeverity.DOES_NOT_AFFECT_ME,
+  BugSeverity.IMPEDES_MY_PROGRESS,
+  BugSeverity.UNABLE_TO_WORK,
+];
+
+export const SORTED_BUG_SEVERITY_OPTIONS = Object.values(BugSeverity).sort(
+  (a, b) => BUG_SEVERITY_ORDER.indexOf(a) - BUG_SEVERITY_ORDER.indexOf(b)
+);
+
 export const DEFAULT_FEEDBACK_LOCAL_STORAGE: FeedbackLocalStorage = {
   feedbackContent: {
     title: '',
     description: '',
     url: '',
-    urgency: '',
   },
   serviceNowRequestResponse: {
     status: StatusEnum.idle,

src/organisms/TopBar/Resources/Feedback/Feedback.const.ts

@@ -1,7 +1,7 @@
+import { WorkItemType } from '@equinor/subsurface-app-management';
 import { faker } from '@faker-js/faker';
 
 import { Feedback } from './Feedback';
-import { FeedbackType } from './Feedback.types';
 import { TopBar } from 'src/organisms/TopBar/TopBar';
 import {
   Providers,
@@ -14,7 +14,7 @@ test('Shows error if url does not contain .equinor', async () => {
   const handleOnClose = vi.fn();
   await renderWithRouter(
     <TopBar applicationIcon="test" applicationName="Test">
-      <Feedback onClose={handleOnClose} selectedType={FeedbackType.BUG} />
+      <Feedback onClose={handleOnClose} selectedType={WorkItemType.BUG} />
     </TopBar>,
     { initialEntries: ['/'], routes: ['/'] },
     { wrapper: Providers }

src/organisms/TopBar/Resources/Feedback/Feedback.test.tsx

@@ -1,12 +1,13 @@
 import { FC } from 'react';
 
+import { WorkItemType } from '@equinor/subsurface-app-management';
+
 import { FeedbackContextProvider } from './providers/FeedbackContextProvider';
-import { FeedbackType } from './Feedback.types';
 import { FeedbackInner } from './FeedbackInner';
 
 interface FeedbackProps {
   onClose: () => void;
-  selectedType: FeedbackType;
+  selectedType: WorkItemType;
 }
 
 export const Feedback: FC<FeedbackProps> = ({ onClose, selectedType }) => {

src/organisms/TopBar/Resources/Feedback/Feedback.tsx

@@ -2,31 +2,21 @@ import { FileWithPath } from 'react-dropzone';
 
 import {
   ApiError,
+  BugSeverity,
   ServiceNowIncidentResponse,
 } from '@equinor/subsurface-app-management';
 
-export enum UrgencyOption {
-  NO_IMPACT = 'I am not impacted',
-  IMPEDES = 'It impedes my progress',
-  UNABLE = 'I am unable to work',
-}
-
-export enum FeedbackType {
-  BUG = 'bug',
-  SUGGESTION = 'suggestion',
-}
 export enum StatusEnum {
   error = 'error',
   idle = 'idle',
   pending = 'pending',
   success = 'success',
-  partial = 'partial',
 }
 
 export interface FeedbackContentLocalStorage {
   title: string;
   description: string;
-  urgency?: string;
+  urgency?: BugSeverity;
   url?: string;
 }
 
@@ -40,21 +30,11 @@ export interface RequestStatusType {
   errorText?: string;
 }
 
-export type AttachmentStatus = RequestStatusType & {
-  fileName: string;
-};
-
 export interface FeedbackLocalStorage {
   feedbackContent: FeedbackContentLocalStorage;
   serviceNowRequestResponse: RequestStatusType;
 }
 
-export interface SlackStatus {
-  slackRequestResponse: RequestStatusType;
-  slackAttachmentsResponse: AttachmentStatus[];
-}
-export type FeedbackRequestStatus = FeedbackLocalStorage & SlackStatus;
-
 export type UpdateRequestStatusHandler = ({
   status,
   response,

src/organisms/TopBar/Resources/Feedback/Feedback.types.ts

@@ -1,18 +1,18 @@
+import { BugSeverity } from '@equinor/subsurface-app-management';
 import { faker } from '@faker-js/faker';
 
 import { getSeverityEmoji } from './Feedback.utils';
-import { UrgencyOption } from 'src/organisms/TopBar/Resources/Feedback/Feedback.types';
 
 const SEVERITY_EMOJI = {
-  [UrgencyOption.NO_IMPACT]: ':large_yellow_circle:',
-  [UrgencyOption.IMPEDES]: ':large_orange_circle:',
-  [UrgencyOption.UNABLE]: ':red_circle:',
+  [BugSeverity.DOES_NOT_AFFECT_ME]: ':large_yellow_circle:',
+  [BugSeverity.IMPEDES_MY_PROGRESS]: ':large_orange_circle:',
+  [BugSeverity.UNABLE_TO_WORK]: ':red_circle:',
 };
 
 test('getSeverityEmoji works as expected', async () => {
   const title = faker.animal.dog();
   const description = faker.lorem.sentence();
-  for (const urgency of Object.values(UrgencyOption)) {
+  for (const urgency of Object.values(BugSeverity)) {
     expect(getSeverityEmoji({ urgency, title, description })).toBe(
       SEVERITY_EMOJI[urgency]
     );

src/organisms/TopBar/Resources/Feedback/Feedback.utils.test.ts

@@ -1,23 +1,22 @@
 import { FileWithPath } from 'react-dropzone';
 
-import { ServiceNowUrgency } from '@equinor/subsurface-app-management';
-
 import {
-  Browsers,
-  FeedbackContentType,
-  FeedbackType,
-  UrgencyOption,
-} from './Feedback.types';
+  BugSeverity,
+  ServiceNowUrgency,
+  WorkItemType,
+} from '@equinor/subsurface-app-management';
+
+import { Browsers, FeedbackContentType } from './Feedback.types';
 import { EnvironmentType } from 'src/atoms/enums/Environment';
 import { capitalize, environment, formatDate } from 'src/atoms/utils';
 
 const { getAppName, getEnvironmentName } = environment;
 
 export const getSeverityEmoji = (feedbackContent: FeedbackContentType) => {
-  if (feedbackContent.urgency === UrgencyOption.NO_IMPACT) {
+  if (feedbackContent.urgency === BugSeverity.DOES_NOT_AFFECT_ME) {
     return ':large_yellow_circle:';
   }
-  if (feedbackContent.urgency === UrgencyOption.IMPEDES) {
+  if (feedbackContent.urgency === BugSeverity.IMPEDES_MY_PROGRESS) {
     return ':large_orange_circle:';
   }
   return ':red_circle:';
@@ -42,23 +41,36 @@ export const readUploadedFileAsText = (
   });
 };
 
-export const getUrgencyNumber = (urgency: UrgencyOption) => {
+// We moved to only do normal severity in the service now request to have a standard time to respond. (Severity could reduce it from 4 days, to 1 day)
+export const getServiceNowUrgencyNumber = (urgency: BugSeverity) => {
   switch (urgency) {
-    case UrgencyOption.UNABLE:
-      return ServiceNowUrgency.NORMAL;
-    case UrgencyOption.IMPEDES:
-      return ServiceNowUrgency.NORMAL;
-    case UrgencyOption.NO_IMPACT:
+    case BugSeverity.UNABLE_TO_WORK:
+    case BugSeverity.IMPEDES_MY_PROGRESS:
+    case BugSeverity.DOES_NOT_AFFECT_ME:
+    default:
       return ServiceNowUrgency.NORMAL;
   }
 };
 
+export const getUrgencyDisplayText = (urgency: BugSeverity) => {
+  switch (urgency) {
+    case BugSeverity.UNABLE_TO_WORK:
+      return 'I am unable to work';
+    case BugSeverity.IMPEDES_MY_PROGRESS:
+      return 'It impedes my progress';
+    case BugSeverity.DOES_NOT_AFFECT_ME:
+      return 'It does not affect me';
+    default:
+      return 'Not found';
+  }
+};
+
 export const createServiceNowDescription = (
   feedbackContent: FeedbackContentType,
   field: string | null | undefined
 ) => {
   const locationText = `Url location of bug: ${feedbackContent.url} \n`;
-  const severityText = `Severity of bug: ${feedbackContent.urgency} \n`;
+  const severityText = `Severity of bug: ${feedbackContent.urgency ? getUrgencyDisplayText(feedbackContent.urgency) : 'Not found'} \n`;
   const fieldText = `Field: ${capitalize(field ?? '')} \n`;
   const browserText = `Browser: ${getBrowserInfo()} \n`;
 
@@ -119,11 +131,11 @@ export const getBrowserInfo = () => {
 export const createSlackMessage = (
   feedbackContent: FeedbackContentType,
   field?: string | null,
-  selectedType?: FeedbackType,
+  selectedType?: WorkItemType,
   email?: string,
   sysId?: string | null
 ) => {
-  const isBugReport = selectedType === FeedbackType.BUG;
+  const isBugReport = selectedType === WorkItemType.BUG;
   const typeText = isBugReport ? ':bug: Bug report' : ':bulb: Suggestion';
 
   const dateAndUrlSectionArray = [];
@@ -150,9 +162,9 @@ export const createSlackMessage = (
   if (feedbackContent.urgency) {
     titleAndSeveritySectionArray.push({
       type: 'mrkdwn',
-      text: `*Severity* \n ${getSeverityEmoji(feedbackContent)} ${
+      text: `*Severity* \n ${getSeverityEmoji(feedbackContent)} ${getUrgencyDisplayText(
         feedbackContent.urgency
-      }`,
+      )}`,
     });
   }
   const blockArray = [

src/organisms/TopBar/Resources/Feedback/Feedback.utils.ts

@@ -2,11 +2,11 @@ import { FC, FormEvent, useMemo } from 'react';
 
 import { Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
+import { WorkItemType } from '@equinor/subsurface-app-management';
 
 import { LockedInputTooltip } from './LockedInputTooltip';
 import { spacings } from 'src/atoms/style';
 import { TextField } from 'src/molecules/TextField/TextField';
-import { FeedbackType } from 'src/organisms/TopBar/Resources/Feedback/Feedback.types';
 import { useFeedbackContext } from 'src/organisms/TopBar/Resources/Feedback/hooks/useFeedbackContext';
 
 import styled from 'styled-components';
@@ -36,7 +36,7 @@ export const Description: FC = () => {
 
   return (
     <Container>
-      {selectedType === FeedbackType.BUG && (
+      {selectedType === WorkItemType.BUG && (
         <div>
           <Typography group="input" variant="text" color={questionColor}>
             What is the specific bug?
@@ -60,7 +60,7 @@ export const Description: FC = () => {
           meta="Required"
           value={feedbackContent.description}
           placeholder={
-            selectedType === FeedbackType.BUG
+            selectedType === WorkItemType.BUG
               ? 'Describe the bug, including expectations, reproductions steps, any workarounds...'
               : 'Describe the feature. What would be the value for you?'
           }

src/organisms/TopBar/Resources/Feedback/FeedbackForm/Description.tsx

@@ -2,8 +2,8 @@ import { FC, useMemo } from 'react';
 
 import { Button, Icon, Typography } from '@equinor/eds-core-react';
 import { info_circle } from '@equinor/eds-icons';
+import { WorkItemType } from '@equinor/subsurface-app-management';
 
-import { FeedbackType } from '../Feedback.types';
 import { useFeedbackContext } from '../hooks/useFeedbackContext';
 import { UploadFile } from './UploadFile/UploadFile';
 import { Description } from './Description';
@@ -47,7 +47,7 @@ export const FeedbackForm: FC = () => {
     <ContentWrapper>
       <Container>
         <Title />
-        {selectedType === FeedbackType.BUG && (
+        {selectedType === WorkItemType.BUG && (
           <>
             <Severity />
             <Url />
@@ -63,7 +63,7 @@ export const FeedbackForm: FC = () => {
         </UploadInfo>
         <UploadFile />
         <ReportLocationText>
-          {selectedType === FeedbackType.BUG
+          {selectedType === WorkItemType.BUG
             ? 'Bug reports are sent to Service Now and to the development team directly'
             : 'Feature suggestions are sent to the development team directly'}
         </ReportLocationText>

src/organisms/TopBar/Resources/Feedback/FeedbackForm/FeedbackForm.tsx

@@ -1,7 +1,10 @@
 import { FC } from 'react';
 
+import { BugSeverity } from '@equinor/subsurface-app-management';
+
 import { SingleSelect } from 'src/molecules/Select/SingleSelect/SingleSelect';
-import { UrgencyOption } from 'src/organisms/TopBar/Resources/Feedback/Feedback.types';
+import { SORTED_BUG_SEVERITY_OPTIONS } from 'src/organisms/TopBar/Resources/Feedback/Feedback.const';
+import { getUrgencyDisplayText } from 'src/organisms/TopBar/Resources/Feedback/Feedback.utils';
 import { LockedInputTooltip } from 'src/organisms/TopBar/Resources/Feedback/FeedbackForm/LockedInputTooltip';
 import { useFeedbackContext } from 'src/organisms/TopBar/Resources/Feedback/hooks/useFeedbackContext';
 
@@ -11,9 +14,9 @@ const Container = styled.div`
   grid-column: 1/2;
 `;
 
-const ITEMS = Object.values(UrgencyOption).map((option) => ({
+const ITEMS = SORTED_BUG_SEVERITY_OPTIONS.map((option) => ({
   value: option,
-  label: option,
+  label: getUrgencyDisplayText(option),
 }));
 
 export const Severity: FC = () => {
@@ -22,8 +25,8 @@ export const Severity: FC = () => {
 
   const value = feedbackContent.urgency
     ? {
-        value: feedbackContent.urgency as UrgencyOption,
-        label: feedbackContent.urgency as UrgencyOption,
+        value: feedbackContent.urgency as BugSeverity,
+        label: getUrgencyDisplayText(feedbackContent.urgency),
       }
     : undefined;
 
@@ -34,18 +37,15 @@ export const Severity: FC = () => {
           items={ITEMS}
           label="Severity"
           meta="optional"
-          clearable={false}
+          clearable
           disabled={serviceNowSuccess}
           value={value}
           placeholder="Select error impact"
           onSelect={(newValue) => {
-            // Since clearable = false newValue is never undefined
-            updateFeedback('urgency', newValue!.value);
+            updateFeedback('urgency', newValue?.value);
           }}
         />
       </LockedInputTooltip>
     </Container>
   );
 };
-
-export default Severity;