Follow best practices for react-core component imports

Replace deprecated modal component Signed-off-by: Anil Vishnoi <[email protected]>
instructlab · Dec 20, 2024 · 0cbd75d · 0cbd75d
1 parent e1a962f
commit 0cbd75d
Show file tree

Hide file tree

Showing 63 changed files with 296 additions and 495 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,7 +1,6 @@
 {
   "extends": [
     "next/core-web-vitals",
-    "@redhat-cloud-services/eslint-config-redhat-cloud-services",
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",

diff --git a/src/app/api/pr/knowledge/route.ts b/src/app/api/pr/knowledge/route.ts
@@ -1,7 +1,6 @@
 // src/app/api/pr/knowledge/route.ts
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
-import { NextRequest } from 'next/server';
 import yaml from 'js-yaml';
 import { KnowledgeYamlData, AttributionData } from '@/types';
 import { GITHUB_API_URL, BASE_BRANCH } from '@/types/const';

diff --git a/src/app/api/pr/skill/route.ts b/src/app/api/pr/skill/route.ts
@@ -1,7 +1,6 @@
 // src/app/api/pr/skill/route.ts
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
-import { NextRequest } from 'next/server';
 import yaml from 'js-yaml';
 import { SkillYamlData, AttributionData } from '@/types';
 import { GITHUB_API_URL, BASE_BRANCH } from '@/types/const';

diff --git a/src/app/api/upload/route.ts b/src/app/api/upload/route.ts
@@ -1,7 +1,6 @@
 // src/app/api/upload/route.ts
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
 import { getToken } from 'next-auth/jwt';
-import { NextRequest } from 'next/server';
 
 const GITHUB_API_URL = 'https://api.github.com';
 const TAXONOMY_DOCUMENTS_REPO = process.env.NEXT_PUBLIC_TAXONOMY_DOCUMENTS_REPO!;

diff --git a/src/app/contribute/knowledge/page.tsx b/src/app/contribute/knowledge/page.tsx
@@ -1,8 +1,8 @@
 // src/app/contribute/knowledge/page.tsx
 'use client';
 import { AppLayout } from '@/components/AppLayout';
-import { KnowledgeFormGithub } from '@/components/Contribute/Knowledge/Github/index';
-import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native/index';
+import KnowledgeFormGithub from '@/components/Contribute/Knowledge/Github';
+import KnowledgeFormNative from '@/components/Contribute/Knowledge/Native';
 import { useEffect, useState } from 'react';
 
 const KnowledgeFormPage: React.FunctionComponent = () => {

diff --git a/src/app/login/devmodelogin.tsx b/src/app/login/devmodelogin.tsx
@@ -1,16 +1,9 @@
 // src/app/login/DevModeLogin.tsx
 import React, { useState } from 'react';
 import { signIn } from 'next-auth/react';
-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';
+import { Button, Content, Form, FormGroup, Grid, GridItem, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
+import { GithubIcon } from '@patternfly/react-icons';
 
 const DevModeLogin: React.FunctionComponent = () => {
   const [, setShowHelperText] = useState(false);

diff --git a/src/app/login/githublogin.tsx b/src/app/login/githublogin.tsx
@@ -1,14 +1,9 @@
 import React, { useEffect, useState, Suspense } from 'react';
-import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-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/deprecated/components/Modal';
+import { Button, Content, Grid, GridItem, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core';
+import { GithubIcon } from '@patternfly/react-icons';
 
 const GithubLogin: React.FC = () => {
   const router = useRouter();
@@ -138,19 +133,23 @@ const GithubLogin: React.FC = () => {
             <Modal
               variant={ModalVariant.medium}
               title="Join InstructLab on GitHub"
-              titleIconVariant="warning"
               isOpen={showError}
               onClose={() => handleOnClose()}
-              actions={[
+              aria-labelledby="join-ilab-modal-title"
+              aria-describedby="join-ilab-body-variant"
+            >
+              <ModalHeader title="Join InstructLab on GitHub" labelId="join-ilab-modal-title" titleIconVariant="danger" />
+              <ModalBody id="join-ilab-body-variant">
+                <p>{errorMsg}</p>
+              </ModalBody>
+              <ModalFooter >
                 <Button key="confirm" variant="primary" onClick={() => sendInvite()}>
                   Send Invite to {githubUsername}
                 </Button>,
                 <Button key="cancel" variant="secondary" onClick={() => handleOnClose()}>
                   No, Thanks
                 </Button>
-              ]}
-            >
-              <p>{errorMsg}</p>
+              </ModalFooter>
             </Modal>
           </div>
         )}

diff --git a/src/app/login/nativelogin.tsx b/src/app/login/nativelogin.tsx
@@ -1,15 +1,8 @@
 // src/app/login/NativeLogin.tsx
 import React, { useState } from 'react';
 import { signIn } from 'next-auth/react';
-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 './githublogin.css';
+import { Button, Content, Form, FormGroup, Grid, GridItem, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 
 const NativeLogin: React.FunctionComponent = () => {
   const [, setShowHelperText] = useState(false);

diff --git a/src/app/playground/chat/page.tsx b/src/app/playground/chat/page.tsx
@@ -3,23 +3,14 @@
 
 import React, { useState, useRef, useEffect } from 'react';
 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, 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';
-import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
-import UserIcon from '@patternfly/react-icons/dist/dynamic/icons/user-icon';
-import { Alert } from '@patternfly/react-core/dist/dynamic/components/Alert';
+import { Breadcrumb, BreadcrumbItem, PageBreadcrumb, PageSection, Content, Title, MenuToggleElement, MenuToggle, SelectOption, Select, SelectList, Button, Spinner, Form, FormGroup, TextInput, Alert } from '@patternfly/react-core/';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBroom } from '@fortawesome/free-solid-svg-icons';
 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';
+import { UserIcon } from '@patternfly/react-icons';
 
 const ChatPage: React.FC = () => {
   const [question, setQuestion] = useState('');

diff --git a/src/app/playground/endpoints/page.tsx b/src/app/playground/endpoints/page.tsx
@@ -1,28 +1,11 @@
 'use client';
 
 import React, { useState, useEffect } from 'react';
-import { Page, PageBreadcrumb, PageSection } from '@patternfly/react-core/dist/dynamic/components/Page';
-import {
-  DataList,
-  DataListItem,
-  DataListItemRow,
-  DataListItemCells,
-  DataListCell,
-  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/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';
-import { InputGroup } from '@patternfly/react-core/dist/dynamic/components/InputGroup';
-import EyeIcon from '@patternfly/react-icons/dist/dynamic/icons/eye-icon';
-import EyeSlashIcon from '@patternfly/react-icons/dist/dynamic/icons/eye-slash-icon';
 import { v4 as uuidv4 } from 'uuid';
 import { AppLayout } from '@/components/AppLayout';
 import { Endpoint } from '@/types';
+import { Breadcrumb, BreadcrumbItem, Button, Content, DataList, DataListAction, DataListCell, DataListItem, DataListItemCells, DataListItemRow, Form, FormGroup, InputGroup, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Page, PageBreadcrumb, PageSection, TextInput, Title } from '@patternfly/react-core';
+import { EyeSlashIcon, EyeIcon } from '@patternfly/react-icons';
 
 interface ExtendedEndpoint extends Endpoint {
   isApiKeyVisible?: boolean;
@@ -118,7 +101,7 @@ const EndpointsPage: React.FC = () => {
     return isApiKeyVisible ? apiKey : '********';
   };
 
-  useEffect(() => {}, [url]);
+  useEffect(() => { }, [url]);
 
   return (
     <AppLayout>
@@ -180,49 +163,56 @@ const EndpointsPage: React.FC = () => {
         </PageSection>
         {isModalOpen && (
           <Modal
+            variant={ModalVariant.medium}
             title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'}
             isOpen={isModalOpen}
-            onClose={handleModalToggle}
-            variant={ModalVariant.medium}
-            actions={[
+            onClose={() => handleModalToggle()}
+            aria-labelledby="endpoint-modal-title"
+            aria-describedby="endpoint-body-variant"
+          >
+            <ModalHeader title={currentEndpoint?.id ? 'Edit Endpoint' : 'Add Endpoint'} labelId="endpoint-modal-title" titleIconVariant="info" />
+            <ModalBody id="endpoint-body-variant">
+
+              <Form>
+                <FormGroup label="URL" isRequired fieldId="url">
+                  <TextInput isRequired type="text" id="url" name="url" value={url} onChange={(_, value) => setUrl(value)} placeholder="Enter URL" />
+                </FormGroup>
+                <FormGroup label="Model Name" isRequired fieldId="modelName">
+                  <TextInput
+                    isRequired
+                    type="text"
+                    id="modelName"
+                    name="modelName"
+                    value={modelName}
+                    onChange={(_, value) => setModelName(value)}
+                    placeholder="Enter Model Name"
+                  />
+                </FormGroup>
+                <FormGroup label="API Key" isRequired fieldId="apiKey">
+                  <InputGroup>
+                    <TextInput
+                      isRequired
+                      type="password"
+                      id="apiKey"
+                      name="apiKey"
+                      value={apiKey}
+                      onChange={(_, value) => setApiKey(value)}
+                      placeholder="Enter API Key"
+                    />
+                  </InputGroup>
+                </FormGroup>
+              </Form>
+              </ModalBody>
+              <ModalFooter>
               <Button key="save" variant="primary" onClick={handleSaveEndpoint}>
                 Save
               </Button>,
               <Button key="cancel" variant="link" onClick={handleModalToggle}>
                 Cancel
               </Button>
-            ]}
-          >
-            <Form>
-              <FormGroup label="URL" isRequired fieldId="url">
-                <TextInput isRequired type="text" id="url" name="url" value={url} onChange={(_, value) => setUrl(value)} placeholder="Enter URL" />
-              </FormGroup>
-              <FormGroup label="Model Name" isRequired fieldId="modelName">
-                <TextInput
-                  isRequired
-                  type="text"
-                  id="modelName"
-                  name="modelName"
-                  value={modelName}
-                  onChange={(_, value) => setModelName(value)}
-                  placeholder="Enter Model Name"
-                />
-              </FormGroup>
-              <FormGroup label="API Key" isRequired fieldId="apiKey">
-                <InputGroup>
-                  <TextInput
-                    isRequired
-                    type="password"
-                    id="apiKey"
-                    name="apiKey"
-                    value={apiKey}
-                    onChange={(_, value) => setApiKey(value)}
-                    placeholder="Enter API Key"
-                  />
-                </InputGroup>
-              </FormGroup>
-            </Form>
+              </ModalFooter>
           </Modal>
+
         )}
       </Page>
     </AppLayout>

diff --git a/src/components/AboutModal/AboutModal.tsx b/src/components/AboutModal/AboutModal.tsx
@@ -1,12 +1,10 @@
 import { useCallback, type Dispatch, type SetStateAction } from 'react';
-import { Content, ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content';
-import { Button } from '@patternfly/react-core/dist/dynamic/components/Button';
-import GithubIcon from '@patternfly/react-icons/dist/dynamic/icons/github-icon';
 import InstructLabLogo from '../../../public/updated-logo.png';
 import InstructLabAboutUsBg from '../../../public/InstructLab-About-Modal-Background.svg';
 import styles from './about-modal.module.css';
 import { linksData } from './data/linksData';
-import { AboutModal } from '@patternfly/react-core/dist/esm/components/AboutModal';
+import { AboutModal, Content, Button, ContentVariants } from '@patternfly/react-core';
+import { GithubIcon } from '@patternfly/react-icons';
 
 const AboutInstructLab = ({ isOpen, setIsOpen }: AboutModalProps) => {
   const handleClose = useCallback(() => {

diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx
@@ -2,30 +2,14 @@
 'use client';
 
 import * as React from 'react';
-import { Page, PageToggleButton } from '@patternfly/react-core/dist/dynamic/components/Page';
-import { Content, ContentVariants } from '@patternfly/react-core/dist/dynamic/components/Content';
 import { usePathname, useRouter } from 'next/navigation';
-import { BarsIcon } from '@patternfly/react-icons/dist/dynamic/icons/bars-icon';
-import { Brand } from '@patternfly/react-core/dist/dynamic/components/Brand';
 import HelpDropdown from './HelpDropdown/HelpDropdown';
 import Link from 'next/link';
-import { Masthead } from '@patternfly/react-core/dist/dynamic/components/Masthead';
-import { MastheadContent } from '@patternfly/react-core/dist/dynamic/components/Masthead';
-import { MastheadMain } from '@patternfly/react-core/dist/dynamic/components/Masthead';
-import { MastheadToggle, MastheadBrand } from '@patternfly/react-core/dist/dynamic/components/Masthead';
-import { Nav } from '@patternfly/react-core/dist/dynamic/components/Nav';
-import { NavExpandable } from '@patternfly/react-core/dist/dynamic/components/Nav';
-import { NavItem } from '@patternfly/react-core/dist/dynamic/components/Nav';
-import { NavList } from '@patternfly/react-core/dist/dynamic/components/Nav';
-import { PageSidebar } from '@patternfly/react-core/dist/dynamic/components/Page';
-import { PageSidebarBody } from '@patternfly/react-core/dist/dynamic/components/Page';
-import { SkipToContent } from '@patternfly/react-core/dist/dynamic/components/SkipToContent';
-import { Spinner } from '@patternfly/react-core/dist/dynamic/components/Spinner';
-import { Bullseye } from '@patternfly/react-core/dist/dynamic/layouts/Bullseye';
 import UserMenu from './UserMenu/UserMenu';
 import { useSession } from 'next-auth/react';
-// import { useTheme } from '../context/ThemeContext';
 import { useState } from 'react';
+import { Bullseye, Spinner, Masthead, MastheadMain, MastheadToggle, PageToggleButton, MastheadBrand, Brand, Content, ContentVariants, MastheadContent, NavItem, NavExpandable, Nav, NavList, PageSidebar, PageSidebarBody, SkipToContent, Page } from '@patternfly/react-core';
+import { BarsIcon } from '@patternfly/react-icons';
 
 interface IAppLayout {
   children: React.ReactNode;

diff --git a/src/components/Contribute/AuthorInformation.tsx b/src/components/Contribute/AuthorInformation.tsx
@@ -1,12 +1,8 @@
 import React, { useEffect, useState } from 'react';
-import { FormGroup, FormHelperText } from '@patternfly/react-core/dist/dynamic/components/Form';
-import { TextInput } from '@patternfly/react-core/dist/dynamic/components/TextInput';
-import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
-import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/dynamic/icons/exclamation-circle-icon';
-import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { checkSkillFormCompletion } from './Skill/validation';
 import { checkKnowledgeFormCompletion } from './Knowledge/validation';
+import { ValidatedOptions, FormGroup, TextInput, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import { ExclamationCircleIcon } from '@patternfly/react-icons';
 
 export enum FormType {
   Knowledge,

diff --git a/src/components/Contribute/EditKnowledge/EditKnowledge.tsx b/src/components/Contribute/EditKnowledge/EditKnowledge.tsx
@@ -9,11 +9,10 @@ import { fetchPullRequest, fetchFileContent, fetchPullRequestFiles } from '@/uti
 import yaml from 'js-yaml';
 import axios from 'axios';
 import { KnowledgeEditFormData, KnowledgeFormData, QuestionAndAnswerPair, KnowledgeSeedExample } from '@/types';
-import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants';
 import { useEffect, useState } from 'react';
-import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal/Modal';
 import { useRouter } from 'next/navigation';
 import KnowledgeFormGithub from '../Knowledge/Github';
+import { ValidatedOptions, Modal, ModalVariant } from '@patternfly/react-core';
 
 interface EditKnowledgeClientComponentProps {
   prNumber: number;

diff --git a/src/components/Contribute/EditSkill/EditSkill.tsx b/src/components/Contribute/EditSkill/EditSkill.tsx
@@ -4,15 +4,14 @@
 import * as React from 'react';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
-import { ValidatedOptions } from '@patternfly/react-core/dist/esm/helpers/constants';
-import { Modal, ModalVariant } from '@patternfly/react-core/dist/esm/deprecated/components/Modal/Modal';
 import { useRouter } from 'next/navigation';
 import SkillFormGithub, { SkillEditFormData } from '@/components/Contribute/Skill/Github';
 import { fetchPullRequest, fetchFileContent, fetchPullRequestFiles } from '@/utils/github';
 import yaml from 'js-yaml';
 import axios from 'axios';
 import { SkillYamlData, AttributionData, PullRequestFile, SkillFormData, SkillSeedExample } from '@/types';
 import { SkillSchemaVersion } from '@/types/const';
+import { ValidatedOptions, Modal, ModalVariant } from '@patternfly/react-core';
 
 interface EditSkillClientComponentProps {
   prNumber: number;