Merge pull request #1297 from CleverCloud/cc-button/fix-waiting-vs-disabled

cc-button: avoid setting both `disabled` & `waiting` at the same time

Author: florian-sanders-cc

src/components/cc-addon-admin/cc-addon-admin.js

@@ -142,7 +142,7 @@ export class CcAddonAdmin extends LitElement {
           <cc-button
             primary
             ?skeleton=${isSkeleton}
-            ?disabled=${isFormDisabled}
+            ?disabled=${isFormDisabled && state.type !== 'updatingName'}
             ?waiting=${state.type === 'updatingName'}
             @cc-button:click=${this._onNameSubmit}
             >${i18n('cc-addon-admin.update')}</cc-button
@@ -166,7 +166,7 @@ export class CcAddonAdmin extends LitElement {
           <cc-button
             primary
             ?skeleton=${isSkeleton}
-            ?disabled=${isFormDisabled}
+            ?disabled=${isFormDisabled && state.type !== 'updatingTags'}
             ?waiting=${state.type === 'updatingTags'}
             @cc-button:click=${this._onTagsSubmit}
             >${i18n('cc-addon-admin.tags-update')}</cc-button
@@ -185,7 +185,7 @@ export class CcAddonAdmin extends LitElement {
           <cc-button
             danger
             ?skeleton=${isSkeleton}
-            ?disabled=${isFormDisabled}
+            ?disabled=${isFormDisabled && state.type !== 'deleting'}
             ?waiting=${state.type === 'deleting'}
             @cc-button:click=${this._onDeleteSubmit}
             >${i18n('cc-addon-admin.delete')}</cc-button

src/components/cc-button/cc-button.js

@@ -240,6 +240,12 @@ export class CcButton extends LitElement {
         this._cancelClick();
       }
     }
+
+    if (this.waiting && this.disabled) {
+      throw new Error(
+        '`waiting` and `disabled` cannot be set to true at the same time, see https://github.com/CleverCloud/clever-components/issues/1124 for more info',
+      );
+    }
   }
 
   render() {

src/components/cc-domain-management/cc-domain-management.js

@@ -570,7 +570,7 @@ export class CcDomainManagement extends LitElement {
                   class="mark-primary"
                   primary
                   outlined
-                  ?disabled=${isMarkingPrimaryDisabled}
+                  ?disabled=${isMarkingPrimaryDisabled && domainItemStateType !== 'marking-primary'}
                   ?waiting="${domainItemStateType === 'marking-primary'}"
                   a11y-name="${i18n('cc-domain-management.list.btn.primary.a11y-name', { domain: hostWithWildcard })}"
                   .icon=${iconPrimary}

src/components/cc-email-list/cc-email-list.js

@@ -250,7 +250,7 @@ export class CcEmailList extends LitElement {
    */
   _renderSecondarySection(secondaryAddressStates) {
     const addresses = [...secondaryAddressStates].sort(sortBy('address'));
-    const markingAsPrimary = addresses.some((item) => item.state === 'marking-as-primary');
+    const isOneRowMarkingPrimary = addresses.some((item) => item.state === 'marking-as-primary');
 
     return html`
       <cc-block-section slot="content-body">
@@ -260,6 +260,7 @@ export class CcEmailList extends LitElement {
         <ul class="secondary-addresses">
           ${addresses.map((secondaryAddress) => {
             const isBusy = secondaryAddress.state === 'marking-as-primary' || secondaryAddress.state === 'deleting';
+            const isDisabled = (isOneRowMarkingPrimary || isBusy) && secondaryAddress.state !== 'marking-as-primary';
 
             return html`
               <li class="address-line secondary">
@@ -271,7 +272,7 @@ export class CcEmailList extends LitElement {
                   <cc-button
                     @cc-button:click=${() => this._onMarkAsPrimary(secondaryAddress.address)}
                     ?waiting="${secondaryAddress.state === 'marking-as-primary'}"
-                    ?disabled="${markingAsPrimary || isBusy}"
+                    ?disabled="${isDisabled}"
                     a11y-name="${i18n('cc-email-list.secondary.action.mark-as-primary.accessible-name', {
                       address: secondaryAddress.address,
                     })}"
@@ -285,7 +286,7 @@ export class CcEmailList extends LitElement {
                     .icon=${iconDelete}
                     @cc-button:click=${() => this._onDelete(secondaryAddress.address)}
                     ?waiting="${secondaryAddress.state === 'deleting'}"
-                    ?disabled="${isBusy}"
+                    ?disabled="${isBusy && secondaryAddress.state !== 'deleting'}"
                     a11y-name="${i18n('cc-email-list.secondary.action.delete.accessible-name', {
                       address: secondaryAddress.address,
                     })}"

src/components/cc-env-var-form/cc-env-var-form.js

@@ -356,7 +356,7 @@ export class CcEnvVarForm extends LitElement {
 
                 <cc-button
                   success
-                  ?disabled=${isFormDisabled}
+                  ?disabled=${isFormDisabled && !isSaving}
                   ?waiting="${isSaving}"
                   @cc-button:click=${this._onUpdateForm}
                   >${i18n('cc-env-var-form.update')}</cc-button

src/components/cc-ssh-key-list/cc-ssh-key-list.js

@@ -285,12 +285,12 @@ export class CcSshKeyList extends LitElement {
           (key) => key.name,
           (key) => {
             const name = key.name;
-            const isDisabled = !skeleton && key.state !== 'idle';
+            const isWaiting = !skeleton && key.state !== 'idle';
             const classes = {
               'key--personal': type === 'personal',
               'key--github': type === 'github',
               'key--skeleton': skeleton,
-              'is-disabled': isDisabled,
+              'is-waiting': isWaiting,
             };
 
             return html`
@@ -311,10 +311,9 @@ export class CcSshKeyList extends LitElement {
                           a11y-name="${i18n('cc-ssh-key-list.personal.delete.a11y', { name })}"
                           class="key__button key__button--personal"
                           .icon="${iconBin}"
-                          ?disabled=${isDisabled}
                           danger
                           outlined
-                          ?waiting=${isDisabled}
+                          ?waiting=${isWaiting}
                         >
                           ${i18n('cc-ssh-key-list.personal.delete')}
                         </cc-button>
@@ -327,8 +326,7 @@ export class CcSshKeyList extends LitElement {
                           a11y-name="${i18n('cc-ssh-key-list.github.import.a11y', { name })}"
                           class="key__button key__button--github"
                           .icon="${iconAdd}"
-                          ?disabled=${isDisabled}
-                          ?waiting=${isDisabled}
+                          ?waiting=${isWaiting}
                         >
                           ${i18n('cc-ssh-key-list.github.import')}
                         </cc-button>
@@ -401,7 +399,7 @@ export class CcSshKeyList extends LitElement {
           grid-template-columns: min-content 1fr;
         }
 
-        .key.is-disabled {
+        .key.is-waiting {
           cursor: default;
           opacity: var(--cc-opacity-when-disabled);
         }