From a992da60a60b978a0c83a368fc0deb0c2084ad89 Mon Sep 17 00:00:00 2001 From: Helene Amouzou Date: Fri, 13 Sep 2024 12:09:25 +0200 Subject: [PATCH] refactor: adapt component using `cc-block` --- .../cc-addon-admin/cc-addon-admin.js | 12 +- .../cc-addon-backups/cc-addon-backups.js | 139 ++++---- .../cc-addon-credentials.js | 24 +- .../cc-addon-credentials.stories.js | 8 +- .../cc-addon-features/cc-addon-features.js | 14 +- .../cc-addon-linked-apps.js | 19 +- .../cc-addon-option-form.js | 37 +- .../cc-block-section.stories.js | 20 +- .../cc-domain-management.js | 53 ++- .../cc-elasticsearch-info.js | 17 +- src/components/cc-email-list/cc-email-list.js | 10 +- .../cc-env-var-form/cc-env-var-form.js | 204 +++++------ .../cc-env-var-form.stories.js | 5 +- .../cc-grafana-info/cc-grafana-info.js | 40 ++- .../cc-header-addon/cc-header-addon.js | 32 +- src/components/cc-header-app/cc-header-app.js | 21 +- .../cc-header-orga/cc-header-orga.js | 18 +- .../cc-header-orga/cc-header-orga.stories.js | 57 ++-- .../cc-heptapod-info/cc-heptapod-info.js | 32 +- .../cc-invoice-list/cc-invoice-list.js | 29 +- src/components/cc-invoice/cc-invoice.js | 10 +- .../cc-jenkins-info/cc-jenkins-info.js | 30 +- .../cc-matomo-info/cc-matomo-info.js | 44 +-- .../cc-orga-member-list.js | 25 +- .../cc-ssh-key-list/cc-ssh-key-list.js | 31 +- .../cc-tcp-redirection-form.js | 84 +++-- .../cc-toaster/cc-toaster.stories.js | 16 +- src/templates/cc-link/cc-link.js | 4 + src/translations/translations.en.js | 317 +++++++++--------- src/translations/translations.fr.js | 317 +++++++++--------- 30 files changed, 911 insertions(+), 758 deletions(-) diff --git a/src/components/cc-addon-admin/cc-addon-admin.js b/src/components/cc-addon-admin/cc-addon-admin.js index 9fb413da5..b61354a04 100644 --- a/src/components/cc-addon-admin/cc-addon-admin.js +++ b/src/components/cc-addon-admin/cc-addon-admin.js @@ -102,10 +102,12 @@ export class CcAddonAdmin extends LitElement { render() { return html` -
${i18n('cc-addon-admin.admin')}
+
${i18n('cc-addon-admin.admin')}
${this.state.type === 'error' - ? html` ` + ? html` + + ` : ''} ${this.state.type !== 'error' ? this._renderContent(this.state) : ''} @@ -125,7 +127,7 @@ export class CcAddonAdmin extends LitElement { const shouldShowVmText = !this.noDangerZoneVmText; return html` - +
${i18n('cc-addon-admin.heading.name')}
@@ -148,7 +150,7 @@ export class CcAddonAdmin extends LitElement {
- +
${i18n('cc-addon-admin.heading.tags')}
${i18n('cc-addon-admin.tags-description')}
@@ -172,7 +174,7 @@ export class CcAddonAdmin extends LitElement {
- +
${i18n('cc-addon-admin.danger-zone')}

${i18n('cc-addon-admin.delete-disclaimer')}

diff --git a/src/components/cc-addon-backups/cc-addon-backups.js b/src/components/cc-addon-backups/cc-addon-backups.js index 4139f6162..6e41f56e1 100644 --- a/src/components/cc-addon-backups/cc-addon-backups.js +++ b/src/components/cc-addon-backups/cc-addon-backups.js @@ -248,10 +248,15 @@ export class CcAddonBackups extends LitElement { render() { return html` -
${i18n('cc-addon-backups.title')}
- +
${i18n('cc-addon-backups.title')}
${this.state.type === 'error' - ? html` ` + ? html` + + ` : ''} ${this.state.type === 'loading' ? this._renderLoading(this.state) : ''} ${this.state.type === 'loaded' ? this._renderLoaded(this.state) : ''} @@ -266,10 +271,10 @@ export class CcAddonBackups extends LitElement { */ _renderLoading(state) { return html` -
+
${fakeString(150)}
- ${this._renderBackups(state)} + ${this._renderBackups(state, false)} `; } @@ -280,12 +285,13 @@ export class CcAddonBackups extends LitElement { */ _renderLoaded(state) { const hasData = state.backups.length > 0; + const isBlurred = this._overlayType === 'restore' || this._overlayType === 'delete'; return html` -
${this._getDescription(state.providerId)}
+
${this._getDescription(state.providerId)}
- ${!hasData ? html`
${i18n('cc-addon-backups.empty')}
` : ''} - ${hasData ? this._renderBackups(state) : ''} + ${!hasData ? html`
${i18n('cc-addon-backups.empty')}
` : ''} + ${hasData ? this._renderBackups(state, isBlurred) : ''} ${this._overlayType === 'restore' ? this._renderRestoreOverlay(state.providerId, state.passwordForCommand) : ''} ${this._overlayType === 'delete' ? this._renderDeleteOverlay(state.providerId, state.passwordForCommand) : ''} `; @@ -293,15 +299,16 @@ export class CcAddonBackups extends LitElement { /** * @param {AddonBackupsStateLoaded | AddonBackupsStateLoading} state + * @param {boolean} isBlurred * @private */ - _renderBackups(state) { + _renderBackups(state, isBlurred) { const skeleton = state.type === 'loading'; const areBtnsDisabled = state.type === 'loading' || this._overlayType != null; const data = state.type === 'loaded' ? state : SKELETON_BACKUPS; return html` -
+
${data.backups.map( (backup) => html`
@@ -347,12 +354,11 @@ export class CcAddonBackups extends LitElement { _renderRestoreOverlay(providerId, passwordForCommand) { return html` -
- -
${i18n('cc-addon-backups.restore', this._selectedBackup)}
+ +
${i18n('cc-addon-backups.restore', this._selectedBackup)}
+
${i18n('cc-addon-backups.close-btn')} +
+ + ${this._displaySectionWithService(providerId) + ? html` + +
${this._getRestoreWithServiceTitle(providerId)}
+
${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}
+ + ` + : ''} - ${this._displaySectionWithService(providerId) + +
${i18n('cc-addon-backups.restore.manual.title')}
+
${this._getManualRestoreDescription(providerId)}
+ ${this._selectedBackup.restoreCommand != null ? html` - -
${this._getRestoreWithServiceTitle(providerId)}
-
${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}
- + +
${i18n('cc-addon-backups.command-password')}
+ ` : ''} - - -
${i18n('cc-addon-backups.restore.manual.title')}
-
${this._getManualRestoreDescription(providerId)}
- ${this._selectedBackup.restoreCommand != null - ? html` - -
${i18n('cc-addon-backups.command-password')}
- - ` - : ''} - - -
+ + `; } @@ -394,12 +400,11 @@ export class CcAddonBackups extends LitElement { */ _renderDeleteOverlay(providerId, passwordForCommand) { return html` -
- -
${i18n('cc-addon-backups.delete', this._selectedBackup)}
+ +
${i18n('cc-addon-backups.delete', this._selectedBackup)}
+
${i18n('cc-addon-backups.close-btn')} +
+ + ${this._displaySectionWithService(providerId) + ? html` + +
${i18n('cc-addon-backups.delete.with-service.title.es-addon')}
+
+ ${i18n('cc-addon-backups.delete.with-service.description.es-addon', { + href: this._selectedBackup.url, + })} +
+ + ` + : ''} - ${this._displaySectionWithService(providerId) - ? html` - -
${i18n('cc-addon-backups.delete.with-service.title.es-addon')}
-
- ${i18n('cc-addon-backups.delete.with-service.description.es-addon', { - href: this._selectedBackup.url, - })} -
- - ` - : ''} - - -
${i18n('cc-addon-backups.delete.manual.title')}
-
${this._getManualDeleteDescription(providerId)}
- -
${i18n('cc-addon-backups.command-password')}
- - - -
+ +
${i18n('cc-addon-backups.delete.manual.title')}
+
${this._getManualDeleteDescription(providerId)}
+ +
${i18n('cc-addon-backups.command-password')}
+ + + `; } @@ -440,8 +445,7 @@ export class CcAddonBackups extends LitElement { // language=CSS css` :host { - display: grid; - grid-gap: 1em; + display: block; line-height: 1.5; } @@ -484,15 +488,21 @@ export class CcAddonBackups extends LitElement { .overlay { box-shadow: 0 0 1em rgb(0 0 0 / 40%); - margin: 2em; + left: 50%; max-width: 50em; position: fixed; + transform: translateX(-50%); + width: 90%; } .overlay-close-btn { --cc-icon-size: 1.4em; } + .blurred { + filter: blur(5px); + } + .cc-link, cc-button[link] { margin-right: 0.5em; @@ -502,6 +512,11 @@ export class CcAddonBackups extends LitElement { cc-input-text { --cc-input-font-family: var(--cc-ff-monospace, monospace); } + + .empty-msg { + color: var(--cc-color-text-weak); + font-style: italic; + } `, ]; } diff --git a/src/components/cc-addon-credentials/cc-addon-credentials.js b/src/components/cc-addon-credentials/cc-addon-credentials.js index fbeef42cc..d9c134b08 100644 --- a/src/components/cc-addon-credentials/cc-addon-credentials.js +++ b/src/components/cc-addon-credentials/cc-addon-credentials.js @@ -8,7 +8,7 @@ import '../cc-notice/cc-notice.js'; /** * @typedef {import('./cc-addon-credentials.types.js').Credential} Credential - * @typedef {import('../common.types.js').ToggleStateType} ToggleStateType + * @typedef {import('../common.types.js').BlockToggleState} BlockToggleState * @typedef {import('./cc-addon-credentials.types.js').AddonType} AddonType */ @@ -28,7 +28,7 @@ export class CcAddonCredentials extends LitElement { error: { type: Boolean }, image: { type: String }, name: { type: String }, - toggleState: { type: Boolean, attribute: 'toggle-state' }, + toggle: { type: Boolean, attribute: 'toggle' }, type: { type: String }, }; } @@ -48,8 +48,8 @@ export class CcAddonCredentials extends LitElement { /** @type {string|null} Sets the display name of the add-on. */ this.name = null; - /** @type {ToggleStateType} Sets the toggle state of the inner block. */ - this.toggleState = 'off'; + /** @type {BlockToggleState} Sets the toggle state of the inner block. */ + this.toggle = 'off'; /** @type {AddonType} Sets the type of the add-on. */ this.type = null; @@ -93,16 +93,16 @@ export class CcAddonCredentials extends LitElement { render() { return html` - -
${i18n('cc-addon-credentials.title', { name: this.name })}
+ +
${i18n('cc-addon-credentials.title', { name: this.name })}
${!this.error ? html` -
${this._getDescription(this.type)}
+
${this._getDescription(this.type)}
${this.credentials != null ? html` -
+
${this.credentials.map( ({ type, secret, value }) => html` ` + ? html` + + ` : ''} `; diff --git a/src/components/cc-addon-credentials/cc-addon-credentials.stories.js b/src/components/cc-addon-credentials/cc-addon-credentials.stories.js index 86ab1c5d0..59f9cff6f 100644 --- a/src/components/cc-addon-credentials/cc-addon-credentials.stories.js +++ b/src/components/cc-addon-credentials/cc-addon-credentials.stories.js @@ -58,7 +58,7 @@ export const dataLoadedWithKibana = makeStory(conf, { type: 'kibana', name: 'Kibana', image: 'https://assets.clever-cloud.com/logos/elasticsearch-kibana.svg', - toggleState: 'close', + toggle: 'close', credentials: [ { type: 'host', value: 'my-host.services.clever-cloud.com', secret: false }, { type: 'user', value: 'my-super-user', secret: false }, @@ -73,7 +73,7 @@ export const dataLoadedWithApm = makeStory(conf, { { type: 'apm', name: 'APM', - toggleState: 'close', + toggle: 'close', image: 'https://assets.clever-cloud.com/logos/elasticsearch-apm.svg', credentials: [ { type: 'user', value: 'my-super-user', secret: false }, @@ -89,7 +89,7 @@ export const dataLoadedWithPulsar = makeStory(conf, { { type: 'pulsar', name: 'Pulsar', - toggleState: 'open', + toggle: 'open', image: 'https://assets.clever-cloud.com/logos/pulsar.svg', credentials: [ { type: 'url', value: 'pulsar+ssl://url:port', secret: false }, @@ -104,7 +104,7 @@ export const dataLoadedWithMateriaKv = makeStory(conf, { { type: 'materia-kv', name: 'Materia KV', - toggleState: 'off', + toggle: 'off', image: 'https://assets.clever-cloud.com/logos/materia-db-kv.png', credentials: [ { type: 'host', value: 'example.com', secret: false }, diff --git a/src/components/cc-addon-features/cc-addon-features.js b/src/components/cc-addon-features/cc-addon-features.js index 52826b4d8..823315c81 100644 --- a/src/components/cc-addon-features/cc-addon-features.js +++ b/src/components/cc-addon-features/cc-addon-features.js @@ -133,16 +133,22 @@ export class CcAddonFeatures extends LitElement { return html` -
${i18n('cc-addon-features.title')}
+
${i18n('cc-addon-features.title')}
-
${i18n('cc-addon-features.details')}
+
${i18n('cc-addon-features.details')}
${this.state.type === 'error' - ? html` ` + ? html` + + ` : ''} ${isLoadedOrLoading ? html` -
+
${features.map( (feature) => html`
diff --git a/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js b/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js index 3395dcc26..cc95af994 100644 --- a/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js +++ b/src/components/cc-addon-linked-apps/cc-addon-linked-apps.js @@ -49,8 +49,8 @@ export class CcAddonLinkedApps extends LitElement { */ _getEmptyContent() { return html` -
${i18n('cc-addon-linked-apps.details')}
-
${i18n('cc-addon-linked-apps.no-linked-applications')}
+
${i18n('cc-addon-linked-apps.details')}
+
${i18n('cc-addon-linked-apps.no-linked-applications')}
`; } @@ -59,7 +59,9 @@ export class CcAddonLinkedApps extends LitElement { * @private */ _getErrorContent() { - return html` `; + return html` + + `; } /** @@ -89,11 +91,11 @@ export class CcAddonLinkedApps extends LitElement { } const content = html` -
${i18n('cc-addon-linked-apps.details')}
+
${i18n('cc-addon-linked-apps.details')}
${linkedApps.map( (linkedApp) => html` -
+