Merge pull request #1558 from CMS-Enterprise/MINT-3220/add-milestone-…

…to-matrix-modal

[MINT-3220] Add milestone to matrix modal

pkg/graph/generated/generated.go

@@ -441,7 +441,8 @@ type ComplexityRoot struct {
 	}
 
 	MTOMilestoneTranslation struct {
-		Name func(childComplexity int) int
+		CommonSolutions func(childComplexity int) int
+		Name            func(childComplexity int) int
 	}
 
 	MTOSolution struct {
@@ -4332,6 +4333,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.MTOMilestone.Status(childComplexity), true
 
+	case "MTOMilestoneTranslation.commonSolutions":
+		if e.complexity.MTOMilestoneTranslation.CommonSolutions == nil {
+			break
+		}
+
+		return e.complexity.MTOMilestoneTranslation.CommonSolutions(childComplexity), true
+
 	case "MTOMilestoneTranslation.name":
 		if e.complexity.MTOMilestoneTranslation.Name == nil {
 			break
@@ -17244,6 +17252,7 @@ Represents MTO Custom Milestone translation data
 
 type MTOMilestoneTranslation {
   name: TranslationField! @goTag(key: "db", value: "name")
+  commonSolutions: TranslationFieldWithOptions! @goTag(key: "db", value: "common_solutions")  
 }
 `, BuiltIn: false},
 	{Name: "../schema/types/mto_solution.graphql", Input: `# TODO (mto) Verify all these. Zoë said they should match previous solution statuses
@@ -34185,6 +34194,90 @@ func (ec *executionContext) fieldContext_MTOMilestoneTranslation_name(ctx contex
 	return fc, nil
 }
 
+func (ec *executionContext) _MTOMilestoneTranslation_commonSolutions(ctx context.Context, field graphql.CollectedField, obj *model.MTOMilestoneTranslation) (ret graphql.Marshaler) {
+	fc, err := ec.fieldContext_MTOMilestoneTranslation_commonSolutions(ctx, field)
+	if err != nil {
+		return graphql.Null
+	}
+	ctx = graphql.WithFieldContext(ctx, fc)
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.CommonSolutions, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(models.TranslationFieldWithOptions)
+	fc.Result = res
+	return ec.marshalNTranslationFieldWithOptions2githubᚗcomᚋcmsᚑenterpriseᚋmintᚑappᚋpkgᚋmodelsᚐTranslationFieldWithOptions(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) fieldContext_MTOMilestoneTranslation_commonSolutions(ctx context.Context, field graphql.CollectedField) (fc *graphql.FieldContext, err error) {
+	fc = &graphql.FieldContext{
+		Object:     "MTOMilestoneTranslation",
+		Field:      field,
+		IsMethod:   false,
+		IsResolver: false,
+		Child: func(ctx context.Context, field graphql.CollectedField) (*graphql.FieldContext, error) {
+			switch field.Name {
+			case "gqlField":
+				return ec.fieldContext_TranslationFieldWithOptions_gqlField(ctx, field)
+			case "goField":
+				return ec.fieldContext_TranslationFieldWithOptions_goField(ctx, field)
+			case "dbField":
+				return ec.fieldContext_TranslationFieldWithOptions_dbField(ctx, field)
+			case "label":
+				return ec.fieldContext_TranslationFieldWithOptions_label(ctx, field)
+			case "readonlyLabel":
+				return ec.fieldContext_TranslationFieldWithOptions_readonlyLabel(ctx, field)
+			case "sublabel":
+				return ec.fieldContext_TranslationFieldWithOptions_sublabel(ctx, field)
+			case "multiSelectLabel":
+				return ec.fieldContext_TranslationFieldWithOptions_multiSelectLabel(ctx, field)
+			case "isArray":
+				return ec.fieldContext_TranslationFieldWithOptions_isArray(ctx, field)
+			case "dataType":
+				return ec.fieldContext_TranslationFieldWithOptions_dataType(ctx, field)
+			case "formType":
+				return ec.fieldContext_TranslationFieldWithOptions_formType(ctx, field)
+			case "isNote":
+				return ec.fieldContext_TranslationFieldWithOptions_isNote(ctx, field)
+			case "order":
+				return ec.fieldContext_TranslationFieldWithOptions_order(ctx, field)
+			case "isOtherType":
+				return ec.fieldContext_TranslationFieldWithOptions_isOtherType(ctx, field)
+			case "otherParentField":
+				return ec.fieldContext_TranslationFieldWithOptions_otherParentField(ctx, field)
+			case "parentReferencesLabel":
+				return ec.fieldContext_TranslationFieldWithOptions_parentReferencesLabel(ctx, field)
+			case "exportLabel":
+				return ec.fieldContext_TranslationFieldWithOptions_exportLabel(ctx, field)
+			case "tableReference":
+				return ec.fieldContext_TranslationFieldWithOptions_tableReference(ctx, field)
+			case "options":
+				return ec.fieldContext_TranslationFieldWithOptions_options(ctx, field)
+			case "exportOptions":
+				return ec.fieldContext_TranslationFieldWithOptions_exportOptions(ctx, field)
+			}
+			return nil, fmt.Errorf("no field named %q was found under type TranslationFieldWithOptions", field.Name)
+		},
+	}
+	return fc, nil
+}
+
 func (ec *executionContext) _MTOSolution_id(ctx context.Context, field graphql.CollectedField, obj *models.MTOSolution) (ret graphql.Marshaler) {
 	fc, err := ec.fieldContext_MTOSolution_id(ctx, field)
 	if err != nil {
@@ -137501,6 +137594,11 @@ func (ec *executionContext) _MTOMilestoneTranslation(ctx context.Context, sel as
 			if out.Values[i] == graphql.Null {
 				out.Invalids++
 			}
+		case "commonSolutions":
+			out.Values[i] = ec._MTOMilestoneTranslation_commonSolutions(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				out.Invalids++
+			}
 		default:
 			panic("unknown field " + strconv.Quote(field.Name))
 		}

pkg/graph/schema/types/mto_milestone_translation.graphql

@@ -5,4 +5,5 @@ Represents MTO Custom Milestone translation data
 
 type MTOMilestoneTranslation {
   name: TranslationField! @goTag(key: "db", value: "name")
+  commonSolutions: TranslationFieldWithOptions! @goTag(key: "db", value: "common_solutions")  
 }

src/components/Modal/index.tsx

@@ -40,7 +40,7 @@ const Modal = ({
   return (
     <ReactModal
       isOpen={isOpen}
-      overlayClassName="mint-modal__overlay"
+      overlayClassName="mint-modal__overlay overflow-y-scroll"
       className={classNames('mint-modal__content', className)}
       onAfterOpen={handleOpenModal}
       onAfterClose={noScroll.off}

src/components/MultiSelect/index.scss

@@ -32,3 +32,9 @@
     align-items: center;
   }
 }
+
+.grouped-options {
+  .usa-combo-box__list-option {
+    border: none !important
+  }
+}

src/components/MultiSelect/index.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useEffect, useState } from 'react';
+import React, { CSSProperties, useEffect, useMemo, useState } from 'react';
 import Select, {
   ClearIndicatorProps,
   components,
@@ -59,6 +59,12 @@ export const Option = (
   );
 };
 
+export const GroupLabel = ({ label }: GroupBase<MultiSelectOptionProps>) => (
+  <span className="text-primary-dark text-bold text-no-uppercase mint-text-normal">
+    {label}
+  </span>
+);
+
 export const ClearIndicator = (
   props: ClearIndicatorProps<MultiSelectOptionProps, true>
 ) => {
@@ -211,6 +217,7 @@ const MultiSelect = ({
   name,
   selectedLabel,
   options,
+  groupedOptions,
   onChange,
   initialValues,
   className,
@@ -227,6 +234,7 @@ const MultiSelect = ({
   name: string;
   selectedLabel?: string;
   options: MultiSelectOptionProps[];
+  groupedOptions?: GroupBase<MultiSelectOptionProps>[];
   onChange: (values: string[]) => void;
   initialValues?: string[];
   className?: string;
@@ -237,15 +245,30 @@ const MultiSelect = ({
   disabledOption?: boolean;
   disabledLabel?: string;
 }) => {
+  const condensedOptions = useMemo(() => {
+    if (groupedOptions) {
+      const groupedOptionsArray: MultiSelectOptionProps[] = [];
+      groupedOptions.forEach(option =>
+        groupedOptionsArray.push(...option.options)
+      );
+      return [...groupedOptionsArray];
+    }
+    return [...options];
+  }, [options, groupedOptions]);
+
   const [selected, setSelected] = useState<MultiValue<MultiSelectOptionProps>>(
     initialValues
-      ? options.filter(option => initialValues.includes(option.value))
+      ? condensedOptions.filter(option => initialValues.includes(option.value))
       : []
   );
 
-  const [originalOptions] = useState<MultiValue<MultiSelectOptionProps>>([
-    ...options
-  ]);
+  const [originalOptions, setOriginalOptions] = useState<
+    MultiValue<MultiSelectOptionProps>
+  >([...condensedOptions]);
+
+  useEffect(() => {
+    setOriginalOptions([...condensedOptions]);
+  }, [groupedOptions]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     setSelected(
@@ -286,10 +309,14 @@ const MultiSelect = ({
         name={name}
         className={classNames(
           'easi-multiselect usa-combo-box margin-top-1',
-          className
+          className,
+          {
+            'grouped-options': !!groupedOptions
+          }
         )}
         isClearable={!disabledOption}
-        options={options}
+        options={groupedOptions || options}
+        formatGroupLabel={GroupLabel}
         components={{ ClearIndicator, Option }}
         isMulti
         hideSelectedOptions={false}

src/features/ModelPlan/ModelToOperations/Home/index.tsx

@@ -20,7 +20,7 @@ import { ModelInfoContext } from 'contexts/ModelInfoContext';
 import useCheckResponsiveScreen from 'hooks/useCheckMobile';
 import useMessage from 'hooks/useMessage';
 
-import MTOModal from '../_components/Modal';
+import MTOModal from '../_components/FormModal';
 import MTOStatusBanner from '../_components/StatusBanner';
 import MTOTable from '../_components/Table';
 

src/features/ModelPlan/ModelToOperations/MilestoneLibrary/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { useHistory, useParams } from 'react-router-dom';
 import {
@@ -29,9 +29,9 @@ import useMessage from 'hooks/useMessage';
 import usePagination from 'hooks/usePagination';
 import useSearchSortPagination from 'hooks/useSearchSortPagination';
 
+import MTOModal from '../_components/FormModal';
 import MilestoneCard from '../_components/MilestoneCard';
 import MilestonePanel from '../_components/MilestonePanel';
-import MTOModal from '../_components/Modal';
 
 import './index.scss';
 
@@ -233,11 +233,6 @@ const MilstoneCardGroup = ({
     showPageIfOne: true
   });
 
-  useEffect(() => {
-    params.set('page', '1');
-    history.replace({ search: params.toString() });
-  }, [viewParam, itemsPerPage]); // eslint-disable-line react-hooks/exhaustive-deps
-
   return (
     <>
       <Sidepanel