feat(ws): Notebooks 2.0 // Frontend // Workspace details // Applies MUI Theming (#185)

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

fix tab content padding

apply horizontal variant to description list, add dividers to match KF central UI

update spacer size

Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com>

update font size for description list term

Author: jenny-s51

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetails.tsx

@@ -9,6 +9,8 @@ import {
   Tab,
   TabTitleText,
   Title,
+  TabContentBody,
+  TabContent,
 } from '@patternfly/react-core';
 import { Workspace } from '~/shared/types';
 import { WorkspaceDetailsOverview } from '~/app/pages/Workspaces/Details/WorkspaceDetailsOverview';
@@ -37,7 +39,7 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
   };
 
   return (
-    <DrawerPanelContent isResizable defaultSize="50%">
+    <DrawerPanelContent>
       <DrawerHead>
         <Title headingLevel="h6">{workspace.name}</Title>
         <WorkspaceDetailsActions onEditClick={onEditClick} onDeleteClick={onDeleteClick} />
@@ -48,20 +50,30 @@ export const WorkspaceDetails: React.FunctionComponent<WorkspaceDetailsProps> =
       <DrawerPanelBody>
         <Tabs activeKey={activeTabKey} onSelect={handleTabClick}>
           <Tab eventKey={0} title={<TabTitleText>Overview</TabTitleText>} aria-label="Overview">
-            <WorkspaceDetailsOverview workspace={workspace} />
+            <TabContent id="overviewSectionBodyPadding">
+              <TabContentBody hasPadding>
+                <WorkspaceDetailsOverview workspace={workspace} />
+              </TabContentBody>
+            </TabContent>
           </Tab>
           <Tab eventKey={1} title={<TabTitleText>Activity</TabTitleText>} aria-label="Activity">
-            Activity
+            <TabContent id="activitySectionBodyPadding">
+              <TabContentBody hasPadding>Activity</TabContentBody>
+            </TabContent>
           </Tab>
           <Tab eventKey={2} title={<TabTitleText>Logs</TabTitleText>} aria-label="Logs">
-            Logs
+            <TabContent id="logsSectionBodyPadding">
+              <TabContentBody hasPadding>Logs</TabContentBody>
+            </TabContent>
           </Tab>
           <Tab
             eventKey={3}
             title={<TabTitleText>Pod template</TabTitleText>}
             aria-label="Pod template"
           >
-            Pod template
+            <TabContent id="podTemplateBodyPadding">
+              <TabContentBody hasPadding>Pod template</TabContentBody>
+            </TabContent>
           </Tab>
         </Tabs>
       </DrawerPanelBody>

workspaces/frontend/src/app/pages/Workspaces/Details/WorkspaceDetailsOverview.tsx

@@ -4,6 +4,7 @@ import {
   DescriptionListTerm,
   DescriptionListGroup,
   DescriptionListDescription,
+  Divider,
 } from '@patternfly/react-core';
 import { Workspace } from '~/shared/types';
 
@@ -14,24 +15,28 @@ type WorkspaceDetailsOverviewProps = {
 export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsOverviewProps> = ({
   workspace,
 }) => (
-  <DescriptionList>
+  <DescriptionList isHorizontal>
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>{workspace.name}</DescriptionListDescription>
     </DescriptionListGroup>
+    <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Kind</DescriptionListTerm>
       <DescriptionListDescription>{workspace.kind}</DescriptionListDescription>
     </DescriptionListGroup>
+    <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Labels</DescriptionListTerm>
       <DescriptionListDescription>
         {workspace.podTemplate.podMetadata.labels.join(', ')}
       </DescriptionListDescription>
     </DescriptionListGroup>
+    <Divider />
     <DescriptionListGroup>
       <DescriptionListTerm>Pod config</DescriptionListTerm>
       <DescriptionListDescription>{workspace.options.podConfig}</DescriptionListDescription>
     </DescriptionListGroup>
+    <Divider />
   </DescriptionList>
 );

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -375,7 +375,7 @@ export const Workspaces: React.FunctionComponent = () => {
   );
 
   return (
-    <Drawer isExpanded={selectedWorkspace != null}>
+    <Drawer isInline isExpanded={selectedWorkspace != null}>
       <DrawerContent panelContent={workspaceDetailsContent}>
         <DrawerContentBody>
           <PageSection isFilled>

workspaces/frontend/src/shared/style/MUI-theme.scss

@@ -23,6 +23,9 @@
   --mui-button--LineHeight: 1.75;
   --mui-link-underlineColor: rgba(33, 150, 243, 0.4);
 
+  // Drawer
+  --mui-drawer-BorderLeft: var(--mui-palette-grey-300);
+
   // Menu item
   --mui-menu__item--PaddingBlockStart: 6px;
   --mui-menu__item--PaddingBlockEnd: 6px;
@@ -175,10 +178,24 @@
   --pf-v6-c-button--BackgroundColor: rgba(33, 150, 243, 0.04);
 }
 
+.mui-theme .pf-v6-c-description-list {
+  --pf-v6-c-description-list--RowGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--compact);
+}
+
+.mui-theme .pf-v6-c-description-list__term {
+  font: var(--mui-font-subtitle2);
+}
+
 .mui-theme .pf-v6-c-description-list__text .pf-v6-l-split__item.pf-m-fill {
   align-content: center;
 }
 
+
+
+.mui-theme .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(--mui-drawer-BorderLeft);
+}
+
 .mui-theme .pf-v6-c-form__group {
   position: relative;
 }
@@ -669,6 +686,13 @@
   --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 }
 
+.pf-v6-c-tab-content__body.pf-m-padding {
+  --pf-v6-c-tab-content__body--PaddingInlineStart: 0px;
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0px;
+  --pf-v6-c-tab-content__body--PaddingBlockStart: var(--mui-spacing-8px);
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--mui-spacing-8px);
+}
+
 .mui-theme .pf-v6-c-tabs {
   --pf-v6-c-tabs__link--hover--BackgroundColor: var(--mui-tabs__link--hover--BackgroundColor);
   --pf-v6-c-tabs__item--PaddingBlockStart: var(--mui-tabs__item--PaddingBlockStart);
@@ -760,6 +784,7 @@
 }
 
 .mui-theme .pf-v6-c-page__main-container {
+  --pf-v6-c-page__main-container--BorderWidth: 0px;
   --pf-v6-c-page__main-container--BorderRadius: var(--mui-shape-borderRadius);
   box-shadow: var(--mui-shadows-1);
 }