feat: Month granularity for date-range-picker

[dpitcock]

Month granularity for date-range-picker

The Date Picker component has a granularity prop that can be set to "month" which disallows the selection of day and allows the selection of month. This functionality is now being extended onto Date Range Picker component, so it will also support month range selection

issues: [AWSUI-18630, AWSUI-20124, AWSUI-8139]

Previous PRs for this project

• Renaming Grid files
• strengthening calendar and date-time util tests
• Allowing for the dateOnly prop to format the value in the date-range-picker
• Enhancing the date-range-picker pages
• Adding new translation keys and messages

How has this been tested?

test coverage expanded to include both unit tests and integration tests for the DateRangePicker component utilizing the 'month' granularity setting. These tests now encompass rendered iterations of the components, ensuring comprehensive validation of this specific functionality.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov]

Codecov Report

Attention: Patch coverage is 97.40933% with 10 lines in your changes missing coverage. Please review.

Project coverage is 96.45%. Comparing base (76a85a0) to head (ac9e99a).

Files with missing lines	Patch %	Lines
src/date-range-picker/calendar/grids/index.tsx	90.62%	3 Missing ⚠️
src/date-range-picker/calendar/grids/grid.tsx	98.37%	2 Missing ⚠️
src/date-range-picker/calendar/header/index.tsx	91.66%	1 Missing ⚠️
src/date-range-picker/calendar/index.tsx	97.43%	1 Missing ⚠️
src/date-range-picker/calendar/range-inputs.tsx	95.65%	1 Missing ⚠️
src/date-range-picker/dropdown.tsx	83.33%	1 Missing ⚠️
src/date-range-picker/relative-range/index.tsx	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3077      +/-   ##
==========================================
+ Coverage   96.44%   96.45%   +0.01%     
==========================================
  Files         790      791       +1     
  Lines       22246    22461     +215     
  Branches     7229     7345     +116     
==========================================
+ Hits        21455    21665     +210     
- Misses        784      789       +5     
  Partials        7        7              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[just-boris]

Approved to merge, but still looking forward for a refactoring around that day/month strategy switch

[just-boris]

okay, got it

[just-boris]

This is not how pattern should work. There is still the same number of isMonthPicker checks, just in a different place.

It could be something like this

interface GridUtils {
   getItemKey(rowIndex: number, columnIndex: number): string;
   isSameItem: (date1: Date, date2: Date): boolean;
   isSamePage: (date1: Date, date2: Date): boolean;

   ... etc
}

const monthUtils: GridUtils = {
   // note, argument types are not needed, they are coming with `GridUtils` type declaration
   getItemKey: (rowIndex, columnIndex) => `Month ${rowIndex * 3 + rowItemIndex + 1}`,
   isSameItem: isSameMonth,
   isSamePage: isSameYear,
   ... etc
}

const dayUtils: GridUtils = {
   getItemKey: (rowIndex, columnIndex) => `${rowIndex}:${rowItemIndex}`,
   isSameItem: isSameDay,
   isSamePage: isSameMonth,
   ... etc
}

// pull the right strategy depending on the mode
const gridUtils = isMonthPicker ? monthUtils : dayUtils

"strategy" == "utils" in this code. The name does not really matter, the concept does. Because it makes code shorter and easier to follow