Use NextJS catch-all segments instead of URN

[gilluminate]

Closes #

Description Of Changes

Utilize NextJS catch-all segments to avoid the need for "." separated subfieldURN and encode/decode all field names when used as URL parts.

(see https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#catch-all-segments)

Code Changes

• Implement catch-all segment route
• Replace URN usage with new catch-all segment support instead
• Include styles to allow breadcrumbs to get super long and scrollable
• Hides Taxonomy Picker on rows with subfields until that bug gets fixed

Steps to Confirm

• Add the following dataset

- fides_key: example_dataset_issue_hj36
  organization_fides_key: default_organization
  tags: null
  name: example_dataset_issue_hj36
  description: Minimal dataset reproducing issue (HJ-36)
  meta: null
  data_categories: null
  fides_meta: null
  collections:
    - name: example_table
      description: Example description
      data_categories: []
      fields:
        - name: example_nested_field
          description: null
          data_categories: null
          fides_meta: null
          fields:
            - name: example_success_nested_field
              description: Can save data category changes on nested field
              data_categories:
                - user.device
              fides_meta: null
              fields: []
            - name: example_failure_nested_field.1
              description: >-
                Fail to save data category changes on nested field with '.' in
                name
              data_categories: []
              fides_meta: null
              fields:
                - name: some.thing/Stupid-that's_redicuLous&
                  description: tesing some random string
                  data_categories: []
                  fides_meta: null
                  fields:
                    - name: another.dumb:th!ng
                      description: tesing some random string
                      data_categories:
                        - user.location
                      fides_meta: null
                      fields: null
        - name: example_success_field
          description: Can save data category changes
          data_categories:
            - user.device
          fides_meta: null
          fields: null
        - name: example_success_field.1
          description: Can save data category changes
          data_categories:
            - user.device
          fides_meta: null
          fields: null
      fides_meta: null

• Navigate down the example_dataset_issue_hj36 table as long as there are subfields available
• Even with crazy names, the URLs and breadcrumbs should behave as expected
• At the end where "another.dumb:th!ng" row exists, make sure you can add a new Data Category

Pre-Merge Checklist

• All CI Pipelines Succeeded
• Issue Requirements are Met
• Relevant Follow-Up Issues Created
• Update CHANGELOG.md

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	⬜️ Ignored (Inspect)	Visit Preview		Oct 17, 2024 11:32pm

[cypress]

fides    Run #10508

Run Properties:   Passed #10508  •  7147d0497d ℹ️: Merge 552ad78436d973cf2357a4f688a917ee95815e44 into cb0579859b31e8f3b8c8ef5c232f...

Project	fides
Run status	Passed #10508
Run duration	00m 37s
Commit	7147d0497d ℹ️: Merge 552ad78436d973cf2357a4f688a917ee95815e44 into cb0579859b31e8f3b8c8ef5c232f...
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.

[lucanovera]

Great work 💯 . This is a better pattern, it's great that is more robust in handling weird characters and simpler because of the delegation of parsing the url to next.js. I tested this and other datasets without any problems.

[cypress]

fides    Run #10513

Run Properties:   Passed #10513  •  fa1b922c52: Use NextJS catch-all segments instead of URN (#5396)

Project	fides
Run status	Passed #10513
Run duration	00m 39s
Commit	fa1b922c52: Use NextJS catch-all segments instead of URN (#5396)
Committer	Jason Gill
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.