refactor(cc-env-var-create)!: change property mode to validationMode

CleverCloud · Feb 15, 2024 · 264208b · 264208b
1 parent c8243a4
commit 264208b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/components/cc-env-var-create/cc-env-var-create.js b/src/components/cc-env-var-create/cc-env-var-create.js
@@ -9,6 +9,7 @@ import { linkStyles } from '../../templates/cc-link/cc-link.js';
 
 /**
  * @typedef {import('../common.types.js').Variable} Variable
+ * @typedef {import('../common.types.js').EnvVarValidationMode} EnvVarValidationMode
  */
 
 /**
@@ -28,7 +29,7 @@ export class CcEnvVarCreate extends LitElement {
   static get properties () {
     return {
       disabled: { type: Boolean },
-      mode: { type: String },
+      validationMode: { type: String, attribute: 'validation-mode' },
       variablesNames: { type: Array, attribute: 'variables-names' },
       _variableName: { type: String, state: true },
       _variableValue: { type: String, state: true },
@@ -41,8 +42,8 @@ export class CcEnvVarCreate extends LitElement {
     /** @type {boolean} Sets `disabled` attribute on inputs and button. */
     this.disabled = false;
 
-    /** @type {string} Sets the mode of the variables name validation. */
-    this.mode = '';
+    /** @type {EnvVarValidationMode} Sets the mode of the variables name validation. */
+    this.validationMode = 'simple';
 
     /** @type {string[]} Sets list of existing variables names (so we can display an error if it already exists). */
     this.variablesNames = [];
@@ -74,7 +75,7 @@ export class CcEnvVarCreate extends LitElement {
       value: this._variableValue,
     });
     this.reset();
-    // Put focus back on name input so we can add something else directly
+    // Put focus back on name input, so we can add something else directly
     this.shadowRoot.querySelector('cc-input-text.name').focus();
   }
 
@@ -90,7 +91,7 @@ export class CcEnvVarCreate extends LitElement {
     const isNameInvalidSimple = !validateName(this._variableName, 'simple');
     const isNameInvalidStrict = !validateName(this._variableName, 'strict');
     const isNameAlreadyDefined = this.variablesNames.includes(this._variableName);
-    const hasErrors = (this.mode === 'strict')
+    const hasErrors = (this.validationMode === 'strict')
       ? isNameInvalidStrict || isNameAlreadyDefined
       : isNameInvalidSimple || isNameAlreadyDefined;
 
@@ -128,21 +129,21 @@ export class CcEnvVarCreate extends LitElement {
         </div>
       </div>
       
-      ${(isNameInvalidStrict && this.mode === 'strict' && this._variableName !== '') ? html`
+      ${(isNameInvalidStrict && this.validationMode === 'strict' && this._variableName !== '') ? html`
         <cc-notice intent="warning">
           <div slot="message">
             ${i18n(`cc-env-var-create.errors.invalid-name`, { name: this._variableName })}
           </div>
         </cc-notice>
       ` : ''}
-      ${(isNameInvalidStrict && isNameInvalidSimple && this.mode !== 'strict' && this._variableName !== '') ? html`
+      ${(isNameInvalidStrict && isNameInvalidSimple && this.validationMode !== 'strict' && this._variableName !== '') ? html`
         <cc-notice intent="warning">
           <div slot="message">
             ${i18n(`cc-env-var-create.errors.invalid-name`, { name: this._variableName })}
           </div>
         </cc-notice>
       ` : ''}
-      ${(isNameInvalidStrict && !isNameInvalidSimple && this.mode !== 'strict' && this._variableName !== '') ? html`
+      ${(isNameInvalidStrict && !isNameInvalidSimple && this.validationMode !== 'strict' && this._variableName !== '') ? html`
         <cc-notice intent="info">
           <div slot="message">
             ${i18n(`cc-env-var-create.info.java-prop`, { name: this._variableName })}

diff --git a/src/components/cc-env-var-create/cc-env-var-create.stories.js b/src/components/cc-env-var-create/cc-env-var-create.stories.js
@@ -21,7 +21,7 @@ export const validationWithExistingNames = makeStory(conf, {
 });
 
 export const validationWithStrictMode = makeStory(conf, {
-  items: [{ mode: 'strict' }],
+  items: [{ validationMode: 'strict' }],
 });
 
 export const disabled = makeStory(conf, {

diff --git a/src/components/cc-env-var-editor-simple/cc-env-var-editor-simple.js b/src/components/cc-env-var-editor-simple/cc-env-var-editor-simple.js
@@ -99,7 +99,7 @@ export class CcEnvVarEditorSimple extends LitElement {
       ${!this.readonly ? html`
         <cc-env-var-create
           ?disabled=${skeleton || this.disabled}
-          mode=${this.mode}
+          .validationMode=${this.mode}
           .variablesNames=${variablesNames}
           @cc-env-var-create:create=${this._onCreate}
         ></cc-env-var-create>

diff --git a/src/components/common.types.d.ts b/src/components/common.types.d.ts
@@ -54,6 +54,9 @@ interface Flavor {
 export interface Variable {
   name: string;
   value: string;
+  isNew?: boolean;
+  isDeleted?: boolean;
+  isEdited?: boolean;
 }
 
 export interface IconModel {
@@ -172,9 +175,7 @@ interface ParseError {
   isWarning: Boolean;
 }
 
-interface ParserOptions {
-  mode: string;
-}
+type EnvVarValidationMode = 'simple' | 'strict';
 
 interface Service {
   name: string;