Skip to content

Commit de3ee2d

Browse files
nerdalertnerdalert
committed
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]>
1 parent 09b0968 commit de3ee2d

File tree

25 files changed

+195
-266
lines changed

25 files changed

+195
-266
lines changed

‎package-lock.json‎

Lines changed: 7 additions & 43 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"dependencies": {
2020
"@fortawesome/fontawesome-svg-core": "^6.6.0",
2121
"@next/env": "^15.0.3",
22-
"@patternfly/react-core": "^5.4.0",
22+
"@patternfly/react-core": "^6.0.0",
2323
"@patternfly/react-icons": "^6.0.0",
2424
"@patternfly/react-styles": "^6.0.0",
2525
"@patternfly/react-table": "^6.0.0",

‎src/app/login/githublogin.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect, useState } from 'react';
22
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
3-
import { Text } from '@patternfly/react-core/dist/dynamic/components/Text';
4-
import { TextContent } from '@patternfly/react-core/dist/dynamic/components/Text';
3+
import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
4+
55
import { Grid } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
66
import { GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
77
import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
88
import './githublogin.css';
99
import { signIn } from 'next-auth/react';
1010
import { useRouter, useSearchParams } from 'next/navigation';
11-
import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/components/Modal';
11+
import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal';
1212

1313
const GithubLogin: React.FC = () => {
1414
const searchParams = useSearchParams();
@@ -75,14 +75,16 @@ const GithubLogin: React.FC = () => {
7575
<Grid hasGutter span={12}>
7676
<GridItem span={6} className="login-container">
7777
<div>
78-
<TextContent>
79-
<Text className="sign-in-text">Sign in to your account</Text>
80-
</TextContent>
81-
<TextContent>
82-
<Text className="description-text">
78+
<Content>
79+
<Content component="p" className="sign-in-text">
80+
Sign in to your account
81+
</Content>
82+
</Content>
83+
<Content>
84+
<Content component="p" className="description-text">
8385
Join the novel, community based movement to <br></br>create truly open source LLMs
84-
</Text>
85-
</TextContent>
86+
</Content>
87+
</Content>
8688
<div className="login-container">
8789
<Button
8890
variant="primary"
@@ -95,8 +97,8 @@ const GithubLogin: React.FC = () => {
9597
Sign in with GitHub
9698
</Button>
9799
</div>
98-
<TextContent>
99-
<Text className="urls-text">
100+
<Content>
101+
<Content component="p" className="urls-text">
100102
<a href="https://github.com/instructlab/" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
101103
GitHub
102104
</a>{' '}
@@ -116,17 +118,17 @@ const GithubLogin: React.FC = () => {
116118
>
117119
Code Of Conduct
118120
</a>
119-
</Text>
120-
<Text className="urls-text-medium">
121+
</Content>
122+
<Content component="p" className="urls-text-medium">
121123
<a href="https://www.redhat.com/en/about/terms-use" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
122124
Terms of use
123125
</a>{' '}
124126
|{' '}
125127
<a href="https://www.redhat.com/en/about/privacy-policy" style={{ color: 'white', textDecoration: 'underline' }} target="_blank">
126128
Privacy Policy
127129
</a>
128-
</Text>
129-
</TextContent>
130+
</Content>
131+
</Content>
130132
</div>
131133
</GridItem>
132134
</Grid>

‎src/app/login/locallogin.tsx‎

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
// src/app/login/LocalLogin.tsx
2-
// 'use client';
3-
42
import React, { useState } from 'react';
53
import { signIn } from 'next-auth/react';
6-
import { Grid, GridItem, Text, TextContent, Form, FormGroup, TextInput, Button, HelperText, HelperTextItem } from '@patternfly/react-core';
4+
import { Grid, GridItem } from '@patternfly/react-core/dist/dynamic/layouts/Grid';
5+
import { Content } from '@patternfly/react-core/dist/dynamic/components/Content';
6+
import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
7+
import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
8+
import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
9+
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
10+
import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
11+
import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
712
import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
813
import './githublogin.css';
914

@@ -42,12 +47,16 @@ const LocalLogin: React.FunctionComponent = () => {
4247
<div className="login-page-background">
4348
<Grid hasGutter span={12}>
4449
<GridItem span={6} className="login-container">
45-
<TextContent>
46-
<Text className="sign-in-text">Login locally with a username and password or via GitHub OAuth</Text>
47-
</TextContent>
48-
<TextContent>
49-
<Text className="description-text">Join the novel, community-based movement to create truly open-source LLMs</Text>
50-
</TextContent>
50+
<Content>
51+
<Content component="p" className="sign-in-text">
52+
Login locally with a username and password or via GitHub OAuth
53+
</Content>
54+
</Content>
55+
<Content>
56+
<Content component="p" className="description-text">
57+
Join the novel, community-based movement to create truly open-source LLMs
58+
</Content>
59+
</Content>
5160
<div className="login-container">
5261
<Button
5362
variant="primary"
@@ -94,8 +103,8 @@ const LocalLogin: React.FunctionComponent = () => {
94103
</Button>
95104
</Form>
96105
</div>
97-
<TextContent>
98-
<Text className="urls-text">
106+
<Content>
107+
<Content component="p" className="urls-text">
99108
<a
100109
href="https://github.com/instructlab/"
101110
style={{ color: 'white', textDecoration: 'underline' }}
@@ -122,8 +131,8 @@ const LocalLogin: React.FunctionComponent = () => {
122131
>
123132
Code Of Conduct
124133
</a>
125-
</Text>
126-
<Text className="urls-text-medium">
134+
</Content>
135+
<Content component="p" className="urls-text-medium">
127136
<a
128137
href="https://www.redhat.com/en/about/terms-use"
129138
style={{ color: 'white', textDecoration: 'underline' }}
@@ -141,8 +150,8 @@ const LocalLogin: React.FunctionComponent = () => {
141150
>
142151
Privacy Policy
143152
</a>
144-
</Text>
145-
</TextContent>
153+
</Content>
154+
</Content>
146155
</GridItem>
147156
</Grid>
148157
</div>

‎src/app/playground/chat/page.tsx‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { AppLayout } from '@/components/AppLayout';
66
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
77
import { Form } from '@patternfly/react-core/dist/dynamic/components/Form';
88
import { FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
9-
import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, TextContent, TextInput, Title } from '@patternfly/react-core/';
9+
import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, Content, Title } from '@patternfly/react-core/';
1010
import { Select } from '@patternfly/react-core/dist/dynamic/components/Select';
1111
import { SelectOption, SelectList } from '@patternfly/react-core/dist/dynamic/components/Select';
1212
import { MenuToggle, MenuToggleElement } from '@patternfly/react-core/dist/dynamic/components/MenuToggle';
@@ -19,6 +19,7 @@ import Image from 'next/image';
1919
import styles from './chat.module.css';
2020
import { Endpoint, Message, Model } from '@/types';
2121
import CopyToClipboardButton from '@/components/CopyToClipboardButton';
22+
import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
2223

2324
const ChatPage: React.FC = () => {
2425
const [question, setQuestion] = useState('');
@@ -87,7 +88,7 @@ const ChatPage: React.FC = () => {
8788
</SelectOption>
8889
));
8990

90-
const handleQuestionChange = (event: React.FormEvent<HTMLInputElement>, value: string) => {
91+
const handleQuestionChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
9192
setQuestion(value);
9293
};
9394

@@ -255,12 +256,12 @@ const ChatPage: React.FC = () => {
255256
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
256257
Chat with a Model
257258
</Title>
258-
<TextContent>
259+
<Content>
259260
<br />
260261
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
261262
their own custom endpoint using the &quot;Custom Model Endpoints&quot; feature. Once the custom endpoint is configured, it will be available
262263
in the model selector dropdown with the pre hosted models.
263-
</TextContent>
264+
</Content>
264265
</PageSection>
265266
<div className={styles.chatContainer}>
266267
<div className={styles.modelSelector}>
@@ -276,9 +277,13 @@ const ChatPage: React.FC = () => {
276277
>
277278
<SelectList>{dropdownItems}</SelectList>
278279
</Select>
279-
<Button variant="plain" onClick={handleCleanup} aria-label="Cleanup" style={{ marginLeft: 'auto' }}>
280-
<FontAwesomeIcon icon={faBroom} />
281-
</Button>
280+
<Button
281+
icon={<FontAwesomeIcon icon={faBroom} />}
282+
variant="plain"
283+
onClick={handleCleanup}
284+
aria-label="Cleanup"
285+
style={{ marginLeft: 'auto' }}
286+
/>
282287
</div>
283288
<div ref={messagesContainerRef} className={styles.messagesContainer}>
284289
{messages.map((msg, index) => (
@@ -299,7 +304,7 @@ const ChatPage: React.FC = () => {
299304
<Form onSubmit={handleSubmit} className={styles.chatForm}>
300305
<FormGroup fieldId="question-field">
301306
<TextInput
302-
isRequired
307+
// isRequired
303308
type="text"
304309
id="question-field"
305310
name="question-field"

‎src/app/playground/endpoints/page.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,9 @@ import {
1111
DataListAction
1212
} from '@patternfly/react-core/dist/dynamic/components/DataList';
1313
import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
14-
import { ModalVariant } from '@patternfly/react-core/dist/dynamic/next/components/Modal';
15-
import { Breadcrumb, BreadcrumbItem, Modal, TextContent } from '@patternfly/react-core/components/';
14+
import { ModalVariant } from '@patternfly/react-core/dist/dynamic/components/Modal';
15+
import { Breadcrumb, BreadcrumbItem, Content } from '@patternfly/react-core/components/';
16+
import { Modal } from '@patternfly/react-core/deprecated';
1617
import { Form, FormGroup } from '@patternfly/react-core/dist/dynamic/components/Form';
1718
import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
1819
import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
@@ -121,25 +122,25 @@ const EndpointsPage: React.FC = () => {
121122

122123
return (
123124
<AppLayout>
124-
<PageBreadcrumb>
125+
<PageBreadcrumb hasBodyWrapper={false}>
125126
<Breadcrumb>
126127
<BreadcrumbItem to="/"> Dashboard </BreadcrumbItem>
127128
<BreadcrumbItem isActive>Custom Model Endpoints</BreadcrumbItem>
128129
</Breadcrumb>
129130
</PageBreadcrumb>
130131

131-
<PageSection style={{ backgroundColor: 'white' }}>
132+
<PageSection hasBodyWrapper={false} style={{ backgroundColor: 'white' }}>
132133
<Title headingLevel="h1" size="2xl" style={{ paddingTop: '10' }}>
133134
Custom Model Endpoints
134135
</Title>
135-
<TextContent>
136+
<Content>
136137
<br />
137138
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
138139
to use the custom model in the playground chat.
139-
</TextContent>
140+
</Content>
140141
</PageSection>
141142
<Page>
142-
<PageSection style={{ backgroundColor: 'white' }}>
143+
<PageSection hasBodyWrapper={false} style={{ backgroundColor: 'white' }}>
143144
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
144145
<Title headingLevel="h1">Manage Endpoints</Title>
145146
<Button onClick={handleAddEndpoint}>Add Endpoint</Button>

0 commit comments

Comments
 (0)