[MINT-3246] Suggested Milestone Banner on Home Page

[garyjzhao]

MINT-3246

Description

• add isSuggested to modelToOperatinosMatrix gql
• Add suggestedMilestone to filter isSuggested milestones in modelToOperatinosMatrix data
• Conditional banner rendering
• Shuffled around GridContainer in MTO home page to allow the suggested milestone to be full width (matching figma)

How to test this change

1. Navigate to MTO Matrix
2. Verify that the banner's empty state matches figma
3. comment out line 49 and paste the following code in its place:

// TEMP only for demo
  const demoData = useMemo(() => {
    const rawData = modelToOperationsMatrix?.commonMilestones || [];

    const testData = JSON.parse(JSON.stringify(rawData));

    if (testData.length > 0) {
      testData[0].isSuggested = true;
      testData[0].isAdded = true;
    }

    return testData;
  }, [modelToOperationsMatrix?.commonMilestones]);

  const suggestedMilestones = demoData.filter(obj => obj.isSuggested) || [];

4. reload page and verify that banner's not empty state matches figma
5. try to break it

PR Author Checklist

• I have provided a detailed description of the changes in this PR.
• I have provided clear instructions on how to test the changes in this PR.
• I have updated tests or written new tests as appropriate in this PR.
• Updated the Postman Collection if necessary.

PR Reviewer Guidelines

• It's best to pull the branch locally and test it, rather than just looking at the code online!
• When approving a PR, provide a reason why you're approving it
  • e.g. "Approving because I tested it locally and all functionality works as expected"
  • e.g. "Approving because the change is simple and matches the Figma design"
• Don't be afraid to leave comments or ask questions, especially if you don't understand why something was done! (This is often a great time to suggest code comments or documentation updates)
• Check that all code is adequately covered by tests - if it isn't feel free to suggest the addition of tests.