fix(ui): match card styles with PF5

Signed-off-by: Yi Cai <yicai@redhat.com> added card styles to match pf5 Signed-off-by: Yi Cai <yicai@redhat.com> E2E: upload Playwright report and add view report link to PR (janus-idp#1068) * chore(ci): upload Playwright report and add view report link to PR * Update functions.sh chore(ci): fix link to Playwright report in GitHub comment chore(deps): bump jose (janus-idp#1058) Bumps [jose](https://github.com/panva/jose) from 4.15.4 to 4.15.5. - [Release notes](https://github.com/panva/jose/releases) - [Changelog](https://github.com/panva/jose/blob/v4.15.5/CHANGELOG.md) - [Commits](panva/jose@v4.15.4...v4.15.5) --- updated-dependencies: - dependency-name: jose dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> chore(deps): bump jose from 4.15.4 to 4.15.5 (janus-idp#1059) Bumps [jose](https://github.com/panva/jose) from 4.15.4 to 4.15.5. - [Release notes](https://github.com/panva/jose/releases) - [Changelog](https://github.com/panva/jose/blob/v4.15.5/CHANGELOG.md) - [Commits](panva/jose@v4.15.4...v4.15.5) --- updated-dependencies: - dependency-name: jose dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Support `resolvePackagePath` for dynamic backend plugins. (janus-idp#1071) Signed-off-by: David Festal <dfestal@redhat.com> Fix topology height Signed-off-by: Yi Cai <yicai@redhat.com>
ciiay · Mar 22, 2024 · 7723399 · 7723399
1 parent 852a05e
commit 7723399
Show file tree

Hide file tree

Showing 8 changed files with 359 additions and 33 deletions.
diff --git a/.ibm/pipelines/functions.sh b/.ibm/pipelines/functions.sh
@@ -11,11 +11,23 @@ save_logs() {
     RESULT="$3"
 
     ansi2html <"/tmp/${LOGFILE}" >"/tmp/${LOGFILE}.html"
-
+    # Create a tarball of the playwright-report directory
+    tar -czvf /tmp/${LOGFILE}-report.tar.gz playwright-report/
+
     CRN=$(ibmcloud resource service-instance ${IBM_COS} --output json | jq -r .[0].guid)
     ibmcloud cos config crn --crn "${CRN}"
     ibmcloud cos upload --bucket "${IBM_BUCKET}" --key "${LOGFILE}.html" --file "/tmp/${LOGFILE}.html" --content-type "text/html; charset=UTF-8"
-
+    ibmcloud cos upload --bucket "${IBM_BUCKET}" --key "${LOGFILE}-report.tar.gz" --file "/tmp/${LOGFILE}-report.tar.gz" --content-type "application/gzip"
+
+    # Loop through each file in the e2e-tests/playwright-report directory
+    find playwright-report -type f | while read FILE; do
+      # Extract the file path relative to the directory to maintain the structure in COS
+      RELATIVE_PATH=${FILE#$DIRECTORY_TO_UPLOAD}
+      # Upload the file
+      ibmcloud cos upload --bucket "${IBM_BUCKET}" --key "${LOGFILE}-report/${RELATIVE_PATH}" --file "${FILE}"
+    done
+
+
     BASE_URL="https://s3.${IBM_REGION}.cloud-object-storage.appdomain.cloud/${IBM_BUCKET}"
     if [[ $RESULT == "0" ]]; then
         STATUS="successfully"
@@ -26,6 +38,8 @@ save_logs() {
     cat <<EOF | pr-commenter -key-from-env-var ROBOT_KEY -application-id=${GITHUB_APP_PR_COMMENTER_ID} -pr-comment=${GIT_PR_NUMBER} -repository=${GITHUB_REPOSITORY_NAME} -org=${GITHUB_ORG_NAME}
 ${NAME} on commit ${GIT_COMMIT} finished **${STATUS}**.
 View [test log](${BASE_URL}/${LOGFILE}.html)
+View [Playwright report](${BASE_URL}/${LOGFILE}-report/playwright-report/index.html)
+Download [Playwright report](${BASE_URL}/${LOGFILE}-report.tar.gz)
 EOF
 }
 

diff --git a/dynamic-plugins/wrappers/backstage-plugin-kubernetes-backend-dynamic/dist-dynamic/yarn.lock b/dynamic-plugins/wrappers/backstage-plugin-kubernetes-backend-dynamic/dist-dynamic/yarn.lock
@@ -513,6 +513,7 @@
     tslib "^2.5.0"
 
 "@aws-sdk/util-utf8-browser@^3.0.0", "@aws-sdk/util-utf8-browser@npm:@smithy/util-utf8@~2", "@smithy/util-utf8@^2.0.0", "@smithy/util-utf8@^2.1.1":
+  name "@aws-sdk/util-utf8-browser"
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/@smithy/util-utf8/-/util-utf8-2.1.1.tgz#690018dd28f47f014114497735e51417ea5900a6"
   integrity sha512-BqTpzYEcUMDwAKr7/mVRUtHDhs6ZoXDi9NypMvMfOr/+u1NW7JgqodPDECiiLboEm6bobcPcECxzjtQh865e9A==
@@ -2323,9 +2324,9 @@ isstream@~0.1.2:
   integrity sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==
 
 jose@^4.15.4:
-  version "4.15.4"
-  resolved "https://registry.yarnpkg.com/jose/-/jose-4.15.4.tgz#02a9a763803e3872cf55f29ecef0dfdcc218cc03"
-  integrity sha512-W+oqK4H+r5sITxfxpSU+MMdr/YSWGvgZMQDIsNoBDGGy4i7GBPTtvFKibQzW06n3U3TqHjhvBJsirShsEJ6eeQ==
+  version "4.15.5"
+  resolved "https://registry.yarnpkg.com/jose/-/jose-4.15.5.tgz#6475d0f467ecd3c630a1b5dadd2735a7288df706"
+  integrity sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg==
 
 js-yaml@^4.1.0:
   version "4.1.0"

diff --git a/packages/app/src/themes/componentOverrides.ts b/packages/app/src/themes/componentOverrides.ts
@@ -61,6 +61,126 @@ export const components = (
         },
       },
     },
+    BackstageSidebar: {
+      styleOverrides: {
+        drawer: {
+          backgroundColor: themePalette.general.sideBarBackgroundColor,
+        },
+      },
+    },
+    BackstageContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: themePalette.general.mainSectionBackgroundColor,
+          '& div:first-child': {
+            '& > div[class*="-searchBar"]': {
+              backgroundColor: themePalette.general.formControlBackgroundColor,
+              boxShadow: `0px 2px 1px -1px ${themePalette.general.disabled}`,
+            },
+          },
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+          backgroundColor: themePalette.general.cardBackgroundColor,
+          // hide the first child element which is a divider with MuiDivider-root classname in MuiPaper
+          '& > hr:first-child[class|="MuiDivider-root"]': {
+            height: 0,
+          },
+        },
+        elevation1: {
+          boxShadow: 'none',
+          borderRadius: '0',
+          outline: `1px solid ${themePalette.general.cardBorderColor}`,
+          '& > hr[class|="MuiDivider-root"]': {
+            backgroundColor: themePalette.general.cardBorderColor,
+          },
+        },
+      },
+    },
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          boxShadow: 'none',
+        },
+        rounded: {
+          '&:first-child': {
+            borderTopLeftRadius: '0',
+            borderTopRightRadius: '0',
+          },
+          '&:last-child': {
+            borderBottomLeftRadius: '0',
+            borderBottomRightRadius: '0',
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          backgroundColor: themePalette.general.cardBackgroundColor,
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          height: '100%',
+          backgroundColor: themePalette.general.cardBackgroundColor,
+          '& > div > div > h2[class*="makeStyles-label"]': {
+            textTransform: 'unset',
+            color: themePalette.general.cardSubtitleColor,
+            opacity: '40%',
+          },
+          '& > div > div > p[class*="makeStyles-value"]': {
+            fontWeight: 'normal',
+          },
+          '& > div > div > div[class*="MuiChip-sizeSmall"]': {
+            backgroundColor: 'transparent',
+            borderRadius: '8px',
+            outline: `1px solid ${themePalette.general.disabled}`,
+          },
+          '& > div[class*="Mui-expanded"]': {
+            margin: 'auto',
+          },
+          '& > div[class*="MuiAccordion-root"]:before': {
+            height: 0,
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        input: {
+          '&:autofill': {
+            boxShadow: `0 0 0 100px ${themePalette.general.formControlBackgroundColor} inset`,
+            borderRadius: 'unset',
+          },
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        input: {
+          '&::placeholder': {
+            color: themePalette.general.disabled,
+            opacity: 1,
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          '&:disabled': {
+            color: themePalette.general.disabled,
+          },
+        },
+      },
+    },
     MuiButton: {
       defaultProps: {
         disableRipple: true,
@@ -89,14 +209,14 @@ export const components = (
             color: themePalette.primary.contrastText,
           },
           '&:focus-visible': {
-            boxShadow: `inset 0 0 0 1px ${themePalette.primary.focusVisibleBorder}`,
-            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+            boxShadow: `inset 0 0 0 1px ${themePalette.general.focusVisibleBorder}`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
             backgroundColor: themePalette.primary.dark,
             color: themePalette.primary.contrastText,
           },
           '&:disabled': {
-            color: themePalette.primary.disabled,
-            backgroundColor: themePalette.primary.disabledBackground,
+            color: themePalette.general.disabled,
+            backgroundColor: themePalette.general.disabledBackground,
           },
         },
         containedSecondary: {
@@ -107,14 +227,14 @@ export const components = (
             color: themePalette.secondary.contrastText,
           },
           '&:focus-visible': {
-            boxShadow: `inset 0 0 0 1px ${themePalette.secondary.focusVisibleBorder}`,
-            outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`,
+            boxShadow: `inset 0 0 0 1px ${themePalette.general.focusVisibleBorder}`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
             backgroundColor: themePalette.secondary.dark,
             color: themePalette.secondary.contrastText,
           },
           '&:disabled': {
-            color: themePalette.secondary.disabled,
-            backgroundColor: themePalette.secondary.disabledBackground,
+            color: themePalette.general.disabled,
+            backgroundColor: themePalette.general.disabledBackground,
           },
         },
         outlined: {
@@ -127,7 +247,7 @@ export const components = (
           },
           '&:focus-visible': {
             boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
-            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
           },
         },
         outlinedPrimary: {
@@ -141,7 +261,7 @@ export const components = (
           },
           '&:focus-visible': {
             boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
-            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
           },
         },
         outlinedSecondary: {
@@ -155,7 +275,7 @@ export const components = (
           },
           '&:focus-visible': {
             boxShadow: `inset 0 0 0 2px ${themePalette.secondary.main}`,
-            outline: `${themePalette.secondary.focusVisibleBorder} solid 1px`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
           },
         },
         text: {
@@ -166,7 +286,7 @@ export const components = (
           },
           '&:focus-visible': {
             boxShadow: `inset 0 0 0 2px ${themePalette.primary.main}`,
-            outline: `${themePalette.primary.focusVisibleBorder} solid 1px`,
+            outline: `${themePalette.general.focusVisibleBorder} solid 1px`,
           },
         },
         textPrimary: {
@@ -197,5 +317,28 @@ export const components = (
     MuiCssBaseline: {
       styleOverrides: redhatFont,
     },
+    MuiCardHeader: {
+      styleOverrides: {
+        content: {
+          '& > span > nav span': {
+            textTransform: 'unset',
+            letterSpacing: 'normal',
+            fountweight: 'normal',
+          },
+        },
+        title: {
+          fontSize: '1.125rem',
+        },
+        action: {
+          '& > a > span > svg': {
+            fontSize: '1.125rem',
+          },
+          '& > a[class*="MuiIconButton-root"]:hover': {
+            color: themePalette.primary.textHover,
+            backgroundColor: 'transparent',
+          },
+        },
+      },
+    },
   };
 };
diff --git a/packages/app/src/themes/defaultThemePalette.ts b/packages/app/src/themes/defaultThemePalette.ts
@@ -1,48 +1,58 @@
 export const defaultThemePalette = (mode: string) => {
   if (mode === 'dark') {
     return {
+      general: {
+        disabledBackground: '#444548',
+        disabled: '#AAABAC',
+        formControlBackgroundColor: '#36373A',
+        mainSectionBackgroundColor: '#0f1214',
+        cardBackgroundColor: '#212427',
+        focusVisibleBorder: '#ADD6FF',
+        sideBarBackgroundColor: '#1b1d21',
+        cardSubtitleColor: '#FFF',
+        cardBorderColor: '#444548',
+      },
       primary: {
         main: '#1FA7F8', // text button color, button background color
         containedButtonBackground: '#0066CC', // contained button background color
         textHover: '#73BCF7', // text button hover color
         contrastText: '#FFF', // contained button text color
         dark: '#004080', // contained button hover background color
-        disabledBackground: '#444548', // contained button disabled background color
-        disabled: '#AAABAC', // contained button disabled text color
-        focusVisibleBorder: '#ADD6FF', // contained button focus color
       },
       secondary: {
         main: '#B2A3FF',
         containedButtonBackground: '#8476D1',
         textHover: '#CBC1FF',
         contrastText: '#FFF',
         dark: '#6753AC',
-        disabledBackground: '#444548',
-        disabled: '#AAABAC',
-        focusVisibleBorder: '#ADD6FF',
       },
     };
   }
   return {
+    general: {
+      disabledBackground: '#D2D2D2',
+      disabled: '#6A6E73',
+      focusVisibleBorder: '#0066CC',
+      formControlBackgroundColor: '#FFF',
+      mainSectionBackgroundColor: '#f0f0f0',
+      cardBackgroundColor: '#FFF',
+      sideBarBackgroundColor: '#212427',
+      cardSubtitleColor: '#000',
+      cardBorderColor: '#EBEBEB',
+    },
     primary: {
       main: '#0066CC',
       containedButtonBackground: '#0066CC',
       mainHover: '#004080',
       contrastText: '#FFF',
       dark: '#004080',
-      disabledBackground: '#D2D2D2',
-      disabled: '#6A6E73',
-      focusVisibleBorder: '#0066CC',
     },
     secondary: {
       main: '#8476D1',
       containedButtonBackground: '#8476D1',
       mainHover: '#6753AC',
       contrastText: '#FFF',
       dark: '#6753AC',
-      disabledBackground: '#D2D2D2',
-      disabled: '#6A6E73',
-      focusVisibleBorder: '#0066CC',
     },
   };
 };
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -16,6 +16,7 @@ import { metricsHandler } from './metrics';
 import { statusCheckHandler } from '@backstage/backend-common';
 import { RequestHandler } from 'express';
 import * as path from 'path';
+import { CommonJSModuleLoader } from './loader';
 
 const backend = createBackend();
 
@@ -43,7 +44,12 @@ backend.add(
   }),
 );
 backend.add(dynamicPluginsFeatureDiscoveryServiceFactory()); // overridden version of the FeatureDiscoveryService which provides features loaded by dynamic plugins
-backend.add(dynamicPluginsServiceFactory());
+backend.add(
+  dynamicPluginsServiceFactory({
+    moduleLoader: logger => new CommonJSModuleLoader(logger),
+  }),
+);
+
 backend.add(
   dynamicPluginsSchemasServiceFactory({
     schemaLocator(pluginPackage) {