chore(pf5): upgrade Dashboard view to Patternfly 5 (#1342)

Co-authored-by: Max Cao <[email protected]>
cryostatio · Sep 4, 2024 · 4ca6d0b · 4ca6d0b
1 parent 822c662
commit 4ca6d0b
Show file tree

Hide file tree

Showing 27 changed files with 547 additions and 475 deletions.
diff --git a/locales/en/common.json b/locales/en/common.json
@@ -80,7 +80,6 @@
   "TEST": "Test",
   "TIME": "Time",
   "UNKNOWN_ERROR": "Unknown error",
-  "UPLOAD": "Upload",
   "USER_SUBMITTED": "User-submitted",
   "VIEW": "View",
   "VIEW_MORE": "View more",

diff --git a/locales/en/public.json b/locales/en/public.json
@@ -54,7 +54,7 @@
       }
     },
     "USER_MENU": {
-      "LANGUAGE_PREFERENCE": "<Icon/> Language preference",
+      "LANGUAGE_PREFERENCE": "Language preference",
       "LOGOUT": "Log out"
     }
   },
@@ -77,6 +77,10 @@
       "TOOLTIP": "Report data is stale. Click the Create Recording button and choose an option to start an active Recording to source automated reports from."
     },
     "TOOLBAR": {
+      "ARIA_LABELS": {
+        "GRID_VIEW": "grid-view",
+        "LIST_VIEW": "list-view"
+      },
       "CHECKBOX": {
         "SHOW_NA": {
           "LABEL": "Show N/A scores"
@@ -88,15 +92,14 @@
       "LABEL": "Automated analysis toolbar",
       "REFRESH": {
         "LABEL": "Refresh automated analysis"
-      },
-      "SWITCH": {
-        "LIST_VIEW": {
-          "LABEL": "List view"
-        }
       }
     },
-    "WARNING_RESULTS_one": "{{count}} Warning Result",
-    "WARNING_RESULTS_other": "{{count}} Warning Results"
+    "TOOLTIP": {
+      "CLEAR_ANALYSIS": "Clear analysis",
+      "REFRESH_ANALYSIS": "Refresh analysis"
+    },
+    "WARNING_RESULTS_one": "{{count}} warning result",
+    "WARNING_RESULTS_other": "{{count}} warning results"
   },
   "AutomatedAnalysisConfigDrawer": {
     "INPUT_GROUP": {
@@ -139,6 +142,7 @@
       "POPOUT": {
         "LABEL": "Pop out {{chartKind}} chart"
       },
+      "REFRESH_TOOLTIP": "Refresh chart data",
       "SYNC": {
         "LABEL": "Synchronize {{chartKind}} chart"
       }
@@ -235,7 +239,7 @@
   },
   "Dashboard": {
     "ADD_CARD_HELPER_TEXT": "Choose a card type to add to your Dashboard. Some cards require additional configuration.",
-    "CARD_CATALOG_DESCRIPTION": "Cards added to this Dashboard Layout present information at a glance about the selected target. The layout is preserved for all targets viewed on this client.",
+    "CARD_CATALOG_DESCRIPTION": "Cards added to this Dashboard Layout present information at a glance about the selected target. The layout is preserved locally for all targets viewed only on this client.",
     "CARD_CATALOG_TITLE": "Dashboard Card catalog",
     "INVALID_CARD_CONFIGURATIONS": "Invalid card configurations",
     "PAGE_TITLE": "Dashboard"
@@ -349,10 +353,11 @@
     "ITEMS_other": "{{count}} items"
   },
   "LayoutTemplatePicker": {
+    "CARD_COUNT": "Card count",
+    "SEARCH_PLACEHOLDER": "Find by name...",
     "SORT_BY": {
       "CARD_COUNT": "Sort by: Card count",
-      "NAME": "Sort by: Name",
-      "PLACEHOLDER": "Sort by..."
+      "NAME": "Sort by: Name"
     }
   },
   "LayoutTemplateUploadModal": {

diff --git a/src/app/AppLayout/AppLayout.tsx b/src/app/AppLayout/AppLayout.tsx
@@ -82,6 +82,7 @@ import * as React from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { Link, matchPath, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import { map } from 'rxjs/operators';
+import { LogoutIcon } from './LogoutIcon';
 import { ThemeToggle } from './ThemeToggle';
 
 export interface AppLayoutProps {
@@ -283,11 +284,11 @@ export const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const userInfoItems = React.useMemo(
     () => [
       <FeatureFlag level={FeatureLevel.BETA} key={'language-preferences-feature-flag'}>
-        <DropdownItem key={'language-preferences'} onClick={handleLanguagePref}>
-          <Trans t={t} components={{ Icon: <LanguageIcon /> }} i18nKey="AppLayout.USER_MENU.LANGUAGE_PREFERENCE" />
+        <DropdownItem key={'language-preferences'} onClick={handleLanguagePref} icon={<LanguageIcon />}>
+          <Trans t={t} i18nKey="AppLayout.USER_MENU.LANGUAGE_PREFERENCE" />
         </DropdownItem>
       </FeatureFlag>,
-      <DropdownItem key={'log-out'} onClick={handleLogout}>
+      <DropdownItem key={'log-out'} onClick={handleLogout} icon={<LogoutIcon />}>
         {t('AppLayout.USER_MENU.LOGOUT')}
       </DropdownItem>,
     ],

diff --git a/src/app/AppLayout/LogoutIcon.tsx b/src/app/AppLayout/LogoutIcon.tsx
@@ -0,0 +1,31 @@
+/*
+ * Copyright The Cryostat Authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import * as React from 'react';
+
+export const LogoutIcon: React.FC<React.HTMLProps<SVGElement>> = ({ style }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="1em"
+      width="1em"
+      viewBox="0 0 512 512"
+      fill="currentColor"
+      style={{ verticalAlign: '-0.125em', ...style }}
+    >
+      <path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224 192 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128zM160 96c17.7 0 32-14.3 32-32s-14.3-32-32-32L96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l64 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-64 0c-17.7 0-32-14.3-32-32l0-256c0-17.7 14.3-32 32-32l64 0z" />
+    </svg>
+  );
+};
diff --git a/src/app/Dashboard/AddCard.tsx b/src/app/Dashboard/AddCard.tsx
@@ -21,13 +21,12 @@ import { fakeChartContext, fakeServices } from '@app/utils/fakeData';
 import { useFeatureLevel } from '@app/utils/hooks/useFeatureLevel';
 import { useSubscriptions } from '@app/utils/hooks/useSubscriptions';
 import { portalRoot } from '@app/utils/utils';
+import { CatalogTile, CatalogTileBadge } from '@patternfly/react-catalog-view-extension';
 import {
   Bullseye,
   Button,
   Card,
   CardBody,
-  CardHeader,
-  CardTitle,
   Drawer,
   DrawerActions,
   DrawerCloseButton,
@@ -48,8 +47,6 @@ import {
   GridItem,
   Label,
   LabelGroup,
-  Level,
-  LevelItem,
   Modal,
   NumberInput,
   Stack,
@@ -322,48 +319,35 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
     return availableCards.map((card) => {
       const { icon, labels, title, description } = card;
       return (
-        <Card
+        <CatalogTile
+          featured={selection === t(title)}
           id={title}
           key={title}
-          isClickable
-          isSelectable
-          isFullHeight
-          isFlat
-          isSelected={selection === t(title)}
-          tabIndex={0}
+          icon={icon}
+          title={t(title)}
+          onClick={(_event) => {
+            if (selection === t(title)) {
+              setToViewCard(availableCards.find((card) => t(card.title) === selection));
+            } else {
+              onSelect(_event, t(title));
+            }
+          }}
+          badges={
+            labels && [
+              <CatalogTileBadge>
+                <LabelGroup>
+                  {labels.map(({ content, icon, color }) => (
+                    <Label key={content} color={color} icon={icon} isCompact>
+                      {content}
+                    </Label>
+                  ))}
+                </LabelGroup>
+              </CatalogTileBadge>,
+            ]
+          }
         >
-          <CardHeader
-            selectableActions={{
-              onClickAction: (event) => {
-                if (selection === t(title)) {
-                  setToViewCard(availableCards.find((card) => t(card.title) === selection));
-                } else {
-                  onSelect(event, t(title));
-                }
-              },
-              selectableActionId: title,
-            }}
-          >
-            <Level hasGutter>
-              {icon ? <LevelItem>{icon}</LevelItem> : null}
-              <LevelItem>
-                <CardTitle>{t(title)}</CardTitle>
-              </LevelItem>
-              <LevelItem>
-                {labels ? (
-                  <LabelGroup>
-                    {labels.map(({ content, icon, color }) => (
-                      <Label key={content} color={color} icon={icon} isCompact>
-                        {content}
-                      </Label>
-                    ))}
-                  </LabelGroup>
-                ) : null}
-              </LevelItem>
-            </Level>
-          </CardHeader>
-          <CardBody>{t(description)}</CardBody>
-        </Card>
+          {t(description)}
+        </CatalogTile>
       );
     });
   }, [t, availableCards, selection, onSelect]);
@@ -392,19 +376,19 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
                 <FlexItem>
                   <Title headingLevel={'h3'}>{t(title)}</Title>
                 </FlexItem>
+                <FlexItem>
+                  {labels && labels.length ? (
+                    <LabelGroup>
+                      {labels.map(({ content, icon, color }) => (
+                        <Label key={content} color={color} icon={icon}>
+                          {content}
+                        </Label>
+                      ))}
+                    </LabelGroup>
+                  ) : null}
+                </FlexItem>
               </Flex>
             </StackItem>
-            <StackItem>
-              {labels && labels.length ? (
-                <LabelGroup>
-                  {labels.map(({ content, icon, color }) => (
-                    <Label key={content} color={color} icon={icon}>
-                      {content}
-                    </Label>
-                  ))}
-                </LabelGroup>
-              ) : null}
-            </StackItem>
             <StackItem>{getFullDescription(t(title), t)}</StackItem>
             <StackItem isFilled>
               {preview ? (
@@ -436,7 +420,7 @@ export const CardGallery: React.FC<CardGalleryProps> = ({ selection, onSelect })
     <Drawer isExpanded={!!toViewCard} isInline>
       <DrawerContent panelContent={panelContent}>
         <DrawerContentBody>
-          <Grid hasGutter style={{ alignItems: 'stretch', marginTop: '1em', marginRight: !toViewCard ? 0 : '1em' }}>
+          <Grid hasGutter className="dashboard-card-picker" style={{ marginRight: !toViewCard ? 0 : '1em' }}>
             {items.map((item) => (
               <GridItem span={4} key={item.key}>
                 {item}
@@ -544,12 +528,12 @@ const PropsConfigForm: React.FC<PropsConfigFormProps> = ({ onChange, ...props })
       }
       return (
         <FormGroup key={`${ctrl.key}`} label={t(ctrl.name)} isInline isStack>
+          {input}
           <FormHelperText>
             <HelperText>
               <HelperTextItem>{t(ctrl.description)}</HelperTextItem>
             </HelperText>
           </FormHelperText>
-          {input}
         </FormGroup>
       );
     },
@@ -639,7 +623,10 @@ const SelectControl: React.FC<SelectControlProps> = ({ handleChange, control, se
         enableFlip: true,
         appendTo: portalRoot,
       }}
-      shouldFocusToggleOnSelect
+      isScrollable
+      maxMenuHeight={'30vh'}
+      onOpenChange={setSelectOpen}
+      onOpenChangeKeys={['Escape']}
     >
       <SelectList>
         {errored