Show spinner while ticket is being generated

changelog.d/560.added.md

@@ -0,0 +1 @@
+Visual feedback via spinner in the _Create ticket_-button that ticket is being automatically generated.

changelog.d/560.fixed.md

@@ -0,0 +1 @@
+Bug with inconsistent text and background coloring of the custom made buttons on the _Incidents_ page.

src/components/centercontainer/index.tsx

@@ -6,7 +6,7 @@ type CenterContainerPropsType = { children: React.Props<{}>["children"] };
 const CenterContainer: React.FC<CenterContainerPropsType> = ({ children }: CenterContainerPropsType) => {
   return (
     <Grid container alignItems="center" justify="space-evenly" direction="row">
-      <Grid item>{children}</Grid>
+      {children}
     </Grid>
   );
 };

src/components/incident/IncidentDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import "react-table/react-table.css";
 
 import Grid from "@material-ui/core/Grid";
@@ -48,6 +48,7 @@ import { globalConfig } from "../../config";
 import "./IncidentDetails.css";
 import {Hidden} from "@material-ui/core";
 import {ModifyTicketButton, TicketModifiableField} from "./ModifyTicketAction";
+import Spinning from "../spinning";
 type IncidentDetailsListItemPropsType = {
   title: string;
   detail: string | React.ReactNode;
@@ -174,6 +175,7 @@ const IncidentDetails: React.FC<IncidentDetailsPropsType> = ({
 
   const [{ result: acks, isLoading: isAcksLoading }, setAcksPromise] = useApiIncidentAcks();
   const [{ result: events, isLoading: isEventsLoading }, setEventsPromise] = useApiIncidentEvents();
+  const [isGenerateTicketLoading, setIsGenerateTicketLoading] = useState<boolean>(false);
 
   useEffect(() => {
     setAcksPromise(api.getIncidentAcks(incident.pk));
@@ -242,15 +244,19 @@ const IncidentDetails: React.FC<IncidentDetailsPropsType> = ({
   };
 
   const handleCreateTicket = () => {
+    setIsGenerateTicketLoading(true);
     api
         .putCreateTicketEvent(incident.pk)
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         .then(({ ticket_url }: IncidentTicketUrlBody) => {
           displayAlert(`Created ticket from incident ${incident.pk}`, "success");
           onIncidentChange({ ...incident, ticket_url });
+          setIsGenerateTicketLoading(false);
           window.open(ticket_url, '_blank', 'noopener,noreferrer');
         })
-        .catch((error) => {});
+        .catch((error) => {
+          setIsGenerateTicketLoading(false);
+        });
   };
 
   const handleSaveTicket = (url?: string) => {
@@ -395,13 +401,17 @@ const IncidentDetails: React.FC<IncidentDetailsPropsType> = ({
                         onManualOpen={handleManualOpen}
                         isBulk={false}
                       />
-                    </CenterContainer>
-                    <CenterContainer>
+
                       <ModifyTicketButton
-                          onCreateTicket={handleCreateTicket}
-                          onSaveTicket={handleSaveTicket}
-                          ticketUrl={incident.ticket_url}
-                          isBulk={false}>
+                        onCreateTicket={handleCreateTicket}
+                        onSaveTicket={handleSaveTicket}
+                        ticketUrl={incident.ticket_url}
+                        isBulk={false}
+                        modifyTicketButtonProps={{
+                          startIcon: isGenerateTicketLoading ? <Spinning shouldSpin /> : null,
+                          variant: "contained",
+                        }}
+                      >
 
                       </ModifyTicketButton>
                     </CenterContainer>
@@ -566,7 +576,12 @@ const IncidentDetails: React.FC<IncidentDetailsPropsType> = ({
                           onCreateTicket={handleCreateTicket}
                           onSaveTicket={handleSaveTicket}
                           ticketUrl={incident.ticket_url}
-                          isBulk={false}>
+                          isBulk={false}
+                          modifyTicketButtonProps={{
+                            startIcon: isGenerateTicketLoading ? <Spinning shouldSpin /> : null,
+                            variant: "contained",
+                          }}
+                      >
                       </ModifyTicketButton>
                     </Grid>
                     <Grid item className="close-button-container" data-testid={"details-button-sm-interactive-item"}>

src/components/incident/styles.tsx

@@ -30,16 +30,16 @@ export const useStyles = makeStyles((theme: Theme) =>
       "flex-grow": 0,
     },
     dangerousButton: {
-      background: theme.palette.warning.main,
-      color: "#FFFFFF !important",
+      background: `${theme.palette.warning.main} !important`,
+      color: `${WHITE} !important`,
         '&:hover': {
             backgroundColor: `${theme.palette.warning.main} !important`,
             opacity: 0.7
         },
     },
     safeButton: {
-      background: theme.palette.primary.main,
-      color: "#FFFFFF !important",
+      background: `${theme.palette.primary.main} !important`,
+      color: `${WHITE} !important`,
         '&:hover': {
             backgroundColor: `${theme.palette.primary.main} !important`,
             opacity: 0.7

src/components/incident/test/IncidentDetails.test.tsx

@@ -1,7 +1,7 @@
 /**  * @jest-environment jsdom */
 
 import React from "react";
-import {render, screen, waitFor, within} from "@testing-library/react";
+import {render, screen, waitFor, waitForElementToBeRemoved, within} from "@testing-library/react";
 
 import IncidentDetails from "../IncidentDetails";
 import {Incident, IncidentTag, IncidentTicketUrlBody, SourceSystem} from "../../../api/types";
@@ -319,6 +319,136 @@ describe('Incident Details: Create Ticket button',() => {
         // Create ticket endpoint was not called
         expect(createTicketSpy).toHaveBeenCalledTimes(0);
     });
+
+    it("should not display spinner within create ticket button by default in the incident details view", async () => {
+        await waitFor(() => {
+            render(
+              <IncidentDetails
+                incident={incidentWithoutTicketMock}
+                onIncidentChange={onIncidentChange}
+              />
+            )
+        });
+
+        // Create ticket button is rendered
+        const createTicketButton = screen.getByRole('button', {name: /create ticket/i});
+        expect(createTicketButton).toBeInTheDocument();
+
+        // Spinner is not present within create ticket button
+        expect(within(createTicketButton).queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    it("should display spinner within create ticket button after user confirms create ticket action in the dialog", async () => {
+        await waitFor(() => {
+            render(
+              <IncidentDetails
+                incident={incidentWithoutTicketMock}
+                onIncidentChange={onIncidentChange}
+              />
+            )
+        });
+
+        // User clicks on the Create Ticket button
+        const createTicketButton = screen.getByRole('button', {name: /create ticket/i});
+        userEvent.click(createTicketButton);
+
+        // User confirms create ticket action in the dialog
+        const dialogSubmitButton = screen.getByRole('button', {name: /yes/i});
+        expect(dialogSubmitButton).toBeInTheDocument();
+        userEvent.click(dialogSubmitButton);
+
+        // Spinner appears within create ticket button
+        const createTicketProgress = within(createTicketButton).getByRole('progressbar');
+        expect(createTicketProgress).toBeInTheDocument();
+    });
+
+    it("should not display spinner within create ticket button after user cancels create ticket action in the dialog", async () => {
+        await waitFor(() => {
+            render(
+              <IncidentDetails
+                incident={incidentWithoutTicketMock}
+                onIncidentChange={onIncidentChange}
+              />
+            )
+        });
+
+        // User clicks on the Create Ticket button
+        const createTicketButton = screen.getByRole('button', {name: /create ticket/i});
+        userEvent.click(createTicketButton);
+
+        // User cancels create ticket action in the dialog
+        const dialogCancelButton = screen.getByRole('button', {name: /no/i});
+        expect(dialogCancelButton).toBeInTheDocument();
+        userEvent.click(dialogCancelButton);
+
+        // Spinner is not present within create ticket button
+        expect(within(createTicketButton).queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+
+    it("should stop displaying spinner within create ticket button after error on create ticket operation", async () => {
+        createTicketSpy.mockRejectedValue(new Error("Create ticket test error"));
+
+        await waitFor(() => {
+            render(
+              <IncidentDetails
+                incident={incidentWithoutTicketMock}
+                onIncidentChange={onIncidentChange}
+              />
+            )
+        });
+
+        // User clicks on the Create Ticket button
+        const createTicketButton = screen.getByRole('button', {name: /create ticket/i});
+        userEvent.click(createTicketButton);
+
+        // User confirms create ticket action
+        const dialogSubmitButton = screen.getByRole('button', {name: /yes/i});
+        expect(dialogSubmitButton).toBeInTheDocument();
+        userEvent.click(dialogSubmitButton);
+
+        // Spinner appears within create ticket button
+        const createTicketProgress = within(createTicketButton).getByRole('progressbar');
+        expect(createTicketProgress).toBeInTheDocument();
+
+        // Create ticket endpoint was called with correct incident pk
+        expect(createTicketSpy).toHaveBeenCalledTimes(1)
+        expect(createTicketSpy).toHaveBeenCalledWith(4000)
+
+        // Spinner within create ticket button disappears
+        await waitForElementToBeRemoved(createTicketProgress);
+    });
+
+    it("should stop displaying spinner within create ticket button after success on create ticket operation", async () => {
+        await waitFor(() => {
+            render(
+              <IncidentDetails
+                incident={incidentWithoutTicketMock}
+                onIncidentChange={onIncidentChange}
+              />
+            )
+        });
+
+        // User clicks on the Create Ticket button
+        const createTicketButton = screen.getByRole('button', {name: /create ticket/i});
+        userEvent.click(createTicketButton);
+
+        // User confirms create ticket action
+        const dialogSubmitButton = screen.getByRole('button', {name: /yes/i});
+        expect(dialogSubmitButton).toBeInTheDocument();
+        userEvent.click(dialogSubmitButton);
+
+        // Spinner appears within create ticket button
+        const createTicketProgress = within(createTicketButton).getByRole('progressbar');
+        expect(createTicketProgress).toBeInTheDocument();
+
+        // Create ticket endpoint was called with correct incident pk
+        expect(createTicketSpy).toHaveBeenCalledTimes(1)
+        expect(createTicketSpy).toHaveBeenCalledWith(4000)
+        expect(createTicketSpy).toHaveReturnedWith(Promise.resolve({ticket_url: generatedTicketUrlMockValue}))
+
+        // Spinner within create ticket button disappears
+        await waitForElementToBeRemoved(createTicketProgress);
+    });
 });
 
 describe('Primary Details section: Source internal incident ID',() => {