Merge branch 'staging' of https://github.com/EqualifyEverything/equalify-dashboard into staging

Author: azdak

src/components/modals/Modal.tsx

@@ -1,13 +1,11 @@
 import * as Dialog from '@radix-ui/react-dialog';
 
-export const Modal = ({ open, setOpen, children, className = '' }) => (
+export const Modal = ({ open, setOpen, title, children, className = '' }) => (
     <Dialog.Root open={open} onOpenChange={(value) => { setOpen(value) }}>
         <Dialog.Portal>
             <Dialog.Overlay className="bg-[#0009] data-[state=open]:animate-overlayShow fixed inset-0" />
             <Dialog.Content className={`data-[state=open]:animate-contentShow fixed top-[30%] left-[50%] max-h-[85vh] w-[90vw] max-w-[770px] translate-x-[-50%] translate-y-[-50%] rounded-[6px] bg-background p-[10px] sm:p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none ${className} z-40`}>
-                <Dialog.Description className="text-text mt-1">
-                    {children}
-                </Dialog.Description>
+                <Dialog.Title id='modal-title' className='text-2xl'>{title}</Dialog.Title>
                 <Dialog.Close asChild>
                     <button
                         className="text-text absolute top-4 right-4 inline-flex h-6 w-6 items-center justify-center hover:opacity-50"
@@ -16,6 +14,9 @@ export const Modal = ({ open, setOpen, children, className = '' }) => (
                         {`×`}
                     </button>
                 </Dialog.Close>
+                <Dialog.Description className="text-text mt-1">
+                    {children}
+                </Dialog.Description>
             </Dialog.Content>
         </Dialog.Portal>
     </Dialog.Root>

src/routes/protected/reports/message-details.tsx

@@ -1,6 +1,6 @@
 import { QueryClient, useQuery } from '@tanstack/react-query';
 import { ColumnDef } from '@tanstack/react-table';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Link, LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
 
 import Timeline from '~/components/charts/timeline';
@@ -9,7 +9,6 @@ import { DataTable } from '~/components/tables';
 import { messageDetailsQuery } from '~/queries';
 import { assertNonNull } from '~/utils/safety';
 import { post } from 'aws-amplify/api';
-import { InfoDialog } from '~/components/dialogs';
 import { Modal } from '~/components/modals';
 
 interface Node {
@@ -24,6 +23,7 @@ interface Node {
  * @param queryClient - The Query Client instance.
  * @returns Loader function to be used with React Router.
  */
+let suggestIndex = 0;
 export const messageDetailsLoader =
   (queryClient: QueryClient) =>
     async ({ params }: LoaderFunctionArgs) => {
@@ -60,7 +60,8 @@ const MessageDetails = () => {
 
   const [suggestIssueResponse, setSuggestIssueResponse] = useState(null);
   const [open, setOpen] = useState(false);
-  const suggestIssue = async ({ codeSnippet, pageUrl }) => {
+  const suggestIssue = async ({ codeSnippet, pageUrl, index }) => {
+    suggestIndex = index;
     setSuggestIssueResponse(null);
     setOpen(true);
     const response = await (await post({
@@ -81,6 +82,15 @@ const MessageDetails = () => {
     // if (!window.open(response?.url)) { window.location.href = response?.url }
   }
 
+  useEffect(() => {
+    if (!open) {
+      document.querySelector(`#suggest-${suggestIndex}`)?.focus();
+    }
+    else {
+      document.querySelector(`#modal-title`)?.focus();
+    }
+  }, [open])
+
   const NodeColumns: ColumnDef<Node>[] = [
     {
       accessorKey: 'codeSnippet',
@@ -105,8 +115,9 @@ const MessageDetails = () => {
       header: 'Action',
       cell: ({ row }) => (
         <button
+          id={`suggest-${row.index}`}
           className={`inline-flex h-9 items-center justify-end gap-2 place-self-end whitespace-nowrap rounded-md px-2 py-3 text-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#0d6efd] focus-visible:ring-offset-2 max-sm:w-fit max-sm:px-1 ml-2 bg-[#0d6efd] hover:opacity-50 text-xs`}
-          onClick={() => suggestIssue({ codeSnippet: row.getValue('codeSnippet'), pageUrl: row.getValue('pageUrl') })}
+          onClick={() => suggestIssue({ codeSnippet: row.getValue('codeSnippet'), pageUrl: row.getValue('pageUrl'), index: row.index })}
         >
           Suggest Issue
           <svg
@@ -200,11 +211,9 @@ const MessageDetails = () => {
       <Modal
         open={open}
         setOpen={setOpen}
+        title={`Suggest Issue`}
       >
-        <h1 className='text-2xl'>Suggest Issue</h1>
-        {!suggestIssueResponse && <div>
-          <h2>Generating issue... (ETA: 1 min)</h2>
-        </div>}
+        <div role='status'>{!suggestIssueResponse ? `Generating issue... (1 min)` : `Issue generated`}</div>
         {suggestIssueResponse && <div className='overflow-y-scroll max-h-[500px]'>
           {JSON.stringify({ suggestIssueResponse: suggestIssueResponse?.how_to_implement })}
         </div>}