UI to update ticket status in the ticket header

app/webpacker/components/Tickets/TicketHeader/StatusView.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { Button, Dropdown, Icon } from 'semantic-ui-react';
+import _ from 'lodash';
+import { actionUrls } from '../../../lib/requests/routes.js.erb';
+import { ticketStatuses } from '../../../lib/wca-data.js.erb';
+import useSaveAction from '../../../lib/hooks/useSaveAction';
+import Loading from '../../Requests/Loading';
+import useInputState from '../../../lib/hooks/useInputState';
+
+const ticketTypePrefix = 'Tickets';
+
+function StatusViewEditMode({
+  ticketDetails, currentStakeholder, setEditMode, sync,
+}) {
+  // metadataType will be a string like TicketsTicketType
+  const { ticket: { id, metadata, metadata_type: metadataType } } = ticketDetails;
+  // To get ticketType, first remove prefix 'Tickets' and then convert it to snake case.
+  const ticketType = _.snakeCase(_.replace(metadataType, ticketTypePrefix, ''));
+
+  const [newStatus, setNewStatus] = useInputState(metadata.status);
+  const { save, saving } = useSaveAction();
+
+  function saveStatus(status) {
+    save(
+      actionUrls.tickets.updateStatus(id),
+      {
+        ticket_status: status,
+        acting_stakeholder_id: currentStakeholder.id,
+      },
+      sync,
+      { method: 'POST' },
+    );
+  }
+
+  if (saving) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <span>{'Status: '}</span>
+      <Dropdown
+        inline
+        options={Object.keys(ticketStatuses[ticketType]).map((key) => ({
+          key,
+          text: ticketStatuses[ticketType][key],
+          value: key,
+        }))}
+        value={newStatus}
+        onChange={setNewStatus}
+      />
+      {' '}
+      <Button
+        primary
+        disabled={newStatus === metadata.status}
+        onClick={() => saveStatus(newStatus)}
+      >
+        Save
+      </Button>
+      {' '}
+      <Button onClick={() => setEditMode(false)}>Cancel</Button>
+    </>
+  );
+}
+
+export default function StatusView({ ticketDetails, currentStakeholder, sync }) {
+  const { ticket: { metadata } } = ticketDetails;
+  const [editMode, setEditMode] = useState(false);
+
+  return editMode ? (
+    <StatusViewEditMode
+      ticketDetails={ticketDetails}
+      currentStakeholder={currentStakeholder}
+      setEditMode={setEditMode}
+      sync={sync}
+    />
+  ) : (
+    <>
+      <span>{`Status: ${metadata.status}`}</span>
+      {' '}
+      <Icon
+        name="edit"
+        link
+        onClick={() => setEditMode(true)}
+      />
+    </>
+  );
+}

app/webpacker/components/Tickets/TicketHeader/index.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Card, Header } from 'semantic-ui-react';
+import StatusView from './StatusView';
+
+export default function TicketHeader({ ticketDetails, currentStakeholder, sync }) {
+  const { ticket: { id } } = ticketDetails;
+
+  return (
+    <Card fluid>
+      <Card.Content>
+        <Header as="h1">{`Ticket #${id}`}</Header>
+        <StatusView
+          ticketDetails={ticketDetails}
+          currentStakeholder={currentStakeholder}
+          sync={sync}
+        />
+      </Card.Content>
+    </Card>
+  );
+}

app/webpacker/components/Tickets/index.jsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import {
   Button, Container, Dropdown, Message, Modal,
 } from 'semantic-ui-react';
@@ -41,7 +41,11 @@ function SkateholderSelector({ stakeholderList, setUserSelectedStakeholder }) {
 function TicketContent({ ticketDetails, currentStakeholder, sync }) {
   return (
     <>
-      <TicketHeader ticketDetails={ticketDetails} />
+      <TicketHeader
+        ticketDetails={ticketDetails}
+        currentStakeholder={currentStakeholder}
+        sync={sync}
+      />
       <TicketWorkbench
         ticketDetails={ticketDetails}
         sync={sync}