Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MINT-3221] MTO Table Action Component #1552

Merged
merged 24 commits into from
Dec 10, 2024
Merged

[MINT-3221] MTO Table Action Component #1552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9690922
Add TableActions component
garyjzhao Dec 4, 2024
7d15493
add the milestone buttons
garyjzhao Dec 4, 2024
e3b588f
Add solutions and template buttons
garyjzhao Dec 4, 2024
6cc912c
adjust copy and classnames
garyjzhao Dec 4, 2024
f0a28cf
add comment and adjust the icons
garyjzhao Dec 4, 2024
0f35f2a
Add the standard categories pill
garyjzhao Dec 4, 2024
23a6c9c
add teh gap
garyjzhao Dec 4, 2024
28092ef
addressing the routes
garyjzhao Dec 4, 2024
e6d18f4
add GetMTOCommonSolutions
garyjzhao Dec 4, 2024
518f8dc
add milestoneData and solutionData
garyjzhao Dec 4, 2024
57c0294
add test and mocks
garyjzhao Dec 4, 2024
ed292ff
add enum to mock
garyjzhao Dec 4, 2024
b8fd282
updated snaps
garyjzhao Dec 4, 2024
44de617
remove comments
garyjzhao Dec 4, 2024
f342c29
good work
garyjzhao Dec 5, 2024
7845d92
add index.scss
garyjzhao Dec 5, 2024
84b3557
using grid and scs
garyjzhao Dec 5, 2024
7f56474
add CreateStandardCategories
garyjzhao Dec 5, 2024
67b961f
Adding create mutation to actions
garyjzhao Dec 5, 2024
7de4303
updated snaps
garyjzhao Dec 5, 2024
0650ed9
remove alert and add todo comment
garyjzhao Dec 6, 2024
1b96257
update code based on pr feedback
garyjzhao Dec 6, 2024
94585c3
fix new import routes for mtomodal
garyjzhao Dec 10, 2024
af2c6c3
moved data query to parent to allow passing down to siblings
garyjzhao Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 10 additions & 61 deletions src/features/ModelPlan/ModelToOperations/Home/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';

Expand All @@ -35,7 +34,7 @@ const MTOHome = () => {

const { modelName } = useContext(ModelInfoContext);

const { data, loading } = useGetModelToOperationsMatrixQuery({
const { data, loading, error, refetch } = useGetModelToOperationsMatrixQuery({
variables: {
id: modelID
}
Comment on lines +37 to 40
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the useGetModelToOperationsMatrixQuery is also used in <MTOTable /> component. So, I thought to pass down the data needed, instead of calling the gql again.

Also, this allowed me to pass refetch down to the sibling component <MTOTableActions />

Expand All @@ -47,7 +46,7 @@ const MTOHome = () => {

const location = useLocation();

const { clearMessage, message } = useMessage();
const { message } = useMessage();

const params = useMemo(() => {
return new URLSearchParams(location.search);
Expand All @@ -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);
Expand All @@ -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 }}>
Expand Down Expand Up @@ -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
Expand All @@ -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>
</>
);
Expand Down
8 changes: 5 additions & 3 deletions ...lan/ModelToOperations/_components/AddCustomSolutionForm/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
18 changes: 15 additions & 3 deletions src/features/ModelPlan/ModelToOperations/_components/AddCustomSolutionForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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();

Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading