Merge pull request #1552 from CMS-Enterprise/MINT-3221/table-actions

[MINT-3221] MTO Table Action Component
CMS-Enterprise · Dec 10, 2024 · c33a12b · c33a12b
2 parents 0bf91df + af2c6c3
commit c33a12b
Show file tree

Hide file tree

Showing 15 changed files with 812 additions and 83 deletions.
diff --git a/src/features/ModelPlan/ModelToOperations/Home/index.tsx b/src/features/ModelPlan/ModelToOperations/Home/index.tsx
@@ -2,7 +2,6 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useHistory, useLocation, useParams } from 'react-router-dom';
 import {
-  Button,
   Grid,
   Header,
   Icon,
@@ -20,9 +19,9 @@ import { ModelInfoContext } from 'contexts/ModelInfoContext';
 import useCheckResponsiveScreen from 'hooks/useCheckMobile';
 import useMessage from 'hooks/useMessage';
 
-import MTOModal from '../_components/FormModal';
 import MTOStatusBanner from '../_components/StatusBanner';
 import MTOTable from '../_components/Table';
+import MTOTableActions from '../_components/Table/Actions';
 
 export type MTOOption = 'milestones' | 'systems-and-solutions';
 
@@ -35,7 +34,7 @@ const MTOHome = () => {
 
   const { modelName } = useContext(ModelInfoContext);
 
-  const { data, loading } = useGetModelToOperationsMatrixQuery({
+  const { data, loading, error, refetch } = useGetModelToOperationsMatrixQuery({
     variables: {
       id: modelID
     }
@@ -47,7 +46,7 @@ const MTOHome = () => {
 
   const location = useLocation();
 
-  const { clearMessage, message } = useMessage();
+  const { message } = useMessage();
 
   const params = useMemo(() => {
     return new URLSearchParams(location.search);
@@ -59,12 +58,6 @@ const MTOHome = () => {
 
   const [currentView, setCurrentView] = useState<MTOOption>('milestones');
 
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const [modalType, setModalType] = useState<
-    'category' | 'milestone' | 'solution'
-  >('category');
-
   useEffect(() => {
     if (viewparam && mtoOptions.includes(viewparam as MTOOption)) {
       setCurrentView(viewparam as MTOOption);
@@ -85,7 +78,7 @@ const MTOHome = () => {
         ]}
       />
 
-      {!isModalOpen && message && <Expire delay={45000}>{message}</Expire>}
+      {message && <Expire delay={45000}>{message}</Expire>}
 
       <Grid row className="margin-bottom-2">
         <Grid desktop={{ col: 9 }}>
@@ -165,55 +158,6 @@ const MTOHome = () => {
           </div>
         </Header>
 
-        <div className="display-none2 margin-top-4">
-          <MTOModal
-            isOpen={isModalOpen}
-            closeModal={() => setIsModalOpen(false)}
-            modalType={modalType}
-          />
-          <div className="width-fit-content">
-            {/* <div
-            style={{ paddingTop: '2px', paddingBottom: '2px' }}
-            className={classNames(
-              'display-flex flex-justify bg-base-lightest padding-x-3 text-white radius-top-lg bg-secondary-dark'
-            )}
-          >
-            TEMPORARY
-          </div> */}
-            <Button
-              type="button"
-              onClick={() => {
-                clearMessage();
-                setModalType('category');
-                setIsModalOpen(true);
-              }}
-            >
-              Add custom category
-            </Button>
-            <Button
-              type="button"
-              onClick={() => {
-                clearMessage();
-                setModalType('milestone');
-                setIsModalOpen(true);
-              }}
-            >
-              Add custom milestone
-            </Button>
-            <Button
-              type="button"
-              onClick={() => {
-                clearMessage();
-                setModalType('solution');
-                setIsModalOpen(true);
-              }}
-              className="margin-bottom-4"
-            >
-              Add custom solution
-            </Button>
-          </div>
-        </div>
-
         {isTablet && (
           <div className="maxw-mobile-lg">
             <Select
@@ -237,7 +181,12 @@ const MTOHome = () => {
           </div>
         )}
 
-        {currentView === 'milestones' && <MTOTable />}
+        {currentView === 'milestones' && (
+          <>
+            <MTOTableActions refetch={() => refetch({ id: modelID })} />
+            <MTOTable queryData={data} loading={loading} error={error} />
+          </>
+        )}
       </div>
     </>
   );

diff --git a/...lan/ModelToOperations/_components/AddCustomSolutionForm/__snapshots__/index.test.tsx.snap b/...lan/ModelToOperations/_components/AddCustomSolutionForm/__snapshots__/index.test.tsx.snap
@@ -166,11 +166,13 @@ exports[`Custom Solution form > matches snapshot 1`] = `
         >
           <span>
             Please double-check that you aren't creating an operational solution or IT system that already exists in the 
-            <span
-              class="text-underline text-primary-light"
+            <button
+              class="usa-button usa-button usa-button--unstyled margin-top-0"
+              data-testid="button"
+              type="button"
             >
               solution library
-            </span>
+            </button>
             .
           </span>
         </p>

diff --git a/src/features/ModelPlan/ModelToOperations/_components/AddCustomSolutionForm/index.tsx b/src/features/ModelPlan/ModelToOperations/_components/AddCustomSolutionForm/index.tsx
@@ -6,7 +6,7 @@ import {
   useForm
 } from 'react-hook-form';
 import { Trans, useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { useHistory, useParams } from 'react-router-dom';
 import {
   Button,
   Fieldset,
@@ -39,6 +39,7 @@ const SolutionForm = ({ closeModal }: { closeModal: () => void }) => {
   const { solutionType: solutionTypeConfig } =
     usePlanTranslation('mtoSolution');
 
+  const history = useHistory();
   const { modelID } = useParams<{ modelID: string }>();
   const { message, showMessage, clearMessage } = useMessage();
 
@@ -262,8 +263,19 @@ const SolutionForm = ({ closeModal }: { closeModal: () => void }) => {
           <Trans
             i18nKey={t('modal.solution.alert.info')}
             components={{
-              s: <span className="text-underline text-primary-light" />
-              // TODO: Add a link to the documentation
+              s: (
+                <Button
+                  type="button"
+                  className="usa-button usa-button--unstyled margin-top-0"
+                  onClick={() => {
+                    history.push(
+                      `/models/${modelID}/collaboration-area/model-to-operations/solution-library`
+                    );
+                  }}
+                >
+                  {' '}
+                </Button>
+              )
             }}
           />
         </Alert>