From 413b65f72a676535e8d9bb119d4e7540d32b62bb Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>
Date: Tue, 24 Dec 2024 11:38:55 +0100
Subject: [PATCH] fix: small leftover bugs  (#3555)

* fix: small fixes

* fix: ProgressIndicator colors

* fix: sidebar z-index

* fix: acc tests

* fix: more acc
---
 .../components/FeaturedCard/FeaturedCard.scss |  1 +
 src/components/Preferences/Preferences.scss   |  1 +
 src/resources/createResourceRoutes.js         |  1 -
 .../ExpandableListItem/ExpandableListItem.tsx |  4 +--
 .../components/GenericList/SortModalPanel.js  |  4 +--
 .../components/PodTemplate/components.js      |  4 +--
 .../ProgressIndicatorWithPercentage.js        | 26 +++++++++----------
 src/sidebar/Sidebar.scss                      |  1 +
 .../accessibility/test-acc-cron-jobs.spec.js  |  4 +--
 .../accessibility/test-acc-extensions.spec.js |  1 +
 .../accessibility/test-acc-pizzas.spec.js     |  1 +
 11 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss
index 2e1e9020c2..c7605977fa 100644
--- a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss
+++ b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss
@@ -6,6 +6,7 @@
 
 .banner-carousel {
   height: fit-content;
+  width: calc(100% - 1px);
 }
 
 .feature-card {
diff --git a/src/components/Preferences/Preferences.scss b/src/components/Preferences/Preferences.scss
index d776b18cc2..e4576c3ef5 100644
--- a/src/components/Preferences/Preferences.scss
+++ b/src/components/Preferences/Preferences.scss
@@ -4,6 +4,7 @@
   width: 100%;
   height: 75vh;
   padding: 0;
+  list-style-type: none;
 
   .vertical-tabs-wrapper {
     height: 100% !important;
diff --git a/src/resources/createResourceRoutes.js b/src/resources/createResourceRoutes.js
index 9c1052751c..0e30fcc815 100644
--- a/src/resources/createResourceRoutes.js
+++ b/src/resources/createResourceRoutes.js
@@ -106,7 +106,6 @@ const ColumnWrapper = ({
   const elementCreateProps = usePrepareCreateProps({
     resourceCustomType: props.resourceCustomType,
     resourceType: props.resourceType,
-    resourceTypeForTitle: props.resourceType,
     apiGroup: props.apiGroup,
     apiVersion: props.apiVersion,
   });
diff --git a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
index 0af3a9bad2..bc05a2aef3 100644
--- a/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
+++ b/src/shared/components/ExpandableListItem/ExpandableListItem.tsx
@@ -29,9 +29,9 @@ export const ExpandableListItem = ({
   const { t } = useTranslation();
   const [expanded, setExpanded] = useState(false);
 
-  let statusType = status === 'True' ? 'Success' : 'Error';
+  let statusType = status === 'True' ? 'Positive' : 'Negative';
   if (overrideStatusType !== undefined) {
-    statusType = overrideStatusType === 'True' ? 'Success' : 'Error';
+    statusType = overrideStatusType === 'True' ? 'Positive' : 'Negative';
   }
 
   return (
diff --git a/src/shared/components/GenericList/SortModalPanel.js b/src/shared/components/GenericList/SortModalPanel.js
index db19b5e2bc..73154ee893 100644
--- a/src/shared/components/GenericList/SortModalPanel.js
+++ b/src/shared/components/GenericList/SortModalPanel.js
@@ -72,7 +72,7 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortOrderList"
       >
-        <ListItemGroup>{t('common.sorting.sort-order')}</ListItemGroup>
+        <ListItemGroup headerText={t('common.sorting.sort-order')} />
         <ListItemCustom selected={order === 'ASC'}>
           <RadioButton
             name="sortOrder"
@@ -99,7 +99,7 @@ export const SortModalPanel = ({
         }}
         accessibleName="sortByList"
       >
-        <ListItemGroup>{t('common.sorting.sort-by')}</ListItemGroup>
+        <ListItemGroup headerText={t('common.sorting.sort-by')} />
         {sortBy && (
           <>
             {Object.entries(sortBy).flatMap(([value]) => {
diff --git a/src/shared/components/PodTemplate/components.js b/src/shared/components/PodTemplate/components.js
index 33e6242cd2..0893ff06cc 100644
--- a/src/shared/components/PodTemplate/components.js
+++ b/src/shared/components/PodTemplate/components.js
@@ -51,7 +51,7 @@ function ContainerComponent({ container }) {
 
   return (
     <>
-      <ListItemGroup>{container.name}</ListItemGroup>
+      <ListItemGroup headerText={container.name} />
       <PodTemplateRow
         label={t('pods.labels.image')}
         component={
@@ -173,7 +173,7 @@ function VolumeComponent({ volume }) {
 
   return (
     <>
-      <ListItemGroup>{name}</ListItemGroup>
+      <ListItemGroup headerText={name} />
       <PodTemplateRow label="Type" component={<Text>{typeLabel}</Text>} />
       {k8sResource && (
         <PodTemplateRow
diff --git a/src/shared/components/ProgressIndicatorWithPercentage/ProgressIndicatorWithPercentage.js b/src/shared/components/ProgressIndicatorWithPercentage/ProgressIndicatorWithPercentage.js
index 2d14f7a186..61859cd6ce 100644
--- a/src/shared/components/ProgressIndicatorWithPercentage/ProgressIndicatorWithPercentage.js
+++ b/src/shared/components/ProgressIndicatorWithPercentage/ProgressIndicatorWithPercentage.js
@@ -1,6 +1,5 @@
 import { ProgressIndicator } from '@ui5/webcomponents-react';
 import PropTypes from 'prop-types';
-import React, { useRef } from 'react';
 import { Tooltip } from 'shared/components/Tooltip/Tooltip';
 import './ProgressIndicatorWithPercentage.scss';
 
@@ -19,18 +18,19 @@ export const ProgressIndicatorWithPercentage = ({
   leftTitle,
   rightTitle,
 }) => {
-  const progressRef = useRef(null);
-  const dataBar = progressRef.current?.shadowRoot?.querySelector(
-    '.ui5-progress-indicator-bar',
-  );
-  const remainingBar = progressRef.current?.shadowRoot?.querySelector(
-    '.ui5-progress-indicator-remaining-bar',
-  );
+  const applyColors = progressRef => {
+    const dataBar = progressRef?.shadowRoot?.querySelector(
+      '.ui5-progress-indicator-bar',
+    );
+    const remainingBar = progressRef?.shadowRoot?.querySelector(
+      '.ui5-progress-indicator-remaining-bar',
+    );
 
-  if (dataBar && remainingBar) {
-    dataBar.style['background-color'] = dataBarColor;
-    remainingBar.style['background-color'] = remainingBarColor;
-  }
+    if (dataBar && remainingBar) {
+      dataBar.style['background-color'] = dataBarColor;
+      remainingBar.style['background-color'] = remainingBarColor;
+    }
+  };
 
   return (
     <TooltipWrapper tooltipProps={tooltip}>
@@ -43,7 +43,7 @@ export const ProgressIndicatorWithPercentage = ({
         <ProgressIndicator
           displayValue={leftTitle}
           value={value}
-          ref={progressRef}
+          ref={progress => applyColors(progress)}
           className="progress-indicator"
           style={{ position: 'relative', zIndex: '0' }}
         />
diff --git a/src/sidebar/Sidebar.scss b/src/sidebar/Sidebar.scss
index 301be19835..abb110f9de 100644
--- a/src/sidebar/Sidebar.scss
+++ b/src/sidebar/Sidebar.scss
@@ -15,6 +15,7 @@
 
   ui5-side-navigation {
     border-radius: 0.5rem;
+    z-index: 999;
   }
   .space-top {
     height: 0.75rem;
diff --git a/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js b/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js
index ec3540e1db..f70d7fb9ff 100644
--- a/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js
+++ b/tests/integration/tests/accessibility/test-acc-cron-jobs.spec.js
@@ -118,9 +118,7 @@ context('Accessibility test Cron Jobs', () => {
       .clear()
       .type('busybox', { force: true });
 
-    cy.get('ui5-combobox[value="IfNotPresent"]')
-      .find('ui5-icon[accessible-name="Select Options"]')
-      .click();
+    cy.get('ui5-combobox[value="IfNotPresent"]').click();
 
     cy.get('ui5-li:visible')
       .contains('Always')
diff --git a/tests/integration/tests/accessibility/test-acc-extensions.spec.js b/tests/integration/tests/accessibility/test-acc-extensions.spec.js
index 072ba95934..5c1e07a162 100644
--- a/tests/integration/tests/accessibility/test-acc-extensions.spec.js
+++ b/tests/integration/tests/accessibility/test-acc-extensions.spec.js
@@ -84,6 +84,7 @@ context('Accessibility test Extensions view', () => {
 
   it('Clean up', () => {
     cy.getLeftNav()
+      .find('ui5-side-navigation-item')
       .contains('Namespaces')
       .click();
 
diff --git a/tests/integration/tests/accessibility/test-acc-pizzas.spec.js b/tests/integration/tests/accessibility/test-acc-pizzas.spec.js
index 1af5a1e1d4..9137271b87 100644
--- a/tests/integration/tests/accessibility/test-acc-pizzas.spec.js
+++ b/tests/integration/tests/accessibility/test-acc-pizzas.spec.js
@@ -58,6 +58,7 @@ context('Accessibility test Pizza Orders', () => {
     cy.loginAndSelectCluster();
 
     cy.getLeftNav()
+      .find('ui5-side-navigation-item')
       .contains('Namespaces')
       .click();