fix: cluster-wizard UI & oidc-scopes

src/components/Clusters/components/AddClusterDialog.js

@@ -27,7 +27,7 @@ export function AddClusterDialog() {
   return (
     <Dialog
       open={showWizard}
-      className="wizard-dialog"
+      className="add-cluster-wizard-dialog"
       headerText={t('clusters.add.title')}
       onAfterClose={() => setShowWizard(false)}
     >

src/components/Clusters/components/AddClusterWizard.js

@@ -49,11 +49,13 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
   const setIsFormOpen = useSetRecoilState(isFormOpenState);
 
   useEffect(() => {
-    const contentContainer = document
-      .getElementsByTagName('ui5-wizard')[0]
-      ?.shadowRoot?.querySelectorAll('.ui5-wiz-content-item-wrapper')[
-      selected - 1
-    ];
+    const wizard = document.getElementsByTagName('ui5-wizard')[0];
+    const wizardContent = wizard?.shadowRoot?.querySelector('.ui5-wiz-content');
+
+    const contentContainer = wizardContent?.querySelectorAll(
+      '.ui5-wiz-content-item-wrapper',
+    )[selected - 1];
+
     if (contentContainer) {
       contentContainer.style['background-color'] = 'transparent';
       contentContainer.style['padding'] = '0';
@@ -166,7 +168,7 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
           firstStep={true}
           onCancel={() => setShowWizard(false)}
           validation={!kubeconfig}
-          className="cluster-wizard__buttons"
+          className="cluster-wizard__buttons__sticky"
         />
       </WizardStep>
 
@@ -197,7 +199,7 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
             setSelected={setSelected}
             onCancel={() => setShowWizard(false)}
             validation={!authValid}
-            className="cluster-wizard__buttons"
+            className="cluster-wizard__buttons__absolute"
           />
         </WizardStep>
       )}
@@ -217,14 +219,14 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
         data-step={!hasAuth || !hasOneContext ? '3' : '2'}
       >
         <div className="add-cluster__content-container">
-          <Title level="H5">
+          <Title level="H5" style={spacing.sapUiSmallMarginBottom}>
             {t('clusters.storage.choose-storage.label')}
             <>
               <Button
                 id="storageDescriptionOpener"
                 icon="hint"
                 design="Transparent"
-                style={spacing.sapUiTinyMargin}
+                style={spacing.sapUiTinyMarginBegin}
                 onClick={() => setShowTitleDescription(true)}
               />
               {createPortal(
@@ -248,7 +250,7 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
             setSelected={setSelected}
             validation={!storage}
             onCancel={() => setShowWizard(false)}
-            className="cluster-wizard__buttons"
+            className="cluster-wizard__buttons__absolute"
           />
         </div>
       </WizardStep>
@@ -269,7 +271,6 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
         <ClusterPreview
           storage={storage}
           kubeconfig={kubeconfig}
-          token={hasAuth ? hasKubeconfigAuth(kubeconfig) : null}
           setSelected={setSelected}
           hasAuth={hasAuth}
         />
@@ -284,7 +285,7 @@ export function AddClusterWizard({ kubeconfig, setKubeconfig, config }) {
             setIsFormOpen({ formOpen: false });
           }}
           validation={!storage}
-          className="cluster-wizard__buttons"
+          className="cluster-wizard__buttons__sticky"
         />
       </WizardStep>
     </Wizard>

src/components/Clusters/components/AddClusterWizard.scss

@@ -1,3 +1,7 @@
+.add-cluster-wizard-dialog::part(content) {
+  height: 90vh;
+}
+
 .add-cluster {
   &__content-container {
     background-color: var(--sapGroup_TitleBackground);
@@ -11,20 +15,17 @@
 }
 
 ui5-wizard {
-  height: 90vh;
-  min-width: 80vw;
+  height: 100%;
+  width: 75vw;
 
   .cluster-wizard {
-    &__buttons {
-      position: absolute;
+    @mixin cluster-wizard-buttons-style {
+      z-index: 100;
       bottom: 1rem;
-      left: 0;
       display: flex;
       justify-content: flex-end;
       box-sizing: border-box;
-      width: calc(100% - 20px);
-      margin: 0 10px;
-      padding: 7px;
+      padding: 0.5rem;
       border: 1px solid var(--sapGroup_TitleBorderColor);
       border-radius: var(--sapElement_BorderCornerRadius);
       background-color: var(--sapGroup_TitleBackground);
@@ -34,6 +35,23 @@ ui5-wizard {
           color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent);
     }
 
+    &__buttons {
+      &__sticky {
+        position: sticky;
+        width: calc(100% + 32px);
+        margin: 0 -16px;
+        @include cluster-wizard-buttons-style;
+      }
+
+      &__absolute {
+        position: absolute;
+        left: 0;
+        width: calc(100% - 32px);
+        margin: 0 16px;
+        @include cluster-wizard-buttons-style;
+      }
+    }
+
     &__token-info,
     &__storage-preference {
       color: var(--sapContent_LabelColor);
@@ -44,7 +62,6 @@ ui5-wizard {
       display: flex;
       flex-flow: column;
       overflow: auto;
-      height: calc(90vh - 8rem);
 
       .cluster-wizard__auth-form {
         height: unset;
@@ -53,7 +70,7 @@ ui5-wizard {
   }
 
   .resource-form {
-    padding: 1rem 0;
+    padding: 0;
 
     .form-field {
       justify-content: start;

src/components/Clusters/components/AuthForm.js

@@ -9,10 +9,7 @@ import * as Inputs from 'shared/ResourceForm/inputs';
 import { getUser, getUserIndex } from '../shared';
 
 import { spacing } from '@ui5/webcomponents-react-base';
-
-export const AUTH_FORM_TOKEN = 'Token';
-export const AUTH_FORM_OIDC = 'OIDC';
-export const DEFAULT_SCOPE_VALUE = 'openid';
+import { TextArrayInput } from 'shared/ResourceForm/fields';
 
 const OIDCform = ({ resource, setResource, ...props }) => {
   const { t } = useTranslation();
@@ -57,11 +54,11 @@ const OIDCform = ({ resource, setResource, ...props }) => {
         input={Inputs.Text}
         aria-label="client-secret"
       />
-      <ResourceForm.FormField
+      <TextArrayInput
         required
-        propertyPath="$.scope"
-        label={t('clusters.wizard.auth.scopes')}
-        input={Inputs.Text}
+        defaultOpen
+        propertyPath="$.scopes"
+        title={t('clusters.wizard.auth.scopes')}
         aria-label="scopes"
       />
     </ResourceForm.Wrapper>
@@ -147,7 +144,11 @@ export function AuthForm({
         <ResourceForm.FormField
           label={t('clusters.wizard.auth.using-oidc')}
           input={() => (
-            <Switch checked={useOidc} onChange={switchAuthVariant} />
+            <Switch
+              style={spacing.sapUiTinyMarginTop}
+              checked={useOidc}
+              onChange={switchAuthVariant}
+            />
           )}
           className="oidc-switch"
         />

src/components/Clusters/components/ChooseStorage.js

@@ -1,13 +1,17 @@
 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">
+      <p
+        className="cluster-wizard__storage-preference"
+        style={spacing.sapUiTinyMarginBottom}
+      >
         {`${t('clusters.storage.storage-preference')}:`}
       </p>
       <FlexBox direction="Column">