add PF recommended inline styling fixes, link tech debt issue

jenny-s51 · Dec 6, 2023 · 8a76783 · 8a76783
1 parent 95ba6be
commit 8a76783
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 43 deletions.
diff --git a/frontend/src/pages/modelServing/screens/metrics/MetricsPageToolbar.tsx b/frontend/src/pages/modelServing/screens/metrics/MetricsPageToolbar.tsx
@@ -33,50 +33,52 @@ const MetricsPageToolbar: React.FC<MetricsPageToolbarProps> = ({ leftToolbarItem
         {leftToolbarItem}
         <ToolbarGroup align={{ default: 'alignRight' }}>
           <ToolbarGroup>
-            <Stack hasGutter style={{ gap: 'var(--pf-v5-global--spacer--sm)' }}>
+            <Stack>
+              {/* Will be fixed by https://github.com/opendatahub-io/odh-dashboard/issues/2277 */}
+              <StackItem style={{ fontWeight: 'bold' }}>Time range</StackItem>
               <StackItem>
-                <ToolbarItem variant="label">Time range</ToolbarItem>
-              </StackItem>
-              <StackItem>
-                <Select
-                  isOpen={timeframeOpen}
-                  onToggle={(e, expanded) => setTimeframeOpen(expanded)}
-                  onSelect={(e, selection) => {
-                    if (isTimeframeTitle(selection)) {
-                      setCurrentTimeframe(selection);
-                      setTimeframeOpen(false);
-                    }
-                  }}
-                  selections={currentTimeframe}
-                >
-                  {Object.values(TimeframeTitle).map((value) => (
-                    <SelectOption key={value} value={value} />
-                  ))}
-                </Select>
+                <ToolbarItem>
+                  <Select
+                    isOpen={timeframeOpen}
+                    onToggle={(e, expanded) => setTimeframeOpen(expanded)}
+                    onSelect={(e, selection) => {
+                      if (isTimeframeTitle(selection)) {
+                        setCurrentTimeframe(selection);
+                        setTimeframeOpen(false);
+                      }
+                    }}
+                    selections={currentTimeframe}
+                  >
+                    {Object.values(TimeframeTitle).map((value) => (
+                      <SelectOption key={value} value={value} />
+                    ))}
+                  </Select>
+                </ToolbarItem>
               </StackItem>
             </Stack>
           </ToolbarGroup>
           <ToolbarGroup>
-            <Stack hasGutter style={{ gap: 'var(--pf-v5-global--spacer--sm)' }}>
-              <StackItem>
-                <ToolbarItem variant="label">Refresh interval</ToolbarItem>
-              </StackItem>
+            <Stack>
+              {/* Will be fixed by https://github.com/opendatahub-io/odh-dashboard/issues/2277 */}
+              <StackItem style={{ fontWeight: 'bold ' }}>Refresh interval</StackItem>
               <StackItem>
-                <Select
-                  isOpen={intervalOpen}
-                  onToggle={(e, expanded) => setIntervalOpen(expanded)}
-                  onSelect={(e, selection) => {
-                    if (isRefreshIntervalTitle(selection)) {
-                      setCurrentRefreshInterval(selection);
-                      setIntervalOpen(false);
-                    }
-                  }}
-                  selections={currentRefreshInterval}
-                >
-                  {Object.values(RefreshIntervalTitle).map((value) => (
-                    <SelectOption key={value} value={value} />
-                  ))}
-                </Select>
+                <ToolbarItem>
+                  <Select
+                    isOpen={intervalOpen}
+                    onToggle={(e, expanded) => setIntervalOpen(expanded)}
+                    onSelect={(e, selection) => {
+                      if (isRefreshIntervalTitle(selection)) {
+                        setCurrentRefreshInterval(selection);
+                        setIntervalOpen(false);
+                      }
+                    }}
+                    selections={currentRefreshInterval}
+                  >
+                    {Object.values(RefreshIntervalTitle).map((value) => (
+                      <SelectOption key={value} value={value} />
+                    ))}
+                  </Select>
+                </ToolbarItem>
               </StackItem>
             </Stack>
           </ToolbarGroup>

diff --git a/frontend/src/pages/modelServing/screens/metrics/bias/BiasTab.tsx b/frontend/src/pages/modelServing/screens/metrics/bias/BiasTab.tsx
@@ -93,10 +93,9 @@ const BiasTab: React.FC = () => {
           <MetricsPageToolbar
             leftToolbarItem={
               <ToolbarGroup>
-                <Stack hasGutter style={{ gap: 'var(--pf-v5-global--spacer--sm)' }}>
-                  <StackItem>
-                    <ToolbarItem variant="label">Metrics to display</ToolbarItem>
-                  </StackItem>
+                <Stack>
+                  {/* Will be fixed by https://github.com/opendatahub-io/odh-dashboard/issues/2277 */}
+                  <StackItem style={{ fontWeight: 'bold' }}>Metrics to display</StackItem>
                   <StackItem>
                     <ToolbarItem>
                       <BiasMetricConfigSelector
@@ -111,7 +110,7 @@ const BiasTab: React.FC = () => {
           />
         </StackItem>
         <PageSection isFilled>
-          <Stack hasGutter style={{ gap: 'var(--pf-v5-global--spacer--sm)' }}>
+          <Stack hasGutter>
             {(biasMetricConfigs.length === 0 && (
               <StackItem>
                 <EmptyBiasConfigurationCard />