Migration to patternfly v5

README.md

@@ -42,8 +42,9 @@ yarn check:eslint && yarn check:vue-tsc
 
 ```
 $ docker run -p 8080:8080 docker.io/optiprismio/demo:v0.1.10
-
-$ VITE_API_BASE_PATH=http://localhost:8080/api yarn start:dev
+```
+```
+$ VITE_MOCK_API=false VITE_API_BASE_PATH=http://localhost:8080/api yarn start:dev
 ```
 
 
@@ -64,7 +65,6 @@ VITE_API_BASE_PATH=http://localhost:8089/api yarn start:dev
 ### build:
 ```
 yarn build
-VITE_MOCK_API=true yarn build
 ```
 
 ### generate API client:

openapi.yaml

@@ -1671,14 +1671,14 @@ paths:
           description: Group ID
           required: true
           schema:
-            type: string
+            type: integer
+            format: i64
         - name: id
           in: path
           description: Group Record ID
           required: true
           schema:
-            type: integer
-            format: i64
+            type: string
       responses:
         200:
           description: event
@@ -3923,13 +3923,10 @@ components:
       type: object
       description: property name and value
       properties:
-        properties:
-          type: object
-          properties:
-            propertyName:
-              type: string
-            value:
-              $ref: '#/components/schemas/Value'
+        propertyName:
+          type: string
+        value:
+          $ref: '#/components/schemas/Value'
     PropertyAndValue:
       type: object
       description: property name, type and value

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@antv/g2": "^4.2.7",
     "@antv/g2plot": "^2.4.20",
-    "@patternfly/patternfly": "^4.183.1",
+    "@patternfly/patternfly": "^5.4.0",
     "@vueuse/core": "^10.4.1",
     "axios": "^1.6.5",
     "floating-vue": "^2.0.0",

src/App.vue

@@ -95,7 +95,7 @@ axiosInstance.interceptors.response.use(
 <style lang="scss">
 @mixin styled-scroll {
   scrollbar-width: thin;
-  scrollbar-color: var(--pf-global--palette--black-150) transparent;
+  scrollbar-color: var(--pf-v5-global--palette--black-150) transparent;
 
   &::-webkit-scrollbar {
     margin-top: 1rem;
@@ -105,7 +105,7 @@ axiosInstance.interceptors.response.use(
   }
 
   &::-webkit-scrollbar-track {
-    background-color: var(--pf-global--BackgroundColor--200);
+    background-color: var(--pf-v5-global--BackgroundColor--200);
     border-radius: 0.4rem;
   }
 
@@ -115,7 +115,7 @@ axiosInstance.interceptors.response.use(
   }
 }
 
-.pf-icon {
+.pf-v5-icon {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -129,21 +129,21 @@ axiosInstance.interceptors.response.use(
   min-height: 100vh;
 }
 
-.pf-c-page {
+.pf-v5-c-page {
   background-color: var(--op-base-background);
   min-height: 100vh;
 
   &__main-section {
-    padding: var(--pf-global--spacer--md);
+    padding: var(--pf-v5-global--spacer--md);
   }
 
   &__main {
     z-index: initial;
   }
 }
 
-.pf-c-menu.pf-m-scrollable {
-  .pf-c-menu__content {
+.pf-v5-c-menu.pf-v5-m-scrollable {
+  .pf-v5-c-menu__content {
     @include styled-scroll();
   }
 }