feat(OY2-26082): Package actions FE

src/services/ui/src/components/Inputs/button.tsx

@@ -3,6 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
+import { Loader2 } from "lucide-react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@@ -38,17 +39,26 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    { className, variant, size, loading, children, asChild = false, ...props },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        <>
+          {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+          {children}
+        </>
+      </Comp>
     );
   }
 );

src/services/ui/src/pages/detail/admin-changes/index.tsx

@@ -1,22 +1,91 @@
-import { Accordion, DetailsSection } from "@/components";
+import { format } from "date-fns";
+import { FC, useMemo } from "react";
 import { opensearch } from "shared-types";
-import { FC } from "react";
-import { AdminChange } from "./AdminChanges";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  DetailsSection,
+} from "@/components";
+import { BLANK_VALUE } from "@/consts";
 
-export const ACTIONS_ADMIN = ["disable-rai-withdraw", "enable-rai-withdraw"];
+export const AC_WithdrawEnabled: FC<opensearch.changelog.Document> = (
+  props
+) => {
+  return (
+    <p>
+      {props.submitterName} has enabled package action to submit formal RAI
+      response
+    </p>
+  );
+};
+
+export const AC_WithdrawDisabled: FC<opensearch.changelog.Document> = (
+  props
+) => {
+  return (
+    <p>
+      {props.submitterName} has disabled package action to submit formal RAI
+      response
+    </p>
+  );
+};
+
+export const AC_Update: FC<opensearch.changelog.Document> = () => {
+  return <p>Coming Soon</p>;
+};
+
+export const AdminChange: FC<opensearch.changelog.Document> = (props) => {
+  const [label, Content] = useMemo(() => {
+    switch (props.actionType) {
+      case "disable-rai-withdraw":
+        return ["Disabled formal RAI response withdraw", AC_WithdrawDisabled];
+      case "enable-rai-withdraw":
+        return ["Enabled formal RAI response withdraw", AC_WithdrawEnabled];
+      case "update":
+        return ["SPA ID update", AC_Update];
+      default:
+        return [BLANK_VALUE, AC_Update];
+    }
+  }, [props.actionType]);
+
+  return (
+    <AccordionItem key={props.id} value={props.id}>
+      <AccordionTrigger className="bg-gray-100 px-3">
+        <p className="flex flex-row gap-2 text-gray-600">
+          <strong>{label as string}</strong>
+          {" - "}
+          {format(new Date(props.timestamp), "eee, MMM d, yyyy hh:mm:ss a")}
+        </p>
+      </AccordionTrigger>
+      <AccordionContent className="p-4">
+        <Content {...props} />
+      </AccordionContent>
+    </AccordionItem>
+  );
+};
 
 export const AdminChanges: FC<opensearch.main.Document> = (props) => {
   const data = props.changelog?.filter((CL) =>
-    ACTIONS_ADMIN.includes(CL._source.actionType)
+    ["disable-rai-withdraw", "enable-rai-withdraw"].includes(
+      CL._source.actionType
+    )
   );
+
+  if (!data?.length) return <></>;
+
   return (
     <DetailsSection
       id="admin-updates"
       title={`Administrative Package Changes (${data?.length})`}
       description="Administrative changes reflect updates to specific data fields. If you have additional questions, please contact the assigned CPOC."
     >
-      {!data?.length && <p className="text-gray-500">-- no logs --</p>}
-      <Accordion type="multiple" className="flex flex-col mt-6 gap-2">
+      <Accordion
+        type="multiple"
+        defaultValue={[data?.[0]._source.id as string]}
+        className="flex flex-col mt-6 gap-2"
+      >
         {data?.map((CL) => (
           <AdminChange {...CL._source} key={CL._source.id} />
         ))}

src/services/ui/src/pages/detail/index.tsx

@@ -1,5 +1,4 @@
 import {
-  AdditionalInfo,
   Alert,
   CardWithTopBorder,
   ConfirmationModal,
@@ -12,7 +11,7 @@ import { useGetUser } from "@/api/useGetUser";
 import { Action, opensearch, UserRoles } from "shared-types";
 import { PackageCheck } from "shared-utils";
 import { useQuery } from "@/hooks";
-import { getAttachmentUrl, useGetItem } from "@/api";
+import { useGetItem } from "@/api";
 import { BreadCrumbs } from "@/components/BreadCrumb";
 import { mapActionLabel } from "@/utils";
 import { useLocation } from "react-router-dom";