Replace custom CSS with PatternFly Sidebar on User Preferences page

Assisted by Claude code

Author: sg00dwin

frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.scss

@@ -3,17 +3,11 @@ import { Form } from '@patternfly/react-core';
 import type { ResolvedUserPreferenceItem } from './types';
 import UserPreferenceField from './UserPreferenceField';
 
-import './UserPreferenceForm.scss';
-
 type UserPreferenceFormProps = { items: ResolvedUserPreferenceItem[] };
 
 const UserPreferenceForm: FC<UserPreferenceFormProps> = ({ items }) =>
   items && items.length > 0 ? (
-    <Form
-      onSubmit={(event) => event.preventDefault()}
-      className="co-user-preference__form"
-      role="form"
-    >
+    <Form onSubmit={(event) => event.preventDefault()} role="form">
       {items.map((item) => (
         <UserPreferenceField key={item.id} item={item} />
       ))}

frontend/packages/console-app/src/components/user-preferences/UserPreferenceForm.tsx

@@ -1,7 +1,16 @@
 import { useMemo, useState, useEffect, createRef } from 'react';
 import type { FC, ReactElement, JSXElementConstructor, MouseEvent } from 'react';
 import type { TabProps, TabContentProps } from '@patternfly/react-core';
-import { Tabs, Tab, TabTitleText, TabContent, PageSection } from '@patternfly/react-core';
+import {
+  Tabs,
+  Tab,
+  TabTitleText,
+  TabContent,
+  PageSection,
+  Sidebar,
+  SidebarContent,
+  SidebarPanel,
+} from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
 import { useParams, useNavigate } from 'react-router';
 import {
@@ -26,7 +35,6 @@ import type {
 } from './types';
 import UserPreferenceForm from './UserPreferenceForm';
 import { getUserPreferenceGroups } from './utils/getUserPreferenceGroups';
-import './UserPreferencePage.scss';
 
 const UserPreferencePage: FC = () => {
   // resources and calls to hooks
@@ -117,7 +125,7 @@ const UserPreferencePage: FC = () => {
   };
   const activeTab = sortedUserPreferenceGroups.find((group) => group.id === activeTabId)?.label;
   return (
-    <div className="co-user-preference-page">
+    <>
       <DocumentTitle>
         {activeTab
           ? t('console-app~User Preferences {{activeTab}}', { activeTab })
@@ -131,8 +139,8 @@ const UserPreferencePage: FC = () => {
       />
       <PageSection>
         {userPreferenceItemResolved ? (
-          <div className="co-user-preference-page-content">
-            <div className="co-user-preference-page-content__tabs">
+          <Sidebar hasGutter>
+            <SidebarPanel variant="sticky">
               <Tabs
                 activeKey={activeTabId}
                 onSelect={handleTabClick}
@@ -142,17 +150,17 @@ const UserPreferencePage: FC = () => {
               >
                 {userPreferenceTabs}
               </Tabs>
-            </div>
-            <div className="co-user-preference-page-content__tab-content">
+            </SidebarPanel>
+            <SidebarContent>
               {userPreferenceTabContents}
               {spotlight && spotlightElement && <Spotlight selector={spotlight} interactive />}
-            </div>
-          </div>
+            </SidebarContent>
+          </Sidebar>
         ) : (
           <LoadingBox />
         )}
       </PageSection>
-    </div>
+    </>
   );
 };