Upgrade PF and get rid of custom CSS on settings page

frontend/package.json

@@ -40,15 +40,15 @@
   "dependencies": {
     "@openshift/dynamic-plugin-sdk": "^1.0.0-alpha12",
     "@openshift/dynamic-plugin-sdk-utils": "^1.0.0-alpha17",
-    "@patternfly/patternfly": "4.222.4",
+    "@patternfly/patternfly": "4.224.2",
     "@patternfly/quickstarts": "^2.3.1",
-    "@patternfly/react-catalog-view-extension": "4.93.15",
-    "@patternfly/react-charts": "^6.94.15",
-    "@patternfly/react-core": "4.267.6",
-    "@patternfly/react-icons": "4.93.3",
-    "@patternfly/react-styles": "4.92.3",
-    "@patternfly/react-table": "4.112.6",
-    "@patternfly/react-virtualized-extension": "4.88.82",
+    "@patternfly/react-catalog-view-extension": "4.95.1",
+    "@patternfly/react-charts": "6.94.18",
+    "@patternfly/react-core": "4.276.6",
+    "@patternfly/react-icons": "4.93.6",
+    "@patternfly/react-styles": "4.92.6",
+    "@patternfly/react-table": "4.112.39",
+    "@patternfly/react-virtualized-extension": "4.88.113",
     "@types/classnames": "^2.3.1",
     "axios": "^0.21.1",
     "classnames": "^2.2.6",

frontend/src/components/SettingSection.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Card, CardBody, CardFooter, CardTitle, Stack, StackItem } from '@patternfly/react-core';
+
+type SettingSectionProps = {
+  children: React.ReactNode;
+  title: string;
+  description?: string;
+  footer?: React.ReactNode;
+};
+
+const SettingSection: React.FC<SettingSectionProps> = ({
+  title,
+  children,
+  footer,
+  description,
+}) => (
+  <Card isFlat>
+    <CardTitle>{title}</CardTitle>
+    <CardBody>
+      <Stack hasGutter>
+        {description && <StackItem>{description}</StackItem>}
+        <StackItem>{children}</StackItem>
+      </Stack>
+    </CardBody>
+    {footer && <CardFooter>{footer}</CardFooter>}
+  </Card>
+);
+
+export default SettingSection;

frontend/src/pages/BYONImages/BYONImages.tsx

@@ -64,18 +64,14 @@ const BYONImages: React.FC = () => {
       errorMessage="Unable to load notebook images."
       emptyStatePage={noImagesPageSection}
     >
-      {!isEmpty ? (
-        <div className="odh-cluster-settings">
-          <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
-            <Flex direction={{ default: 'column' }}>
-              <FlexItem>
-                {' '}
-                <BYONImagesTable images={images} forceUpdate={forceUpdate} />
-              </FlexItem>
-            </Flex>
-          </PageSection>
-        </div>
-      ) : null}
+      <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
+        <Flex direction={{ default: 'column' }}>
+          <FlexItem>
+            {' '}
+            <BYONImagesTable images={images} forceUpdate={forceUpdate} />
+          </FlexItem>
+        </Flex>
+      </PageSection>
     </ApplicationsPage>
   );
 };

frontend/src/pages/BYONImages/BYONImagesTable.tsx

@@ -207,7 +207,7 @@ export const BYONImagesTable: React.FC<BYONImagesTableProps> = ({ images, forceU
           className="filter-search"
           aria-label="search input for image images table"
           value={tableFilter.filter}
-          onChange={(value) => {
+          onChange={(_, value) => {
             const newCount = getFilterCount(value, tableFilter.option);
             setTableFilter({
               filter: value,
@@ -310,7 +310,7 @@ export const BYONImagesTable: React.FC<BYONImagesTableProps> = ({ images, forceU
               packages.push(<p>{`${nbpackage.name} ${nbpackage.version}`}</p>);
             });
             return (
-              <Tbody key={image.name} isExpanded={isBYONImageExpanded(image)}>
+              <Tbody key={image.id} isExpanded={isBYONImageExpanded(image)}>
                 <Tr isHidden={applyTableFilter(image)}>
                   <Td
                     expand={{