RHCLOUD-30782 PF5 migration (#111)

* RHCLOUD-30782 PF5 migration * Updating styling --------- Co-authored-by: ewinchel <[email protected]>
RedHatInsights · Feb 7, 2024 · e0915e2 · e0915e2
1 parent 7b81ed2
commit e0915e2
Show file tree

Hide file tree

Showing 6 changed files with 3,395 additions and 2,596 deletions.
diff --git a/fec.config.js b/fec.config.js
@@ -33,5 +33,5 @@ module.exports = {
   },
   plugins: [],
   sassPrefix: '.virtualAssistant',
-  _unstableHotReload: process.env.HOT === 'true',
+  hotReload: process.env.HOT === 'true',
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,22 +17,23 @@
     "start": "HOT=true fec static",
     "start:standalone": "HOT=true STANDALONE=true fec dev",
     "test": "jest",
-    "postinstall": "rimraf .cache",
+    "postinstall": "ts-patch install && rimraf .cache",
     "verify": "npm-run-all build lint test"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.278.0",
-    "@patternfly/react-table": "^4.113.6",
-    "@redhat-cloud-services/frontend-components": "3.11.5",
-    "@redhat-cloud-services/frontend-components-notifications": "3.2.16",
-    "@redhat-cloud-services/frontend-components-utilities": "3.7.6",
+    "@patternfly/react-core": "^5.1.2",
+    "@patternfly/react-table": "^5.1.2",
+    "@patternfly/react-icons": "^5.1.2",
+    "@redhat-cloud-services/frontend-components": "4.2.3",
+    "@redhat-cloud-services/frontend-components-notifications": "4.1.0",
+    "@redhat-cloud-services/frontend-components-utilities": "4.0.2",
     "classnames": "^2.3.1",
     "immer": "^10.0.2",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-markdown": "^8.0.7",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-markdown": "^9.0.1",
     "react-redux": "8.1.3",
-    "react-router-dom": "5.2.0",
+    "react-router-dom": "^6.22.0",
     "redux": "4.2.1",
     "redux-logger": "3.0.6",
     "redux-promise-middleware": "6.1.3",
@@ -47,12 +48,12 @@
     "@babel/preset-typescript": "^7.23.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@redhat-cloud-services/eslint-config-redhat-cloud-services": "1.3.0",
-    "@redhat-cloud-services/frontend-components-config": "5.1.1",
+    "@redhat-cloud-services/frontend-components-config": "6.0.9",
+    "@redhat-cloud-services/tsc-transform-imports": "^1.0.7",
     "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^12.1.2",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "^18.0.5",
-    "@types/react-router-dom": "^5.3.3",
+    "@testing-library/react": "^14.2.1",
+    "@types/react": "^18.2.51",
+    "@types/react-dom": "^18.2.18",
     "@types/redux-logger": "^3.0.11",
     "@types/uuid": "^9.0.7",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
@@ -69,7 +70,8 @@
     "stylelint": "13.13.1",
     "stylelint-config-recommended-scss": "4.2.0",
     "stylelint-scss": "3.19.0",
-    "typescript": "^4.7.4",
+    "ts-patch": "^3.1.2",
+    "typescript": "^5.3.3",
     "webpack-bundle-analyzer": "4.9.1"
   },
   "insights": {

diff --git a/src/Components/AstroChat/AstroChat.tsx b/src/Components/AstroChat/AstroChat.tsx
@@ -1,17 +1,5 @@
 import React, { Dispatch, KeyboardEventHandler, SetStateAction, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import {
-  Button,
-  Card,
-  CardActions,
-  CardBody,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  InputGroup,
-  InputGroupText,
-  TextArea,
-  Title,
-} from '@patternfly/react-core';
+import { Button, Card, CardBody, CardFooter, CardHeader, CardTitle, InputGroup, InputGroupText, TextArea, Title } from '@patternfly/react-core';
 import { original, produce } from 'immer';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
 import { LoadingMessageEntry } from '../Message/LoadingMessageEntry';
@@ -83,7 +71,7 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
     [ask]
   );
 
-  const onChange = useCallback((value: string) => {
+  const onChange = useCallback((_event: unknown, value: string) => {
     removeEndConversationBanner();
     if (value === '\n') {
       return;
@@ -110,15 +98,21 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
   return (
     <div ref={astroContainer}>
       <Card className={`astro-c-card ${fullscreen ? 'astro-c-card-full-screen' : ''}`}>
-        <CardHeader className="astro-c-card__header">
-          <CardActions>
-            <Button variant="plain" aria-label="Full screen" onClick={() => setFullScreen(!fullscreen)} className="pf-v5-u-color-light-100">
-              {fullscreen ? <CompressAltIcon /> : <ExpandAltIcon />}
-            </Button>
-            <Button variant="plain" aria-label="Close virtual assistant" onClick={onClose} className="pf-v5-u-color-light-100">
-              <AngleDownIcon />
-            </Button>
-          </CardActions>
+        <CardHeader
+          className="astro-c-card__header"
+          actions={{
+            actions: (
+              <>
+                <Button variant="plain" aria-label="Full screen" onClick={() => setFullScreen(!fullscreen)} className="pf-v5-u-color-light-100">
+                  {fullscreen ? <CompressAltIcon /> : <ExpandAltIcon />}
+                </Button>
+                <Button variant="plain" aria-label="Close virtual assistant" onClick={onClose} className="pf-v5-u-color-light-100">
+                  <AngleDownIcon />
+                </Button>
+              </>
+            ),
+          }}
+        >
           <CardTitle>
             <Title headingLevel="h4" size="lg" className="pf-u-color-light-100">
               Virtual Assistant
@@ -158,7 +152,6 @@ export const AstroChat: React.FunctionComponent<AstroChatProps> = ({
               name="user-query"
               type="text"
               aria-label="User question"
-              className="pf-v5-u-pt-md pf-v5-u-pl-md"
             />
             <InputGroupText id="username">
               <Button onClick={onAskPressed} isDisabled={input.trim() === '' || blockInput} variant="plain" className="pf-v5-u-px-sm">

diff --git a/src/Components/AstroChat/AstroChatSkeleton.tsx b/src/Components/AstroChat/AstroChatSkeleton.tsx
@@ -2,17 +2,14 @@ import React from 'react';
 import {
   Button,
   Card,
-  CardActions,
   CardBody,
   CardFooter,
   CardHeader,
   CardTitle,
   InputGroup,
   InputGroupText,
   Skeleton,
-  Text,
   TextArea,
-  TextAreaReadOnlyVariant,
   Title,
 } from '@patternfly/react-core';
 import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
@@ -23,34 +20,33 @@ export const AstroChatSkeleton: React.FunctionComponent<unknown> = () => {
   return (
     <div>
       <Card className="astro-c-card">
-        <CardHeader className="astro-c-card__header">
+        <CardHeader
+          className="astro-c-card__header"
+          actions={{
+            actions: (
+              <>
+                <Button variant="plain" aria-label="Full screen" className="pf-v5-u-color-light-100">
+                  <ExpandAltIcon />
+                </Button>
+                <Button variant="plain" aria-label="Close virtual assistant" className="pf-v5-u-color-light-100">
+                  <AngleDownIcon />
+                </Button>
+              </>
+            ),
+          }}
+        >
           <CardTitle>
             <Title headingLevel="h4" size="lg" className="pf-u-color-light-100">
               Virtual Assistant
             </Title>
           </CardTitle>
-          <CardActions>
-            <Button variant="plain" aria-label="Full screen" className="pf-v5-u-color-light-100">
-              <ExpandAltIcon />
-            </Button>
-            <Button variant="plain" aria-label="Close virtual assistant" className="pf-v5-u-color-light-100">
-              <AngleDownIcon />
-            </Button>
-          </CardActions>
         </CardHeader>
         <CardBody className="astro-c-card__body pf-v5-u-px-md pf-v5-u-pt-xl pf-v5-m-scrollable pf-v5-u-background-color-100">
           <Skeleton width="80%" />
         </CardBody>
         <CardFooter className="astro-c-card__footer pf-v5-u-p-0">
           <InputGroup>
-            <TextArea
-              placeholder="Type a message..."
-              name="user-query"
-              type="text"
-              aria-label="User question"
-              className="pf-v5-u-pt-md pf-v5-u-pl-md"
-              readOnlyVariant={TextAreaReadOnlyVariant.plain}
-            />
+            <TextArea placeholder="Type a message..." name="user-query" type="text" aria-label="User question" readOnlyVariant="plain" />
             <InputGroupText id="username">
               <Button isDisabled variant="plain" className="pf-v5-u-px-sm">
                 <PlaneIcon />

diff --git a/src/SharedComponents/AstroVirtualAssistant/astro-virtual-assistant.scss b/src/SharedComponents/AstroVirtualAssistant/astro-virtual-assistant.scss
@@ -33,7 +33,7 @@
     }
     .bubble {
       border-radius: 14px;
-      padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--md) var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
+      padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
       max-width: 100%;
       word-wrap: break-word;
     }
@@ -45,45 +45,33 @@
     }
     .system-message {
       .system-message-text {
-        padding-bottom: var(--pf-global--spacer--md);
+        padding-bottom: var(--pf-v5-global--spacer--md);
         text-align: center;
       }
     }
     .banner {
       &__chat-end {
         padding-top: 0;
-        padding-bottom: var(--pf-global--spacer--md);
+        padding-bottom: var(--pf-v5-global--spacer--md);
         .banner-alert {
           .pf-c-alert__title {
             margin-top: 0;
-            font-size: var(--pf-global--FontSize--sm);
+            font-size: var(--pf-v5-global--FontSize--sm);
           }
         }
       }
     }
   }
   &__footer {
-    .pf-c-input-group {
+    .pf-v5-c-input-group {
       height: 60px;
     }
-    .pf-c-form-control {
-      --pf-c-form-control--focus--BorderBottomColor: var(--pf-v5-global--palette--red-200);
-      --pf-c-form-control--hover--BorderBottomColor: var(--pf-v5-global--palette--red-200);
-      border-bottom-width: 1px;
-      resize: none;
-     }
-    .pf-c-form-control:not(textarea) {
-      height: 100%;
+    .pf-v5-c-form-control {
+      --pf-v5-c-form-control--Resize: none;
+      --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--icon--Color--light--dark);
     }
     :focus-visible {
       outline: none;
-      box-shadow: 0 -3px 0 var(--pf-v5-global--palette--red-200);
-    }
-    .pf-c-input-group__text {
-      &:hover {
-        box-shadow: 0 -3px 0 var(--pf-v5-global--palette--red-200);
-        border-bottom: 1px solid var(--pf-v5-global--palette--red-200);
-      }
     }
   }
 }