Skip to content

Commit

Permalink
refactor: adapt component using cc-block
Browse files Browse the repository at this point in the history
  • Loading branch information
@HeleneAmouzou
HeleneAmouzou committed Sep 13, 2024
1 parent 9e394c1 commit a992da6
Show file tree
Hide file tree
Showing 30 changed files with 911 additions and 758 deletions.
12 changes: 7 additions & 5 deletions src/components/cc-addon-admin/cc-addon-admin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,12 @@ export class CcAddonAdmin extends LitElement {
render() {
return html`
<cc-block>
<div slot="title">${i18n('cc-addon-admin.admin')}</div>
<div slot="header-title">${i18n('cc-addon-admin.admin')}</div>
${this.state.type === 'error'
? html` <cc-notice intent="warning" message="${i18n('cc-addon-admin.error-loading')}"></cc-notice> `
? html`
<cc-notice slot="content" intent="warning" message="${i18n('cc-addon-admin.error-loading')}"></cc-notice>
`
: ''}
${this.state.type !== 'error' ? this._renderContent(this.state) : ''}
</cc-block>
Expand All @@ -125,7 +127,7 @@ export class CcAddonAdmin extends LitElement {
const shouldShowVmText = !this.noDangerZoneVmText;

return html`
<cc-block-section>
<cc-block-section slot="content">
<div slot="title">${i18n('cc-addon-admin.heading.name')}</div>
<div slot="info"></div>
<div class="one-line-form">
Expand All @@ -148,7 +150,7 @@ export class CcAddonAdmin extends LitElement {
</div>
</cc-block-section>
<cc-block-section>
<cc-block-section slot="content">
<div slot="title">${i18n('cc-addon-admin.heading.tags')}</div>
<div slot="info">${i18n('cc-addon-admin.tags-description')}</div>
<div class="one-line-form">
Expand All @@ -172,7 +174,7 @@ export class CcAddonAdmin extends LitElement {
</div>
</cc-block-section>
<cc-block-section>
<cc-block-section slot="content">
<div slot="title" class="danger">${i18n('cc-addon-admin.danger-zone')}</div>
<div slot="info" class="danger-desc">
<p>${i18n('cc-addon-admin.delete-disclaimer')}</p>
Expand Down
139 changes: 77 additions & 62 deletions src/components/cc-addon-backups/cc-addon-backups.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -248,10 +248,15 @@ export class CcAddonBackups extends LitElement {
render() {
return html`
<cc-block>
<div slot="title">${i18n('cc-addon-backups.title')}</div>
<div slot="header-title">${i18n('cc-addon-backups.title')}</div>
${this.state.type === 'error'
? html` <cc-notice intent="warning" message="${i18n('cc-addon-backups.loading-error')}"></cc-notice> `
? html`
<cc-notice
slot="content"
intent="warning"
message="${i18n('cc-addon-backups.loading-error')}"
></cc-notice>
`
: ''}
${this.state.type === 'loading' ? this._renderLoading(this.state) : ''}
${this.state.type === 'loaded' ? this._renderLoaded(this.state) : ''}
Expand All @@ -266,10 +271,10 @@ export class CcAddonBackups extends LitElement {
*/
_renderLoading(state) {
return html`
<div>
<div slot="content">
<span class="skeleton"> ${fakeString(150)} </span>
</div>
${this._renderBackups(state)}
${this._renderBackups(state, false)}
`;
}

Expand All @@ -280,28 +285,30 @@ export class CcAddonBackups extends LitElement {
*/
_renderLoaded(state) {
const hasData = state.backups.length > 0;
const isBlurred = this._overlayType === 'restore' || this._overlayType === 'delete';

return html`
<div>${this._getDescription(state.providerId)}</div>
<div slot="content" class=${classMap({ blurred: isBlurred })}>${this._getDescription(state.providerId)}</div>
${!hasData ? html` <div class="cc-block_empty-msg">${i18n('cc-addon-backups.empty')}</div> ` : ''}
${hasData ? this._renderBackups(state) : ''}
${!hasData ? html` <div slot="content" class="empty-msg">${i18n('cc-addon-backups.empty')}</div> ` : ''}
${hasData ? this._renderBackups(state, isBlurred) : ''}
${this._overlayType === 'restore' ? this._renderRestoreOverlay(state.providerId, state.passwordForCommand) : ''}
${this._overlayType === 'delete' ? this._renderDeleteOverlay(state.providerId, state.passwordForCommand) : ''}
`;
}

/**
* @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`
<div class="backup-list">
<div slot="content" class="backup-list ${classMap({ blurred: isBlurred })}">
${data.backups.map(
(backup) => html`
<div class="backup">
Expand Down Expand Up @@ -347,42 +354,41 @@ export class CcAddonBackups extends LitElement {
_renderRestoreOverlay(providerId, passwordForCommand) {
return html`
<!-- The restore and delete overlays are quite similar but's it's easier to read with a big if and some copy/paste than 8 ifs -->
<div slot="overlay">
<cc-block class="overlay">
<div slot="title">${i18n('cc-addon-backups.restore', this._selectedBackup)}</div>
<cc-block slot="content" class="overlay">
<div slot="header-title">${i18n('cc-addon-backups.restore', this._selectedBackup)}</div>
<div slot="header-right">
<cc-button
class="overlay-close-btn"
slot="button"
.icon=${iconClose}
hide-text
outlined
primary
@cc-button:click=${this._onCloseOverlay}
>${i18n('cc-addon-backups.close-btn')}</cc-button
>
</div>
${this._displaySectionWithService(providerId)
? html`
<cc-block-section slot="content">
<div slot="title">${this._getRestoreWithServiceTitle(providerId)}</div>
<div>${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}</div>
</cc-block-section>
`
: ''}
${this._displaySectionWithService(providerId)
<cc-block-section slot="content">
<div slot="title">${i18n('cc-addon-backups.restore.manual.title')}</div>
<div>${this._getManualRestoreDescription(providerId)}</div>
${this._selectedBackup.restoreCommand != null
? html`
<cc-block-section>
<div slot="title">${this._getRestoreWithServiceTitle(providerId)}</div>
<div>${this._getRestoreWithServiceDescription(providerId, this._selectedBackup.url)}</div>
</cc-block-section>
<cc-input-text readonly clipboard value="${this._selectedBackup.restoreCommand}"></cc-input-text>
<div>${i18n('cc-addon-backups.command-password')}</div>
<cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
`
: ''}
<cc-block-section>
<div slot="title">${i18n('cc-addon-backups.restore.manual.title')}</div>
<div>${this._getManualRestoreDescription(providerId)}</div>
${this._selectedBackup.restoreCommand != null
? html`
<cc-input-text readonly clipboard value="${this._selectedBackup.restoreCommand}"></cc-input-text>
<div>${i18n('cc-addon-backups.command-password')}</div>
<cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
`
: ''}
</cc-block-section>
</cc-block>
</div>
</cc-block-section>
</cc-block>
`;
}

Expand All @@ -394,42 +400,41 @@ export class CcAddonBackups extends LitElement {
*/
_renderDeleteOverlay(providerId, passwordForCommand) {
return html`
<div slot="overlay">
<cc-block class="overlay">
<div slot="title">${i18n('cc-addon-backups.delete', this._selectedBackup)}</div>
<cc-block slot="content" class="overlay">
<div slot="header-title">${i18n('cc-addon-backups.delete', this._selectedBackup)}</div>
<div slot="header-right">
<cc-button
class="overlay-close-btn"
slot="button"
.icon=${iconClose}
hide-text
outlined
primary
@cc-button:click=${this._onCloseOverlay}
>${i18n('cc-addon-backups.close-btn')}</cc-button
>
</div>
${this._displaySectionWithService(providerId)
? html`
<cc-block-section slot="content">
<div slot="title">${i18n('cc-addon-backups.delete.with-service.title.es-addon')}</div>
<div>
${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
href: this._selectedBackup.url,
})}
</div>
</cc-block-section>
`
: ''}
${this._displaySectionWithService(providerId)
? html`
<cc-block-section>
<div slot="title">${i18n('cc-addon-backups.delete.with-service.title.es-addon')}</div>
<div>
${i18n('cc-addon-backups.delete.with-service.description.es-addon', {
href: this._selectedBackup.url,
})}
</div>
</cc-block-section>
`
: ''}
<cc-block-section>
<div slot="title">${i18n('cc-addon-backups.delete.manual.title')}</div>
<div>${this._getManualDeleteDescription(providerId)}</div>
<cc-input-text readonly clipboard value="${this._selectedBackup.deleteCommand}"></cc-input-text>
<div>${i18n('cc-addon-backups.command-password')}</div>
<cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
</cc-block-section>
</cc-block>
</div>
<cc-block-section slot="content">
<div slot="title">${i18n('cc-addon-backups.delete.manual.title')}</div>
<div>${this._getManualDeleteDescription(providerId)}</div>
<cc-input-text readonly clipboard value="${this._selectedBackup.deleteCommand}"></cc-input-text>
<div>${i18n('cc-addon-backups.command-password')}</div>
<cc-input-text readonly clipboard secret value=${passwordForCommand}></cc-input-text>
</cc-block-section>
</cc-block>
`;
}

Expand All @@ -440,8 +445,7 @@ export class CcAddonBackups extends LitElement {
// language=CSS
css`
:host {
display: grid;
grid-gap: 1em;
display: block;
line-height: 1.5;
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}
`,
];
}
Expand Down
24 changes: 15 additions & 9 deletions src/components/cc-addon-credentials/cc-addon-credentials.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/

Expand All @@ -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 },
};
}
Expand All @@ -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;
Expand Down Expand Up @@ -93,16 +93,16 @@ export class CcAddonCredentials extends LitElement {

render() {
return html`
<cc-block image=${ifDefined(this.image ?? undefined)} state=${this.toggleState}>
<div slot="title">${i18n('cc-addon-credentials.title', { name: this.name })}</div>
<cc-block image=${ifDefined(this.image ?? undefined)} toggle=${this.toggle}>
<div slot="header-title">${i18n('cc-addon-credentials.title', { name: this.name })}</div>
${!this.error
? html`
<div>${this._getDescription(this.type)}</div>
<div slot="content">${this._getDescription(this.type)}</div>
${this.credentials != null
? html`
<div class="credential-list">
<div slot="content" class="credential-list">
${this.credentials.map(
({ type, secret, value }) => html`
<cc-input-text
Expand All @@ -121,7 +121,13 @@ export class CcAddonCredentials extends LitElement {
`
: ''}
${this.error
? html` <cc-notice intent="warning" message="${i18n('cc-addon-credentials.loading-error')}"></cc-notice> `
? html`
<cc-notice
slot="content"
intent="warning"
message="${i18n('cc-addon-credentials.loading-error')}"
></cc-notice>
`
: ''}
</cc-block>
`;
Expand Down
8 changes: 4 additions & 4 deletions src/components/cc-addon-credentials/cc-addon-credentials.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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 },
Expand All @@ -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 },
Expand All @@ -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 },
Expand Down
Loading

0 comments on commit a992da6

Please sign in to comment.