diff --git a/packages/manager/.changeset/pr-11154-tech-stories-1730404184309.md b/packages/manager/.changeset/pr-11154-tech-stories-1730404184309.md new file mode 100644 index 00000000000..f1920ce7895 --- /dev/null +++ b/packages/manager/.changeset/pr-11154-tech-stories-1730404184309.md @@ -0,0 +1,5 @@ +--- +"@linode/manager": Tech Stories +--- + +Migrate `/volumes` to Tanstack router ([#11154](https://github.com/linode/manager/pull/11154)) diff --git a/packages/manager/.eslintrc.cjs b/packages/manager/.eslintrc.cjs index 396de6a59f2..6a1615b4c22 100644 --- a/packages/manager/.eslintrc.cjs +++ b/packages/manager/.eslintrc.cjs @@ -94,6 +94,9 @@ module.exports = { ], rules: { 'no-restricted-imports': [ + // This needs to remain a warning since trying to link to a feature that is not yet migrated will break the UI + // For those cases react-router-dom history.push is still needed + // That being said this can be turned into an error temporarily to catch all the cases while developing 'warn', { paths: [ diff --git a/packages/manager/src/routes/utils/buildXFilters.test.ts b/packages/manager/src/routes/utils/buildXFilters.test.ts index 2474706d6db..c53f3419747 100644 --- a/packages/manager/src/routes/utils/buildXFilters.test.ts +++ b/packages/manager/src/routes/utils/buildXFilters.test.ts @@ -17,7 +17,7 @@ describe('buildXFilters', () => { it('handles single additional filter with contains operator', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { label: { '+contains': 'test' }, }, pagination: { @@ -35,7 +35,7 @@ describe('buildXFilters', () => { it('handles additional filters with no pagination', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { label: { '+contains': 'test' }, }, }); @@ -47,7 +47,7 @@ describe('buildXFilters', () => { it('handles multiple fields with different operators', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { created: { '+gt': 123456789 }, status: { '+neq': 'deleted' }, }, @@ -67,7 +67,7 @@ describe('buildXFilters', () => { it('handles complex filters with AND operator', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { tags: { '+and': [{ '+contains': 'production' }, { '+contains': 'database' }], }, @@ -89,7 +89,7 @@ describe('buildXFilters', () => { it('handles OR operator with array of strings', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { region: { '+or': ['us-east', 'us-west'] }, }, pagination: { @@ -107,7 +107,7 @@ describe('buildXFilters', () => { it('handles numeric comparison operators', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { memory: { '+lt': 1024 }, size: { '+gte': 50 }, }, @@ -127,7 +127,7 @@ describe('buildXFilters', () => { it('handles multiple operators on the same field', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { created: { '+gte': 1609459200, // 2021-01-01 '+lt': 1640995200, // 2022-01-01 @@ -151,7 +151,7 @@ describe('buildXFilters', () => { it('can feature an operator as the first key', () => { const result = buildXFilters({ - additionalFilters: { + nonPaginationFilters: { '+or': [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }], }, pagination: { diff --git a/packages/manager/src/routes/utils/buildXFilters.ts b/packages/manager/src/routes/utils/buildXFilters.ts index 95f8bb28efd..9d3dccd2588 100644 --- a/packages/manager/src/routes/utils/buildXFilters.ts +++ b/packages/manager/src/routes/utils/buildXFilters.ts @@ -12,11 +12,17 @@ type FieldFilter = { }; type AdditionalFilters = - | Partial - | Partial>; + | Omit, '+order' | '+order_by'> + | Omit>, '+order' | '+order_by'>; interface BuildXFilterParams { - additionalFilters?: AdditionalFilters; + /** + * Filters to be added to the xFilters object. + */ + nonPaginationFilters?: AdditionalFilters; + /** + * Pagination options. This can be undefined if the pagination is not needed. + */ pagination?: { order: OrderDirection; orderBy: string; @@ -37,12 +43,12 @@ interface BuildXFilterParams { * It is usually meant for a landing page with a filterable table. */ export function buildXFilters({ - additionalFilters, + nonPaginationFilters, pagination, }: BuildXFilterParams): Filter { return { '+order': pagination?.order, '+order_by': pagination?.orderBy, - ...additionalFilters, + ...nonPaginationFilters, }; } diff --git a/packages/manager/src/routes/volumes/index.ts b/packages/manager/src/routes/volumes/index.ts index 9fee5313832..757e99d61b1 100644 --- a/packages/manager/src/routes/volumes/index.ts +++ b/packages/manager/src/routes/volumes/index.ts @@ -43,7 +43,7 @@ export const buildVolumeXFilters = ({ query, }: BuildVolumeXFiltersParams) => buildXFilters({ - additionalFilters: query + nonPaginationFilters: query ? { label: { '+contains': query }, }