Merge branch 'main' into enhance-secrets

kyma-project · Aug 28, 2024 · 839cfad · 839cfad
2 parents 40ea560 + d1d3398
commit 839cfad
Show file tree

Hide file tree

Showing 34 changed files with 505 additions and 297 deletions.
diff --git a/.github/workflows/busola-backend-build.yml b/.github/workflows/busola-backend-build.yml
@@ -27,4 +27,4 @@ jobs:
       dockerfile: Dockerfile
       context: backend
       export-tags: true
-
+      tags: latest
diff --git a/.github/workflows/busola-local-build.yml b/.github/workflows/busola-local-build.yml
@@ -37,3 +37,4 @@ jobs:
       dockerfile: Dockerfile.local
       context: .
       export-tags: true
+      tags: latest
diff --git a/.github/workflows/busola-web-build.yml b/.github/workflows/busola-web-build.yml
@@ -33,4 +33,4 @@ jobs:
       dockerfile: Dockerfile
       context: .
       export-tags: true
-
+      tags: latest
diff --git a/docs/extensibility/60-form-widgets.md b/docs/extensibility/60-form-widgets.md
@@ -4,6 +4,7 @@ You can use form widgets in the create and/or edit pages in the user interface c
 
 - [Simple widgets](#simple-widgets) that represent a single scalar value
   - [`Text`](#text)
+  - [`Number`](#number)
   - [`Switch`](#switch)
   - [`Name`](#name)
   - [`CodeEditor`](#codeeditor)
@@ -73,6 +74,34 @@ See the following examples:
 <img src="./assets/form-widgets/Dropdown.png" alt="Example of a dropdown text widget with a tooltip" style="border: 1px solid #D2D5D9">
 <img src="./assets/form-widgets/Dropdown2.png" alt="Example of a dropdown text widget" style="border: 1px solid #D2D5D9">
 
+### `Number`
+
+The `Number` widgets render a field as a number field. They are used by default for all number and integer values.
+
+| Parameter         | Required | Type    | Description                                                                                                                                                             |
+| ----------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **description**   | No       | string  | A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD). |
+| **disableOnEdit** | No       | boolean | Disables a number field in edit mode, defaults to `false`.                                                                                                              |
+
+See the following examples:
+
+```yaml
+- path: spec.capacity
+  name: spec.capacity
+  widget: Number
+```
+
+<img src="./assets/form-widgets/Number.png" alt="Example of a number widget" style="border: 1px solid #D2D5D9">
+
+```yaml
+- path: spec.capacity
+  name: spec.capacity
+  widget: Number
+  disableOnEdit: true
+```
+
+<img src="./assets/form-widgets/Number2.png" alt="Example of a number widget" style="border: 1px solid #D2D5D9">
+
 ### `Switch`
 
 The `Switch` widgets render a switch button that is used to control boolean values.

diff --git a/docs/extensibility/assets/form-widgets/Number.png b/docs/extensibility/assets/form-widgets/Number.png
diff --git a/docs/extensibility/assets/form-widgets/Number2.png b/docs/extensibility/assets/form-widgets/Number2.png
diff --git a/public/schemas/schema-form.yaml b/public/schemas/schema-form.yaml
@@ -326,3 +326,18 @@ $widgets:
           type: boolean
           description: a boolean which specifies if field is disabled on edit.
           default: false
+  Number:
+    if:
+      properties:
+        widget:
+          const: Number
+    then:
+      properties:
+        description:
+          type: string
+          description: A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD).
+        disableOnEdit:
+          type: boolean
+          description: a boolean which specifies if field is disabled on edit.
+          default: false
+
diff --git a/src/components/Clusters/components/AddClusterDialog.js b/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)}
     >

diff --git a/src/components/Clusters/components/AddClusterWizard.js b/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>

diff --git a/src/components/Clusters/components/AddClusterWizard.scss b/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;

diff --git a/src/components/Clusters/components/AuthForm.js b/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"
         />

diff --git a/src/components/Clusters/components/ChooseStorage.js b/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">