From 4d70df7c8d39b444a6f087d1e465784f2ef0f32b Mon Sep 17 00:00:00 2001
From: Daniel M James <danieljamesin@google.com>
Date: Fri, 6 Dec 2024 21:21:57 +0530
Subject: [PATCH] UI to update ticket status in the ticket header

---
 .../components/Tickets/TicketHeader.jsx       | 13 ---
 .../Tickets/TicketHeader/StatusView.jsx       | 88 +++++++++++++++++++
 .../components/Tickets/TicketHeader/index.jsx | 20 +++++
 app/webpacker/components/Tickets/index.jsx    |  8 +-
 4 files changed, 114 insertions(+), 15 deletions(-)
 delete mode 100644 app/webpacker/components/Tickets/TicketHeader.jsx
 create mode 100644 app/webpacker/components/Tickets/TicketHeader/StatusView.jsx
 create mode 100644 app/webpacker/components/Tickets/TicketHeader/index.jsx

diff --git a/app/webpacker/components/Tickets/TicketHeader.jsx b/app/webpacker/components/Tickets/TicketHeader.jsx
deleted file mode 100644
index c6055f922c..0000000000
--- a/app/webpacker/components/Tickets/TicketHeader.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-import { Header } from 'semantic-ui-react';
-
-export default function TicketHeader({ ticketDetails }) {
-  const { ticket: { id, metadata } } = ticketDetails;
-
-  return (
-    <>
-      <Header as="h1">{`Ticket #${id}`}</Header>
-      <p>{`Status: ${metadata.status}`}</p>
-    </>
-  );
-}
diff --git a/app/webpacker/components/Tickets/TicketHeader/StatusView.jsx b/app/webpacker/components/Tickets/TicketHeader/StatusView.jsx
new file mode 100644
index 0000000000..babd594383
--- /dev/null
+++ b/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)}
+      />
+    </>
+  );
+}
diff --git a/app/webpacker/components/Tickets/TicketHeader/index.jsx b/app/webpacker/components/Tickets/TicketHeader/index.jsx
new file mode 100644
index 0000000000..1612a2285d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/webpacker/components/Tickets/index.jsx b/app/webpacker/components/Tickets/index.jsx
index 1833fb737b..fc3fc7bcf5 100644
--- a/app/webpacker/components/Tickets/index.jsx
+++ b/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}