chore: adjust spacing to classNames (#3442)

* change some spacing to new classnames * fix merge * pray to god, that everything is working * pray to god, that everything is working * some spacing and iconEnd for ExternalLink * some spacing and iconEnd for SA token * add no-margin class in index.scss * adjust the rest of the spacing * remove unused impott * fix stupid classNames * adjust separatorLine to tsx and use style prop * review changes
kyma-project · Nov 4, 2024 · cd703c0 · cd703c0
1 parent 527ab33
commit cd703c0
Show file tree

Hide file tree

Showing 99 changed files with 297 additions and 613 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "@openapi-contrib/openapi-schema-to-json-schema": "^3.1.1",
     "@peculiar/x509": "^1.6.0",
     "@sap-theming/theming-base-content": "^11.1.28",
+    "@sap-ui/common-css": "^0.38.0",
     "@sentry/react": "^6.17.4",
     "@sentry/tracing": "^6.12.0",
     "@stoplight/json-ref-resolver": "^3.1.3",

diff --git a/src/command-pallette/CommandPalletteUI/components/components.tsx b/src/command-pallette/CommandPalletteUI/components/components.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
 import { Button, Icon, Title, Token } from '@ui5/webcomponents-react';
 import { Trans, useTranslation } from 'react-i18next';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
 import { HelpEntries } from '../types';
 
-import { spacing } from '@ui5/webcomponents-react-base';
 import './components.scss';
 
 export function SuggestedQuery({
@@ -47,7 +45,7 @@ export function NamespaceContextDisplay({
     <div className="namespace-context">
       <span className="namespace-name">{t('namespaces.name_singular')}:</span>
       <Token
-        style={spacing.sapUiTinyMarginBeginEnd}
+        className="sap-margin-x-tiny"
         text={namespaceContext}
         closeIcon={
           <Icon

diff --git a/src/components/App/ContentWrapper/ContentWrapper.tsx b/src/components/App/ContentWrapper/ContentWrapper.tsx
@@ -1,4 +1,3 @@
-import { spacing } from '@ui5/webcomponents-react-base';
 import './ContentWrapper.scss';
 
 type ContentWrapperProps = {
@@ -7,7 +6,7 @@ type ContentWrapperProps = {
 
 export const ContentWrapper = ({ children }: ContentWrapperProps) => {
   return (
-    <div id="content-wrap" style={spacing.sapUiTinyMarginTop}>
+    <div id="content-wrap" className="sap-margin-top-tiny">
       <div className="content-scroll">{children}</div>
     </div>
   );

diff --git a/src/components/BusolaExtensions/BusolaExtensionDetails.js b/src/components/BusolaExtensions/BusolaExtensionDetails.js
@@ -16,7 +16,6 @@ import { ModalWithForm } from 'shared/components/ModalWithForm/ModalWithForm';
 import { ErrorBoundary } from 'shared/components/ErrorBoundary/ErrorBoundary';
 import { extensibilitySchemasState } from 'state/extensibilitySchemasAtom';
 import { useUrl } from 'hooks/useUrl';
-import { spacing } from '@ui5/webcomponents-react-base';
 
 import {
   formatCurrentVersion,
@@ -82,7 +81,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
               section: t(`extensibility.sections.${key}`),
             })}
             modalOpeningComponent={
-              <Button style={spacing.sapUiTinyMarginEnd} design="Default">
+              <Button design="Default">
                 {t('extensibility.edit-section', {
                   section: t(`extensibility.sections.${key}`),
                 })}
@@ -153,7 +152,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
           <MessageStrip
             design="Information"
             hideCloseButton
-            style={spacing.sapUiSmallMarginBottom}
+            className="sap-margin-y-small"
           >
             {t('extensibility.message.old-version')}
           </MessageStrip>
@@ -163,7 +162,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
           <MessageStrip
             design="Negative"
             hideCloseButton
-            style={spacing.sapUiSmallMarginBottom}
+            className="sap-margin-bottom-small"
           >
             {t('extensibility.message.unsupported-version')}
           </MessageStrip>
@@ -173,7 +172,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
           <MessageStrip
             design="Negative"
             hideCloseButton
-            style={spacing.sapUiSmallMarginBottom}
+            className="sap-margin-bottom-small"
           >
             <Trans i18nKey="extensibility.message.unknown-version">
               <ExternalLink url="https://github.com/kyma-project/busola/tree/main/docs/extensibility" />

diff --git a/src/components/Clusters/components/AddClusterWizard.js b/src/components/Clusters/components/AddClusterWizard.js
@@ -27,7 +27,6 @@ import { ChooseStorage } from './ChooseStorage';
 import { WizardButtons } from 'shared/components/WizardButtons/WizardButtons';
 import { ClusterPreview } from './ClusterPreview';
 
-import { spacing } from '@ui5/webcomponents-react-base';
 import './AddClusterWizard.scss';
 import { isFormOpenState } from 'state/formOpenAtom';
 
@@ -219,14 +218,14 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
         data-step={!hasAuth || !hasOneContext ? '3' : '2'}
       >
         <div className="add-cluster__content-container">
-          <Title level="H5" style={spacing.sapUiSmallMarginBottom}>
+          <Title level="H5" className="sap-margin-small">
             {t('clusters.storage.choose-storage.label')}
             <>
               <Button
                 id="storageDescriptionOpener"
                 icon="hint"
                 design="Transparent"
-                style={spacing.sapUiTinyMarginBegin}
+                className="sap-margin-begin-tiny"
                 onClick={() => setShowTitleDescription(true)}
               />
               {createPortal(

diff --git a/src/components/Clusters/components/AuthForm.js b/src/components/Clusters/components/AuthForm.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { MessageStrip, Switch, Title } from '@ui5/webcomponents-react';
 import jp from 'jsonpath';
@@ -8,7 +8,6 @@ import { ResourceForm } from 'shared/ResourceForm';
 import * as Inputs from 'shared/ResourceForm/inputs';
 import { getUser, getUserIndex } from '../shared';
 
-import { spacing } from '@ui5/webcomponents-react-base';
 import { TextArrayInput } from 'shared/ResourceForm/fields';
 
 const OIDCform = ({ resource, setResource, ...props }) => {
@@ -129,7 +128,7 @@ export function AuthForm({
         <MessageStrip
           design="Warning"
           hideCloseButton
-          style={spacing.sapUiSmallMarginTopBottom}
+          className="sap-margin-y-small"
         >
           {t('clusters.wizard.incomplete', {
             context:
@@ -145,7 +144,7 @@ export function AuthForm({
           label={t('clusters.wizard.auth.using-oidc')}
           input={() => (
             <Switch
-              style={spacing.sapUiTinyMarginTop}
+              className="sap-margin-top-tiny"
               checked={useOidc}
               onChange={switchAuthVariant}
             />

diff --git a/src/components/Clusters/components/ChooseStorage.js b/src/components/Clusters/components/ChooseStorage.js
@@ -1,17 +1,13 @@
 import { FlexBox, RadioButton } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
-import { spacing } from '@ui5/webcomponents-react-base';
 import './ChooseStorage.scss';
 
 export function ChooseStorage({ storage, setStorage }) {
   const { t } = useTranslation();
 
   return (
     <>
-      <p
-        className="cluster-wizard__storage-preference"
-        style={spacing.sapUiTinyMarginBottom}
-      >
+      <p className="cluster-wizard__storage-preference sap-margin-bottom-tiny">
         {`${t('clusters.storage.storage-preference')}:`}
       </p>
       <FlexBox direction="Column">

diff --git a/src/components/Clusters/components/ClusterPreview.js b/src/components/Clusters/components/ClusterPreview.js
@@ -1,8 +1,6 @@
-import React from 'react';
 import { Button, FlexBox, RadioButton, Title } from '@ui5/webcomponents-react';
 import { useTranslation } from 'react-i18next';
 import './ClusterPreview.scss';
-import { spacing } from '@ui5/webcomponents-react-base';
 import {
   findInitialValue,
   findInitialValues,
@@ -39,55 +37,31 @@ export function ClusterPreview({ kubeconfig, storage, setSelected, hasAuth }) {
       <>
         {issuerUrl && (
           <>
-            <p
-              className="cluster-preview__data-header"
-              style={{
-                ...spacing.sapUiSmallMarginTop,
-                ...spacing.sapUiTinyMarginBottom,
-              }}
-            >
+            <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
               {t('clusters.labels.issuer-url')}:
             </p>
             <div>{issuerUrl}</div>
           </>
         )}
         {clientId && (
           <>
-            <p
-              className="cluster-preview__data-header"
-              style={{
-                ...spacing.sapUiSmallMarginTop,
-                ...spacing.sapUiTinyMarginBottom,
-              }}
-            >
+            <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
               {t('clusters.labels.client-id')}:
             </p>
             <div>{clientId}</div>
           </>
         )}
         {clientSecret && (
           <>
-            <p
-              className="cluster-preview__data-header"
-              style={{
-                ...spacing.sapUiSmallMarginTop,
-                ...spacing.sapUiTinyMarginBottom,
-              }}
-            >
+            <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
               {t('clusters.labels.client-secret')}:
             </p>
             <div>{clientSecret}</div>
           </>
         )}
         {extraScopes && (
           <>
-            <p
-              className="cluster-preview__data-header"
-              style={{
-                ...spacing.sapUiSmallMarginTop,
-                ...spacing.sapUiTinyMarginBottom,
-              }}
-            >
+            <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
               {t('clusters.labels.scopes')}:
             </p>
             {<Tokens tokens={extraScopes} />}
@@ -101,13 +75,7 @@ export function ClusterPreview({ kubeconfig, storage, setSelected, hasAuth }) {
     const token = kubeconfig?.users?.[userIndex]?.user?.token;
     return (
       <>
-        <p
-          className="cluster-preview__data-header"
-          style={{
-            ...spacing.sapUiSmallMarginTop,
-            ...spacing.sapUiTinyMarginBottom,
-          }}
-        >
+        <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
           {`${t('clusters.token')}:`}
         </p>
         {token && <div className="cluster-preview__token">{token}</div>}
@@ -118,30 +86,17 @@ export function ClusterPreview({ kubeconfig, storage, setSelected, hasAuth }) {
   return (
     <div className="cluster-preview">
       <div className="add-cluster__content-container">
-        <Title level="H5" style={spacing.sapUiMediumMarginBottom}>
+        <Title level="H5" className="sap-margin-bottom-medium">
           {t('clusters.wizard.review')}
         </Title>
         <Title
           level="H5"
-          className="cluster-preview__subtitle"
-          style={spacing.sapUiSmallMarginTopBottom}
+          className="cluster-preview__subtitle sap-margin-y-small"
         >{`1. ${t('common.headers.configuration')}`}</Title>
-        <p
-          className="cluster-preview__data-header"
-          style={{
-            ...spacing.sapUiSmallMarginTop,
-            ...spacing.sapUiTinyMarginBottom,
-          }}
-        >
+        <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
           {t('clusters.name_singular')}:
         </p>
-        <div
-          className="cluster-preview__content"
-          style={{
-            ...spacing.sapUiMediumMarginBottom,
-            ...spacing.sapUiTinyMarginTop,
-          }}
-        >
+        <div className="cluster-preview__content sap-margin-top-small sap-margin-bottom-tiny">
           <div>{kubeconfig?.['current-context']}</div>
           <Button
             design="Transparent"
@@ -153,17 +108,10 @@ export function ClusterPreview({ kubeconfig, storage, setSelected, hasAuth }) {
         </div>
         <Title
           level="H5"
-          className="cluster-preview__subtitle"
-          style={spacing.sapUiSmallMarginTopBottom}
+          className="cluster-preview__subtitle sap-margin-y-small"
         >{`2. ${t('clusters.wizard.authentication')}`}</Title>
 
-        <div
-          className="cluster-preview__content"
-          style={{
-            ...spacing.sapUiMediumMarginBottom,
-            ...spacing.sapUiTinyMarginTop,
-          }}
-        >
+        <div className="cluster-preview__content sap-margin-top-small sap-margin-bottom-tiny">
           <div className="cluster-preview__auth">
             {authenticationType === 'token' ? <TokenData /> : <OidcData />}
           </div>
@@ -177,25 +125,12 @@ export function ClusterPreview({ kubeconfig, storage, setSelected, hasAuth }) {
         </div>
         <Title
           level="H5"
-          className="cluster-preview__subtitle"
-          style={spacing.sapUiSmallMarginTopBottom}
+          className="cluster-preview__subtitle sap-margin-y-small"
         >{`3. ${t('clusters.wizard.storage')}`}</Title>
-        <p
-          className="cluster-preview__data-header"
-          style={{
-            ...spacing.sapUiSmallMarginTop,
-            ...spacing.sapUiTinyMarginBottom,
-          }}
-        >
+        <p className="cluster-preview__data-header sap-margin-top-small sap-margin-bottom-tiny">
           {`${t('clusters.storage.storage-preference')}:`}
         </p>
-        <div
-          className="cluster-preview__content"
-          style={{
-            ...spacing.sapUiMediumMarginBottom,
-            ...spacing.sapUiTinyMarginTop,
-          }}
-        >
+        <div className="cluster-preview__content sap-margin-bottom-medium sap-margin-top-tiny">
           <FlexBox
             direction="Column"
             className="cluster-preview__storage-container"