Ui5 checkbox (#2585)

* bump deployment * replaced checkboxes with ui5 * fix tests * removed unused argument * small style adjustment * fix tests * removed unused css styling * adjusted css stylingg --------- Co-authored-by: Mateusz Wisniewski <mwisnia97@gmail.com>
kyma-project · Sep 26, 2023 · 6eedab1 · 6eedab1
1 parent deb0de1
commit 6eedab1
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 191 deletions.
diff --git a/resources/web/deployment.yaml b/resources/web/deployment.yaml
@@ -16,7 +16,7 @@ spec:
     spec:
       containers:
         - name: busola
-          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2590
+          image: europe-docker.pkg.dev/kyma-project/dev/busola-web:PR-2585
           imagePullPolicy: Always
           resources:
             requests:

diff --git a/src/components/BusolaExtensions/ColumnsInput.js b/src/components/BusolaExtensions/ColumnsInput.js
@@ -1,7 +1,6 @@
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { MessageStrip } from '@ui5/webcomponents-react';
-import { FormInput, Checkbox } from 'fundamental-react';
+import { CheckBox, MessageStrip } from '@ui5/webcomponents-react';
+import { FormInput } from 'fundamental-react';
 
 export function ColumnsInput({ value: columns, setValue: setColumns }) {
   const { t } = useTranslation();
@@ -17,7 +16,7 @@ export function ColumnsInput({ value: columns, setValue: setColumns }) {
   return columns.map(value => {
     return (
       <div key={value.path} className="columns-input">
-        <Checkbox
+        <CheckBox
           checked={value.isSelected}
           onChange={e => {
             value.isSelected = e.target.checked;

diff --git a/src/components/BusolaExtensions/ExtensibilityStarterForm.scss b/src/components/BusolaExtensions/ExtensibilityStarterForm.scss
@@ -3,8 +3,8 @@
   grid-template-columns: 1fr 8fr 8fr 3fr;
   column-gap: 20px;
 
-  .fd-checkbox__label {
-    padding: 6px;
+  ui5-checkbox {
+    margin-top: -6.75px;
   }
 }
 

diff --git a/src/components/Extensibility/components-form/Modules/Modules.js b/src/components/Extensibility/components-form/Modules/Modules.js
@@ -1,11 +1,9 @@
-import React from 'react';
 import { useUIStore } from '@ui-schema/ui-schema';
 
 import { useJsonata } from '../../hooks/useJsonata';
 import { useVariables } from '../../hooks/useVariables';
 import { fromJS } from 'immutable';
-import { Icon, Link, MessageStrip } from '@ui5/webcomponents-react';
-import { Checkbox } from 'fundamental-react';
+import { CheckBox, Icon, Link, MessageStrip } from '@ui5/webcomponents-react';
 
 import './Modules.scss';
 import { useGetTranslation } from 'components/Extensibility/helpers';
@@ -18,7 +16,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
   const { t } = useTranslation();
   const sectionName = schema.get('name');
 
-  const setCheckbox = (fullValue, key, entryValue, checked, index) => {
+  const setCheckbox = (key, entryValue, checked, index) => {
     if (checked) {
       onChange({
         storeKeys,
@@ -140,13 +138,11 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
     return (
       <>
         <div className="gridbox fd-margin-bottom--sm">
-          <div className="fd-align-vertical-center-ignor-checkbox-label">
+          <div className="fd-margin-top--sm">
             {index === 0 ? `${sectionName}:` : ''}
           </div>
-          <Checkbox
-            className="fd-align-vertical-center-ignor-checkbox-label"
-            key={name}
-            value={name}
+          <CheckBox
+            className="fd-margin-top--sm"
             checked={isChecked}
             onChange={e => {
               setCheckbox(
@@ -161,10 +157,10 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
                   : index,
               );
             }}
-          >
-            {name}
-          </Checkbox>
+            text={name}
+          />
           <Dropdown
+            className="fd-margin-top--tiny"
             label={t('extensibility.widgets.modules.module-channel-label')}
             compact
             disabled={!isChecked}
@@ -213,7 +209,7 @@ export function Modules({ storeKeys, resource, onChange, schema, required }) {
               href={link}
               target="_blank"
               rel="noopener noreferrer"
-              className="fd-align-vertical-center-ignor-checkbox-label"
+              className="fd-margin-top--md"
             >
               {t('extensibility.widgets.modules.documentation')}
               <Icon

diff --git a/src/resources/Namespaces/NamespaceCreate.js b/src/resources/Namespaces/NamespaceCreate.js
@@ -1,8 +1,9 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import * as jp from 'jsonpath';
 import { cloneDeep } from 'lodash';
-import { Checkbox, FormFieldset } from 'fundamental-react';
+import { CheckBox } from '@ui5/webcomponents-react';
+import { FormFieldset } from 'fundamental-react';
 
 import * as Inputs from 'shared/ResourceForm/inputs';
 import { ResourceForm } from 'shared/ResourceForm';
@@ -237,14 +238,12 @@ export function NamespaceCreate({
           title={t('namespaces.create-modal.apply-memory-quotas')}
           actions={() => (
             <div className="additional-resource">
-              <Checkbox
-                compact
+              <CheckBox
                 checked={withMemory}
                 onChange={() => setWithMemory(!withMemory)}
                 dir="rtl"
-              >
-                {t('namespaces.create-modal.create-resource-quota')}
-              </Checkbox>
+                text={t('namespaces.create-modal.create-resource-quota')}
+              />
               <MemoryPresets
                 presets={CONFIG.NS_MEMORY_QUOTAS_PRESET}
                 setValue={val => {
@@ -282,14 +281,12 @@ export function NamespaceCreate({
           title={t('namespaces.create-modal.apply-limits')}
           actions={() => (
             <div className="additional-resource">
-              <Checkbox
-                compact
+              <CheckBox
                 checked={withLimits}
                 onChange={() => setWithLimits(!withLimits)}
                 dir="rtl"
-              >
-                {t('namespaces.create-modal.create-limit-range')}
-              </Checkbox>
+                text={t('namespaces.create-modal.create-limit-range')}
+              />
               <LimitPresets
                 presets={CONFIG.NS_CONTAINER_LIMITS_PRESET}
                 setValue={val => {

diff --git a/src/shared/ResourceForm/inputs/Checkboxes.js b/src/shared/ResourceForm/inputs/Checkboxes.js
@@ -1,8 +1,7 @@
-import React from 'react';
-import { Checkbox, FormRadioGroup } from 'fundamental-react';
+import { FormRadioGroup } from 'fundamental-react';
 
 import { Tooltip } from 'shared/components/Tooltip/Tooltip';
-import { Icon } from '@ui5/webcomponents-react';
+import { CheckBox, Icon } from '@ui5/webcomponents-react';
 
 export function Checkboxes({
   value = [],
@@ -30,20 +29,14 @@ export function Checkboxes({
         ref={inputRef}
         style={{ opacity: 0, position: 'absolute', left: '-1000px' }}
       />
-      {options.map(({ key, text, description }, index) => (
+      {options.map(({ key, text, description }) => (
         <div key={key} className="fd-row">
-          <div>
-            <Checkbox
-              data-testid={`${dataTestID}.${key}`}
-              compact
-              key={key}
-              value={key}
-              checked={value?.includes(key)}
-              onChange={e => updateValue(key, e.target.checked)}
-            >
-              {text}
-            </Checkbox>
-          </div>
+          <CheckBox
+            data-testid={`${dataTestID}.${key}`}
+            checked={value?.includes(key)}
+            onChange={e => updateValue(key, e.target.checked)}
+            text={text}
+          />
           <div className="fd-col fd-col-md--1 tooltip-column">
             {description && (
               <Tooltip className="has-tooltip" delay={0} content={description}>

diff --git a/src/shared/components/Checkbox/Checkbox.js b/src/shared/components/Checkbox/Checkbox.js
diff --git a/src/shared/hooks/useDeleteResource.js b/src/shared/hooks/useDeleteResource.js
@@ -1,10 +1,10 @@
 import {
   Button,
+  CheckBox,
   MessageBox,
   MessageStrip,
   Text,
 } from '@ui5/webcomponents-react';
-import { Checkbox } from 'fundamental-react';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState } from 'recoil';
@@ -123,14 +123,12 @@ export function useDeleteResource({
           name: resourceTitle || resource?.metadata?.name,
         })}
       </Text>
-
-      <Checkbox
+      <CheckBox
+        className="fd-margin-top--sm"
         checked={dontConfirmDelete}
         onChange={() => setDontConfirmDelete(prevState => !prevState)}
-      >
-        {t('common.delete-dialog.delete-confirm')}
-      </Checkbox>
-
+        text={t('common.delete-dialog.delete-confirm')}
+      />
       {dontConfirmDelete && (
         <MessageStrip
           design="Information"

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -54,19 +54,10 @@ body {
   background-color: transparent;
 }
 
-.fd-checkbox:focus + .fd-checkbox__label,
 .fd-radio:focus + .fd-radio__label {
   outline: none; // disable a weird outline on clicked checkbox
 }
 
-.fd-checkbox__text {
-  margin-left: 0.1rem;
-}
-
-.fd-checkbox__label:before {
-  margin-right: 0.2rem;
-}
-
 .fd-panel,
 .fd-action-bar {
   &__actions {
@@ -152,9 +143,8 @@ li {
   display: table;
 }
 
-// override fd-styles for Safari
-input[type='checkbox'] {
-  -webkit-appearance: checkbox !important;
+ui5-checkbox {
+  -webkit-appearance: checkbox;
 }
 
 @font-face {
@@ -264,11 +254,6 @@ input[type='checkbox'] {
   align-items: center;
 }
 
-.fd-align-vertical-center-ignor-checkbox-label {
-  margin-top: auto;
-  margin-bottom: 0.3vh;
-}
-
 .fd-margin-0 {
   margin: 0;
 }

diff --git a/tests/integration/tests/cluster/test-cluster-validation.spec.js b/tests/integration/tests/cluster/test-cluster-validation.spec.js
@@ -23,12 +23,13 @@ function testAndSelectOptions(section, selection) {
   cy.get(`@${section}Header`)
     .contains('Remove all')
     .click();
+
   cy.get(`@${section}FormField`)
     .find('[type="checkbox"]')
     .should('not.be.checked');
 
   cy.get(`@${section}FormField`)
-    .contains(selection)
+    .get(`ui5-checkbox[text="${selection}"][data-testid*="${selection}"]`)
     .click();
 }