Migrate to Patternfly v6

- Themes are now done via Tokens. The current theme is no longer honored and will need to be resolved via design tokens: https://www.patternfly.org/tokens/about-tokens Signed-off-by: Brent Salisbury <[email protected]>
samarpita-bhaumik · Nov 14, 2024 · de3ee2d · de3ee2d
1 parent 09b0968
commit de3ee2d
Show file tree

Hide file tree

Showing 25 changed files with 195 additions and 266 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@next/env": "^15.0.3",
-    "@patternfly/react-core": "^5.4.0",
+    "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
     "@patternfly/react-styles": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",

diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
-import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
+import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
+
 import { Grid } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
 import { GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
 import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
 import './githublogin.css';
 import { signIn } from 'next-auth/react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal';
+import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal';
 
 const GithubLogin: React.FC = () => {
   const searchParams = useSearchParams();
@@ -75,14 +75,16 @@ const GithubLogin: React.FC = () => {
       <Grid hasGutter span={12}>
         <GridItem span={6} className="login-container">
           <div>
-            <TextContent>
-              <Text className="sign-in-text">Sign in to your account</Text>
-            </TextContent>
-            <TextContent>
-              <Text className="description-text">
+            <Content>
+              <Content component="p" className="sign-in-text">
+                Sign in to your account
+              </Content>
+            </Content>
+            <Content>
+              <Content component="p" className="description-text">
                 Join the novel, community based movement to <br></br>create truly open source LLMs
-              </Text>
-            </TextContent>
+              </Content>
+            </Content>
             <div className="login-container">
               <Button
                 variant="primary"
@@ -95,8 +97,8 @@ const GithubLogin: React.FC = () => {
                 Sign in with GitHub
               </Button>
             </div>
-            <TextContent>
-              <Text className="urls-text">
+            <Content>
+              <Content component="p" className="urls-text">
                 <a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
                   GitHub
                 </a>{' '}
@@ -116,17 +118,17 @@ const GithubLogin: React.FC = () => {
                 >
                   Code Of Conduct
                 </a>
-              </Text>
-              <Text className="urls-text-medium">
+              </Content>
+              <Content component="p" className="urls-text-medium">
                 <a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
                   Terms of use
                 </a>{' '}
                 |{' '}
                 <a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
                   Privacy Policy
                 </a>
-              </Text>
-            </TextContent>
+              </Content>
+            </Content>
           </div>
         </GridItem>
       </Grid>

diff --git a/src/app/login/locallogin.tsx b/src/app/login/locallogin.tsx
@@ -1,9 +1,14 @@
 // src/app/login/LocalLogin.tsx
-// 'use client';
-
 import React, { useState } from 'react';
 import { signIn } from 'next-auth/react';
-import { Grid, GridItem, Text, TextContent, Form, FormGroup, TextInput, Button, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { Grid, GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
+import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
+import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
+import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
+import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
+import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
+import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
 import './githublogin.css';
 
@@ -42,12 +47,16 @@ const LocalLogin: React.FunctionComponent = () => {
     <div className="login-page-background">
       <Grid hasGutter span={12}>
         <GridItem span={6} className="login-container">
-          <TextContent>
-            <Text className="sign-in-text">Login locally with a username and password or via GitHub OAuth</Text>
-          </TextContent>
-          <TextContent>
-            <Text className="description-text">Join the novel, community-based movement to create truly open-source LLMs</Text>
-          </TextContent>
+          <Content>
+            <Content component="p" className="sign-in-text">
+              Login locally with a username and password or via GitHub OAuth
+            </Content>
+          </Content>
+          <Content>
+            <Content component="p" className="description-text">
+              Join the novel, community-based movement to create truly open-source LLMs
+            </Content>
+          </Content>
           <div className="login-container">
             <Button
               variant="primary"
@@ -94,8 +103,8 @@ const LocalLogin: React.FunctionComponent = () => {
               </Button>
             </Form>
           </div>
-          <TextContent>
-            <Text className="urls-text">
+          <Content>
+            <Content component="p" className="urls-text">
               <a
                 href="https://github.com/instructlab/"
                 style={{ color: 'white', textDecoration: 'underline' }}
@@ -122,8 +131,8 @@ const LocalLogin: React.FunctionComponent = () => {
               >
                 Code Of Conduct
               </a>
-            </Text>
-            <Text className="urls-text-medium">
+            </Content>
+            <Content component="p" className="urls-text-medium">
               <a
                 href="https://www.redhat.com/en/about/terms-use"
                 style={{ color: 'white', textDecoration: 'underline' }}
@@ -141,8 +150,8 @@ const LocalLogin: React.FunctionComponent = () => {
               >
                 Privacy Policy
               </a>
-            </Text>
-          </TextContent>
+            </Content>
+          </Content>
         </GridItem>
       </Grid>
     </div>

diff --git a/src/app/playground/chat/page.tsx b/src/app/playground/chat/page.tsx
@@ -6,7 +6,7 @@ import { AppLayout } from '@/components/AppLayout';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
 import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
-import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, TextContent, TextInput, Title } from '@patternfly/react-core/';
+import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, Content, Title } from '@patternfly/react-core/';
 import { Select } from '@patternfly/react-core/dist/dynamic/components/Select';
 import { SelectOption, SelectList } from '@patternfly/react-core/dist/dynamic/components/Select';
 import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
@@ -19,6 +19,7 @@ import Image from 'next/image';
 import styles from './chat.module.css';
 import { Endpoint, Message, Model } from '@/types';
 import CopyToClipboardButton from '@/components/CopyToClipboardButton';
+import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 
 const ChatPage: React.FC = () => {
   const [question, setQuestion] = useState('');
@@ -87,7 +88,7 @@ const ChatPage: React.FC = () => {
       </SelectOption>
     ));
 
-  const handleQuestionChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
+  const handleQuestionChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
     setQuestion(value);
   };
 
@@ -255,12 +256,12 @@ const ChatPage: React.FC = () => {
         <Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
           Chat with a Model
         </Title>
-        <TextContent>
+        <Content>
           <br />
           Chat with the served models. Currently it allows you to chat with Merlinite-7b and Granite-7B models hosted on your Cloud. Users can add
           their own custom endpoint using the &quot;Custom Model Endpoints&quot; feature. Once the custom endpoint is configured, it will be available
           in the model selector dropdown with the pre hosted models.
-        </TextContent>
+        </Content>
       </PageSection>
       <div className={styles.chatContainer}>
         <div className={styles.modelSelector}>
@@ -276,9 +277,13 @@ const ChatPage: React.FC = () => {
           >
             <SelectList>{dropdownItems}</SelectList>
           </Select>
-          <Button variant="plain" onClick={handleCleanup} aria-label="Cleanup" style={{ marginLeft: 'auto' }}>
-            <FontAwesomeIcon icon={faBroom} />
-          </Button>
+          <Button
+            icon={<FontAwesomeIcon icon={faBroom} />}
+            variant="plain"
+            onClick={handleCleanup}
+            aria-label="Cleanup"
+            style={{ marginLeft: 'auto' }}
+          />
         </div>
         <div ref={messagesContainerRef} className={styles.messagesContainer}>
           {messages.map((msg, index) => (
@@ -299,7 +304,7 @@ const ChatPage: React.FC = () => {
         <Form onSubmit={handleSubmit} className={styles.chatForm}>
           <FormGroup fieldId="question-field">
             <TextInput
-              isRequired
+              // isRequired
               type="text"
               id="question-field"
               name="question-field"

diff --git a/src/app/playground/endpoints/page.tsx b/src/app/playground/endpoints/page.tsx
@@ -11,8 +11,9 @@ import {
   DataListAction
 } from '@patternfly/react-core/dist/dynamic/components/DataList';
 import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import { ModalVariant } from '@patternfly/react-core/dist/dynamic/next/components/Modal';
-import { Breadcrumb, BreadcrumbItem, Modal, TextContent } from '@patternfly/react-core/components/';
+import { ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal';
+import { Breadcrumb, BreadcrumbItem, Content } from '@patternfly/react-core/components/';
+import { Modal } from '@patternfly/react-core/deprecated';
 import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
 import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
@@ -121,25 +122,25 @@ const EndpointsPage: React.FC = () => {
 
   return (
     <AppLayout>
-      <PageBreadcrumb>
+      <PageBreadcrumb hasBodyWrapper={false}>
         <Breadcrumb>
           <BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
           <BreadcrumbItem isActive>Custom Model Endpoints</BreadcrumbItem>
         </Breadcrumb>
       </PageBreadcrumb>
 
-      <PageSection style={{ backgroundColor: 'white' }}>
+      <PageSection hasBodyWrapper={false} style={{ backgroundColor: 'white' }}>
         <Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
           Custom Model Endpoints
         </Title>
-        <TextContent>
+        <Content>
           <br />
           Manage your own customer model endpoints. If you have a custom model that is served by an endpoint, you can add it here. This will allow you
           to use the custom model in the playground chat.
-        </TextContent>
+        </Content>
       </PageSection>
       <Page>
-        <PageSection style={{ backgroundColor: 'white' }}>
+        <PageSection hasBodyWrapper={false} style={{ backgroundColor: 'white' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <Title headingLevel="h1">Manage Endpoints</Title>
             <Button onClick={handleAddEndpoint}>Add Endpoint</Button>