From 7eda16b64093109f128eb8587475fae20883ea9a Mon Sep 17 00:00:00 2001
From: Kevin Haube <khaube@fearless.tech>
Date: Tue, 31 Oct 2023 13:19:51 -0400
Subject: [PATCH] Set up front-end to read and render actions

---
 src/packages/shared-types/opensearch.ts       |  5 ++
 src/services/api/handlers/item.ts             | 14 +----
 src/services/ui/src/api/useGetItem.ts         | 13 ++--
 src/services/ui/src/pages/detail/index.tsx    | 59 +++++++++++++------
 .../ui/src/utils/actionLabelMapper.ts         |  9 +++
 src/services/ui/src/utils/index.ts            |  1 +
 6 files changed, 66 insertions(+), 35 deletions(-)
 create mode 100644 src/services/ui/src/utils/actionLabelMapper.ts

diff --git a/src/packages/shared-types/opensearch.ts b/src/packages/shared-types/opensearch.ts
index e4e0b4e168..5841fa5fa6 100644
--- a/src/packages/shared-types/opensearch.ts
+++ b/src/packages/shared-types/opensearch.ts
@@ -1,5 +1,6 @@
 import { SeaToolTransform } from "./seatool";
 import { OneMacTransform } from "./onemac";
+import { Action } from "./actions";
 
 export type OsHit<T> = {
   _index: string;
@@ -34,6 +35,10 @@ export type OsResponse<T> = {
 export type OsMainSourceItem = OneMacTransform & SeaToolTransform;
 export type OsMainSearchResponse = OsResponse<OsMainSourceItem>;
 export type SearchData = OsHits<OsMainSourceItem>;
+export type ItemResult = OsHit<OsMainSourceItem> & {
+  found: boolean;
+  actions: Action[];
+};
 
 export type OsFilterType =
   | "term"
diff --git a/src/services/api/handlers/item.ts b/src/services/api/handlers/item.ts
index 85e1ee0ab8..206b9f1241 100644
--- a/src/services/api/handlers/item.ts
+++ b/src/services/api/handlers/item.ts
@@ -6,23 +6,13 @@ import {
   getStateFilter,
   lookupUserAttributes,
 } from "../libs/auth/user";
-import {
-  OsHit,
-  OsMainSourceItem,
-  Action,
-  CognitoUserAttributes,
-} from "shared-types";
+import { Action, CognitoUserAttributes, ItemResult } from "shared-types";
 import { isCmsUser } from "shared-utils";
 
 if (!process.env.osDomain) {
   throw "ERROR:  osDomain env variable is required,";
 }
 
-type ItemResult = OsHit<OsMainSourceItem> & {
-  found: boolean;
-  actions: Action[];
-};
-
 /** Generates an array of allowed actions from a combination of user attributes
  * and OS result data */
 const packageActionsForResult = (
@@ -30,7 +20,7 @@ const packageActionsForResult = (
   result: ItemResult
 ): Action[] => {
   const actions = [];
-  if (isCmsUser(user)) {
+  if (isCmsUser(user) && result._source.raiReceivedDate) {
     actions.push(Action.ENABLE_RAI_WITHDRAW);
   }
   return actions;
diff --git a/src/services/ui/src/api/useGetItem.ts b/src/services/ui/src/api/useGetItem.ts
index e44d376445..a529646017 100644
--- a/src/services/ui/src/api/useGetItem.ts
+++ b/src/services/ui/src/api/useGetItem.ts
@@ -1,8 +1,13 @@
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
 import { API } from "aws-amplify";
-import { OsHit, OsMainSourceItem, ReactQueryApiError } from "shared-types";
+import {
+  ItemResult,
+  OsHit,
+  OsMainSourceItem,
+  ReactQueryApiError,
+} from "shared-types";
 
-export const getItem = async (id: string): Promise<OsHit<OsMainSourceItem>> => {
+export const getItem = async (id: string): Promise<ItemResult> => {
   const record = await API.post("os", "/item", { body: { id } });
 
   return record;
@@ -10,9 +15,9 @@ export const getItem = async (id: string): Promise<OsHit<OsMainSourceItem>> => {
 
 export const useGetItem = (
   id: string,
-  options?: UseQueryOptions<OsHit<OsMainSourceItem>, ReactQueryApiError>
+  options?: UseQueryOptions<ItemResult, ReactQueryApiError>
 ) => {
-  return useQuery<OsHit<OsMainSourceItem>, ReactQueryApiError>(
+  return useQuery<ItemResult, ReactQueryApiError>(
     ["record", id],
     () => getItem(id),
     options
diff --git a/src/services/ui/src/pages/detail/index.tsx b/src/services/ui/src/pages/detail/index.tsx
index 7082385207..27192c4888 100644
--- a/src/services/ui/src/pages/detail/index.tsx
+++ b/src/services/ui/src/pages/detail/index.tsx
@@ -10,18 +10,17 @@ import {
   SubmissionInfo,
 } from "@/components";
 import { useGetUser } from "@/api/useGetUser";
-import { OsHit, OsMainSourceItem } from "shared-types";
+import { Action, ItemResult, OsHit, OsMainSourceItem } from "shared-types";
 import { useQuery } from "@/hooks";
 import { useGetItem } from "@/api";
 import { DetailNav } from "./detailNav";
 import { BreadCrumbs } from "@/components/BreadCrumb";
 import { BREAD_CRUMB_CONFIG_PACKAGE_DETAILS } from "@/components/BreadCrumb/bread-crumb-config";
+import { mapActionLabel } from "@/utils";
+import { Link } from "react-router-dom";
+import { ROUTES } from "@/routes";
 
-export const DetailsContent = ({
-  data,
-}: {
-  data?: OsHit<OsMainSourceItem>;
-}) => {
+export const DetailsContent = ({ data }: { data?: ItemResult }) => {
   const { data: user } = useGetUser();
   if (!data?._source) return <LoadingSpinner />;
   return (
@@ -46,20 +45,42 @@ export const DetailsContent = ({
         ))}
       </aside>
       <div className="flex-1">
-        <section id="package-overview" className="block md:flex mb-8 gap-8">
-          <CardWithTopBorder>
-            <div className="p-4">
-              <p className="text-gray-600 font-semibold mb-2">Status</p>
-              <div>
-                <h2 className="text-xl font-semibold mb-2">
-                  {user?.isCms
-                    ? data._source.cmsStatus
-                    : data._source.stateStatus}
-                </h2>
+        <div className="flex gap-8">
+          <section id="package-overview" className="block md:flex mb-8 gap-8">
+            <CardWithTopBorder>
+              <div className="p-4">
+                <p className="text-gray-600 font-semibold mb-2">Status</p>
+                <div>
+                  <h2 className="text-xl font-semibold mb-2">
+                    {user?.isCms
+                      ? data._source.cmsStatus
+                      : data._source.stateStatus}
+                  </h2>
+                </div>
               </div>
-            </div>
-          </CardWithTopBorder>
-        </section>
+            </CardWithTopBorder>
+          </section>
+          <section id="package-actions" className="block md:flex mb-8 gap-8">
+            <CardWithTopBorder>
+              <div className="p-4">
+                <p className="text-gray-600 font-semibold mb-2">Actions</p>
+                <div>
+                  <ul>
+                    {data.actions.map((action, idx) => (
+                      <Link
+                        className="text-sky-500 underline"
+                        to={ROUTES.DASHBOARD}
+                        key={`${idx}-${action}`}
+                      >
+                        <li>{mapActionLabel(action)}</li>
+                      </Link>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </CardWithTopBorder>
+          </section>
+        </div>
         <DetailsSection id="package-details" title="Package Details">
           <ChipSpaPackageDetails {...data?._source} />
         </DetailsSection>
diff --git a/src/services/ui/src/utils/actionLabelMapper.ts b/src/services/ui/src/utils/actionLabelMapper.ts
new file mode 100644
index 0000000000..c8cbff21cb
--- /dev/null
+++ b/src/services/ui/src/utils/actionLabelMapper.ts
@@ -0,0 +1,9 @@
+import { Action } from "shared-types";
+export const mapActionLabel = (a: Action) => {
+  switch (a) {
+    case Action.ENABLE_RAI_WITHDRAW:
+      return "Enable RAI Response Withdraw";
+    default:
+      return null;
+  }
+};
diff --git a/src/services/ui/src/utils/index.ts b/src/services/ui/src/utils/index.ts
index 416cf7fef2..588f199980 100644
--- a/src/services/ui/src/utils/index.ts
+++ b/src/services/ui/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from "./user";
 export * from "./date";
 export * from "./textHelpers";
 export * from "./createContextProvider";
+export * from "./actionLabelMapper";