fix: small leftover bugs (#3555)

* fix: small fixes * fix: ProgressIndicator colors * fix: sidebar z-index * fix: acc tests * fix: more acc
kyma-project · Dec 24, 2024 · 413b65f · 413b65f
1 parent cedc25c
commit 413b65f
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -58,6 +58,7 @@ context('Accessibility test Pizza Orders', () => {
     cy.loginAndSelectCluster();
 
     cy.getLeftNav()
+      .find('ui5-side-navigation-item')
       .contains('Namespaces')
       .click();