fix: container selector (#3597)

* fix: remove unused proprtey from KymaModulesAddModule * fix: remove unnecessary css from FormGroup * fix: @container selector for featurecard * fix: @container selector for ClusterStats * fix: @container selector for rest of the components * fix: small styling fixes * test: adjust viewport for pagination component test * test: fix flakiness for pvc test * fix: change classnames to be less generic
kyma-project · Jan 21, 2025 · 4e5014c · 4e5014c
1 parent dc3bf7c
commit 4e5014c
Show file tree

Hide file tree

Showing 22 changed files with 67 additions and 63 deletions.
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterDetails.js b/src/components/Clusters/views/ClusterOverview/ClusterDetails.js
@@ -73,7 +73,7 @@ export default function ClusterDetails({ currentCluster }) {
         }
       />
       {!error && !loadingModules && modules && (
-        <div className="item-wrapper small sap-margin-x-small">
+        <div className="item-wrapper sap-margin-x-small">
           <CountingCard
             className="item"
             value={modules?.length}

diff --git a/src/components/Clusters/views/ClusterOverview/ClusterStats.js b/src/components/Clusters/views/ClusterOverview/ClusterStats.js
@@ -115,7 +115,7 @@ export default function ClusterStats({ nodesData }) {
         {t('common.headers.monitoring-and-health')}
       </Title>
       <div className="cluster-stats sap-margin-x-tiny">
-        <div className="item-wrapper tall">
+        <div className="item-wrapper card-tall">
           <Card
             className="radial-chart-card item"
             header={
@@ -134,7 +134,7 @@ export default function ClusterStats({ nodesData }) {
             />
           </Card>
         </div>
-        <div className="item-wrapper tall">
+        <div className="item-wrapper card-tall">
           <Card
             className="radial-chart-card item"
             header={
@@ -154,7 +154,7 @@ export default function ClusterStats({ nodesData }) {
           </Card>
         </div>
         {nodesData && (
-          <div className="item-wrapper small">
+          <div className="item-wrapper card-small">
             <CountingCard
               className="item"
               value={nodesData?.length}
@@ -163,7 +163,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {podsData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={podsData?.length}
@@ -188,7 +188,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {deploymentsData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={deploymentsData?.length}
@@ -209,7 +209,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {daemonsetsData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={daemonsetsData?.length}
@@ -230,7 +230,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {statefulsetsData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={statefulsetsData?.length}
@@ -253,7 +253,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {servicesData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={servicesData?.length}
@@ -276,7 +276,7 @@ export default function ClusterStats({ nodesData }) {
           </div>
         )}
         {persistentVolumesData && (
-          <div className="item-wrapper wide">
+          <div className="item-wrapper card-wide">
             <CountingCard
               className="item"
               value={persistentVolumesData?.length}

diff --git a/src/components/Clusters/views/ClusterOverview/ClusterStats.scss b/src/components/Clusters/views/ClusterOverview/ClusterStats.scss
@@ -16,6 +16,8 @@
   --grid-row-height: calc(150px + 0.5rem);
   --grid-column-width: calc(57.5px + 0.25rem);
 
+  container-type: inline-size;
+
   margin-top: -0.5rem;
   display: grid;
   grid-auto-flow: dense;
@@ -33,41 +35,37 @@
       max-height: 100% !important;
     }
   }
+}
 
-  .tall {
-    grid-row: span 2;
-    height: calc(var(--grid-row-height) * 2);
-    grid-column: span 4;
-    width: calc(var(--grid-column-width) * 4);
-  }
+.card-tall {
+  grid-row: span 2;
+  height: calc(var(--grid-row-height) * 2);
+  grid-column: span 4;
+  width: calc(var(--grid-column-width) * 4);
+}
 
-  .wide {
-    height: var(--grid-row-height);
-    grid-column: span 6;
-    width: calc(var(--grid-column-width) * 6);
-  }
+.card-wide {
+  height: var(--grid-row-height);
+  grid-column: span 6;
+  width: calc(var(--grid-column-width) * 6);
+}
 
-  .small {
-    height: var(--grid-row-height);
-    grid-column: span 3;
-    width: calc(var(--grid-column-width) * 3);
-  }
+.card-small {
+  height: var(--grid-row-height);
+  grid-column: span 3;
+  width: calc(var(--grid-column-width) * 3);
 }
 
 @container (max-width: 375px) {
-  .cluster-stats {
-    .wide {
-      grid-column: span 5;
-      width: calc(var(--grid-column-width) * 5);
-    }
+  .card-wide {
+    grid-column: span 5;
+    width: calc(var(--grid-column-width) * 5);
   }
 }
 
 @container (max-width: 325px) {
-  .cluster-stats {
-    .wide {
-      grid-column: span 4;
-      width: calc(var(--grid-column-width) * 4);
-    }
+  .card-wide {
+    grid-column: span 4;
+    width: calc(var(--grid-column-width) * 4);
   }
 }
diff --git a/src/components/Extensibility/components-form/FormGroup.scss b/src/components/Extensibility/components-form/FormGroup.scss
@@ -2,9 +2,3 @@
   display: grid;
   column-gap: 10px;
 }
-
-@container (max-width: 800px) {
-  .form-group__grid-wrapper {
-    grid-template-columns: 1fr !important;
-  }
-}
diff --git a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.js b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.js
@@ -84,7 +84,7 @@ export function FeaturedCard({ value, structure, schema, ...props }) {
   const illustration = getIllustration(structure?.illustration, theme);
   return (
     <div className="sap-margin-small">
-      <Card>
+      <Card className="feature-card-container">
         <div
           className="feature-card"
           style={getBackgroundStyle(structure?.design)}

diff --git a/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss b/src/components/Extensibility/components/FeaturedCard/FeaturedCard.scss
@@ -4,6 +4,10 @@
   margin-right: 0.25rem !important;
 }
 
+.feature-card-container {
+  container-type: inline-size;
+}
+
 .banner-carousel {
   height: fit-content;
   width: calc(100% - 1px);

diff --git a/src/components/Extensibility/components/RadialChart.js b/src/components/Extensibility/components/RadialChart.js
@@ -32,7 +32,7 @@ export const RadialChart = ({ structure, value, originalResource }) => {
   }
 
   return (
-    <div className={'item-wrapper tall'}>
+    <div className="item-wrapper card-tall">
       <Card
         className="radial-chart-card"
         header={<CardHeader titleText={t(structure?.name)} />}

diff --git a/src/components/Extensibility/components/StatisticalCard.js b/src/components/Extensibility/components/StatisticalCard.js
@@ -42,7 +42,7 @@ export function StatisticalCard({
   }
 
   return (
-    <div className={`item-wrapper ${extraInfo ? 'wide' : 'small'}`}>
+    <div className={`item-wrapper ${extraInfo ? 'card-wide' : 'card-small'}`}>
       <CountingCard
         className="item"
         value={mainValue !== undefined ? mainValue : EMPTY_TEXT_PLACEHOLDER}

diff --git a/src/components/KymaModules/KymaModulesAddModule.js b/src/components/KymaModules/KymaModulesAddModule.js
@@ -13,7 +13,6 @@ export default function KymaModulesAddModule({
   resourceName,
   loadingKymaResources,
   kymaResourceUrl,
-  initialKymaResource,
   loading,
   selectedModules,
   initialUnchangedResource,

diff --git a/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js b/src/resources/Namespaces/NamespaceWorkloads/NamespaceWorkloads.js
@@ -92,7 +92,7 @@ export function NamespaceWorkloads({ namespace }) {
       {(podsData || deploymentsData) && (
         <>
           {podsData && (
-            <div className="item-wrapper wide">
+            <div className="item-wrapper card-wide">
               <CountingCard
                 className="item"
                 value={podsData?.length}
@@ -118,7 +118,7 @@ export function NamespaceWorkloads({ namespace }) {
             </div>
           )}
           {deploymentsData && (
-            <div className="item-wrapper wide">
+            <div className="item-wrapper card-wide">
               <CountingCard
                 className="item"
                 value={deploymentsData?.length}
@@ -140,7 +140,7 @@ export function NamespaceWorkloads({ namespace }) {
             </div>
           )}
           {daemonsetsData && (
-            <div className="item-wrapper wide">
+            <div className="item-wrapper card-wide">
               <CountingCard
                 className="item"
                 value={daemonsetsData?.length}
@@ -164,7 +164,7 @@ export function NamespaceWorkloads({ namespace }) {
             </div>
           )}
           {statefulsetsData && (
-            <div className="item-wrapper wide">
+            <div className="item-wrapper card-wide">
               <CountingCard
                 className="item"
                 value={statefulsetsData?.length}
@@ -190,7 +190,7 @@ export function NamespaceWorkloads({ namespace }) {
             </div>
           )}
           {servicesData && (
-            <div className="item-wrapper wide">
+            <div className="item-wrapper card-wide">
               <CountingCard
                 className="item"
                 value={servicesData?.length}

diff --git a/src/resources/Namespaces/ResourcesUsage.js b/src/resources/Namespaces/ResourcesUsage.js
@@ -141,7 +141,7 @@ export const ResourcesUsage = ({ namespace }) => {
   if (resourceQuotas?.length < 1) return null;
   return (
     <>
-      <div className="item-wrapper tall">
+      <div className="item-wrapper card-tall">
         <Card
           className="radial-chart-card"
           header={
@@ -156,7 +156,7 @@ export const ResourcesUsage = ({ namespace }) => {
           />
         </Card>
       </div>
-      <div className="item-wrapper tall">
+      <div className="item-wrapper card-tall">
         <Card
           className="radial-chart-card"
           header={

diff --git a/src/resources/other/kymaModules.routes.js b/src/resources/other/kymaModules.routes.js
@@ -211,7 +211,6 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
               resourceName={kymaResourceName}
               loadingKymaResources={kymaResourcesLoading}
               kymaResourceUrl={resourceUrl}
-              initialKymaResource={kymaResource}
               loading={kymaResourceLoading}
               selectedModules={selectedModules}
               initialUnchangedResource={initialUnchangedResource}

diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.js b/src/shared/components/DynamicPageComponent/DynamicPageComponent.js
@@ -323,7 +323,7 @@ export const DynamicPageComponent = ({
     return (
       <DynamicPage
         mode="IconTabBar"
-        className={`page-header ${className}`}
+        className={`page-header ${className ?? ''}`}
         headerPinned
         hidePinButton={true}
         titleArea={headerTitle}

diff --git a/src/shared/components/DynamicPageComponent/DynamicPageComponent.scss b/src/shared/components/DynamicPageComponent/DynamicPageComponent.scss
@@ -1,5 +1,6 @@
 .page-header {
   background-color: var(--sapBackgroundColor);
+  container-type: inline-size;
 
   ui5-dynamic-page-title {
     justify-content: center;

diff --git a/src/shared/components/GenericList/Pagination/Pagination.scss b/src/shared/components/GenericList/Pagination/Pagination.scss
@@ -1,4 +1,5 @@
 .pagination {
+  container-type: inline-size;
   border-top: 1px solid var(--sapList_BorderColor);
   display: flex;
   justify-content: space-between;

diff --git a/src/shared/components/GenericList/Pagination/test/Pagination.cy.js b/src/shared/components/GenericList/Pagination/test/Pagination.cy.js
@@ -44,6 +44,7 @@ describe('Pagination', () => {
   });
 
   it('Fire events', () => {
+    cy.viewport(800, 500);
     cy.mount(
       <Pagination
         itemsTotal={200}

diff --git a/src/shared/components/PodTemplate/PodTemplate.js b/src/shared/components/PodTemplate/PodTemplate.js
@@ -13,6 +13,7 @@ export function PodTemplate({ template }) {
   return (
     <div className="sap-margin-x-small sap-margin-bottom-small">
       <Card
+        className="pod-template"
         key="pod-template"
         header={<CardHeader titleText={t('pods.labels.pod-template')} />}
       >

diff --git a/src/shared/components/PodTemplate/PodTemplate.scss b/src/shared/components/PodTemplate/PodTemplate.scss
@@ -2,6 +2,10 @@
   font-family: monospace;
 }
 
+.pod-template {
+  container-type: inline-size;
+}
+
 .pod-template-row {
   display: grid;
   grid-template-columns: 1fr 5fr;

diff --git a/src/shared/components/ResourceDetails/ResourceDetails.scss b/src/shared/components/ResourceDetails/ResourceDetails.scss
@@ -24,7 +24,7 @@
   min-width: 200px;
 }
 
-@media (min-width: 650px) {
+@container (min-width: 550px) {
   .cluster-overview__details-wrapper {
     grid-template-columns: fit-content(100%) max-content;
   }
@@ -39,7 +39,7 @@
   }
 }
 
-@media (min-width: 900px) {
+@container (min-width: 900px) {
   .resource-details-container {
     grid-template-columns: fit-content(100%) max-content;
     gap: 0;

diff --git a/src/shared/components/ResourceStatusCard/ResourceStatusCard.scss b/src/shared/components/ResourceStatusCard/ResourceStatusCard.scss
@@ -14,9 +14,3 @@
     gap: 1rem;
   }
 }
-
-@container (min-width: 800px) {
-  .resource-status-card {
-    width: 420px;
-  }
-}
diff --git a/src/shared/components/UI5Panel/UI5Panel.scss b/src/shared/components/UI5Panel/UI5Panel.scss
@@ -9,6 +9,10 @@
   }
 }
 
+.toolbar {
+  container-type: inline-size;
+}
+
 .toolbar > :first-child {
   display: flex;
   align-items: end;

diff --git a/tests/integration/tests/namespace/test-persistent-volume-claims.spec.js b/tests/integration/tests/namespace/test-persistent-volume-claims.spec.js
@@ -72,6 +72,10 @@ context('Test Persistent Volume Claims', () => {
       .contains('ui5-panel', Cypress.env('STORAGE_CLASS_NAME'))
       .should('be.visible');
 
+    cy.getMidColumn()
+      .find('ui5-button[accessible-name="enter-full-screen"]')
+      .click();
+
     cy.getMidColumn()
       .contains('Events')
       .scrollIntoView()