Added changeset: Migrate /volumes to Tanstack router

linode · Nov 1, 2024 · 2f88aae · 2f88aae
1 parent f6e07c2
commit 2f88aae
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/packages/manager/.changeset/pr-11154-tech-stories-1730404184309.md 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
@@ -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
@@ -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
@@ -12,11 +12,17 @@ type FieldFilter = {
 };
 
 type AdditionalFilters =
-  | Partial<FilterConditionTypes>
-  | Partial<Record<string, FieldFilter>>;
+  | Omit<Partial<FilterConditionTypes>, '+order' | '+order_by'>
+  | Omit<Partial<Record<string, FieldFilter>>, '+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
@@ -43,7 +43,7 @@ export const buildVolumeXFilters = ({
   query,
 }: BuildVolumeXFiltersParams) =>
   buildXFilters({
-    additionalFilters: query
+    nonPaginationFilters: query
       ? {
           label: { '+contains': query },
         }