feat: add support muxing rules v2 (#311)

* chore: add dnd-kit, uuid and upgrade ui-kit

* feat: create SortableArea generic component

* feat: replacing zustand store with useFormState, rename filename

* feat: replace drag icon

* feat: add models dropdown

* feat: create a remove queries utility fn

* refactor: simplify logic for handling dirty and reset form state

* feat: update muxing rules

* feat: show remove button if multiple rules

* feat: add link to doc and manager providers link

* refactor: remove unneeded div wrapper

* feat: use form buttons

* leftover

* feat: change notfication message

* chore: update msw handlers

* fix: update rules and add tests case

* refactor: rename filename

* refactor: revert changes

* chore: update openapi

* fix: matcher_type for filename

* feat: set the default muxing rule as catch all

* fix: update workspace name and models

* test: update muxing model

* fix: type

* fix: drag sortable area

* fix: catch all rule spacing

* fix: fields alignment

* fix: models unique identifier

* fix: invalidate models

* test: update muxing logic

* prettier

* refactor: review

Author: peppescg

icons/drag.svg

@@ -21,6 +21,8 @@
     "generate-icons": "npx @svgr/cli --typescript --no-dimensions --replace-attr-values '#2E323A=currentColor' --jsx-runtime automatic --out-dir ./src/components/icons/ -- icons"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@hey-api/client-fetch": "^0.7.1",
     "@jsonforms/core": "^3.5.1",
     "@jsonforms/react": "^3.5.1",
@@ -52,6 +54,7 @@
     "tailwind-variants": "^0.3.1",
     "tailwindcss-animate": "^1.0.7",
     "ts-pattern": "^5.6.2",
+    "uuid": "^11.0.5",
     "zod": "^3.24.1"
   },
   "devDependencies": {

package-lock.json

@@ -35,11 +35,11 @@ export type Alert = {
     | {
         [key: string]: unknown
       }
-    | null
-  trigger_type: string
-  trigger_category: string | null
-  timestamp: string
-}
+    | null;
+  trigger_type: string;
+  trigger_category: AlertSeverity;
+  timestamp: string;
+};
 
 /**
  * Represents an alert with it's respective conversation.
@@ -59,6 +59,11 @@ export type AlertConversation = {
   timestamp: string
 }
 
+export enum AlertSeverity {
+  INFO = "info",
+  CRITICAL = "critical",
+}
+
 /**
  * Represents a chat message.
  */
@@ -140,7 +145,9 @@ export type ModelByProvider = {
  * Represents the different types of matchers we support.
  */
 export enum MuxMatcherType {
-  CATCH_ALL = 'catch_all',
+  CATCH_ALL = "catch_all",
+  FILENAME_MATCH = "filename_match",
+  REQUEST_TYPE_MATCH = "request_type_match",
 }
 
 /**