Skip to content

Commit 72f7bcc

Browse files
florian-sanders-ccflorian-sanders-cc
committed
Merge pull request #1580 from CleverCloud/dashboard-addons/move-doc-link-to-state-and-add-open-api-url
`cc-addon-credentials-beta`: add `open-api-url`, use `initialCredentials` instead of environment variables, allow specific `docLink` per tab
2 parents 8b661f1 + 01437aa commit 72f7bcc

11 files changed

+403
-236
lines changed

‎src/components/cc-addon-credentials-beta/cc-addon-credentials-beta.js‎

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { LitElement, css, html } from 'lit';
22
import { iconRemixInformationFill as iconInfo } from '../../assets/cc-remix.icons.js';
3+
import { fakeString } from '../../lib/fake-strings.js';
34
import { i18n } from '../../translations/translation.js';
45
import '../cc-addon-credentials-content/cc-addon-credentials-content.js';
56
import '../cc-block-details/cc-block-details.js';
@@ -34,7 +35,6 @@ import '../cc-toggle/cc-toggle.js';
3435
export class CcAddonCredentialsBeta extends LitElement {
3536
static get properties() {
3637
return {
37-
docLink: { type: Object, attribute: 'doc-link' },
3838
state: { type: Object },
3939
_selectedTabName: { type: String, state: true },
4040
};
@@ -43,11 +43,16 @@ export class CcAddonCredentialsBeta extends LitElement {
4343
constructor() {
4444
super();
4545

46-
/** @type {{ text: string; href: string; }} */
47-
this.docLink = null;
48-
4946
/** @type {AddonCredentialsBetaState} */
50-
this.state = { type: 'loading', tabs: { default: [] } };
47+
this.state = {
48+
type: 'loading',
49+
tabs: {
50+
default: {
51+
content: [],
52+
docLink: { text: fakeString(10), href: null },
53+
},
54+
},
55+
};
5156

5257
/** @type {TabName} */
5358
this._selectedTabName = 'default';
@@ -108,7 +113,7 @@ export class CcAddonCredentialsBeta extends LitElement {
108113
const skeleton = this.state.type === 'loading';
109114
const tabNames = /** @type {TabName[]} */ (Object.keys(this.state.tabs));
110115
const toggleChoices = this._getToggleChoices(tabNames);
111-
const activeTabContent = this.state.tabs[this._selectedTabName] ?? Object.values(this.state.tabs)[0];
116+
const activeTab = this.state.tabs[this._selectedTabName] ?? Object.values(this.state.tabs)[0];
112117

113118
return html`
114119
<cc-block>
@@ -127,19 +132,15 @@ export class CcAddonCredentialsBeta extends LitElement {
127132
${this.state.type === 'loaded' || this.state.type === 'loading'
128133
? html`
129134
<cc-addon-credentials-content
130-
.credentials="${activeTabContent}"
135+
.credentials="${activeTab.content}"
131136
.skeleton="${skeleton}"
132137
slot="content"
133138
></cc-addon-credentials-content>
134139
`
135140
: ''}
136-
${this.docLink != null
137-
? html`
138-
<div slot="footer-right">
139-
<cc-link .href="${this.docLink?.href}" .icon="${iconInfo}"> ${this.docLink.text} </cc-link>
140-
</div>
141-
`
142-
: ''}
141+
<div slot="footer-right">
142+
<cc-link .href="${activeTab.docLink.href}" .icon="${iconInfo}">${activeTab.docLink.text}</cc-link>
143+
</div>
143144
</cc-block>
144145
`;
145146
}

‎src/components/cc-addon-credentials-beta/cc-addon-credentials-beta.smart-keycloak.js‎

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,41 @@ import '../cc-smart-container/cc-smart-container.js';
66
import { CcAddonCredentialsBetaClient } from './cc-addon-credentials-beta.client.js';
77
import './cc-addon-credentials-beta.js';
88

9-
/** @type {AddonCredential[]} */
10-
const SKELETON_DATA = [
11-
{
12-
code: 'user',
13-
value: 'fake-skeleton',
14-
},
15-
{
16-
code: 'password',
17-
value: 'fake-skeleton',
18-
},
19-
{
20-
code: 'ng',
21-
kind: 'multi-instances',
22-
value: {
23-
status: 'disabled',
9+
/** @type {AddonCredentialsBetaStateLoading} */
10+
const LOADING_STATE = {
11+
type: 'loading',
12+
tabs: {
13+
default: {
14+
content: [
15+
{
16+
code: 'user',
17+
value: 'fake-skeleton',
18+
},
19+
{
20+
code: 'password',
21+
value: 'fake-skeleton',
22+
},
23+
{
24+
code: 'ng',
25+
kind: 'multi-instances',
26+
value: {
27+
status: 'disabled',
28+
},
29+
},
30+
],
31+
docLink: {
32+
text: i18n('cc-addon-credentials-beta.doc-link.keycloak'),
33+
href: generateDocsHref('/addons/keycloak/#secured-multi-instances'),
34+
},
2435
},
2536
},
26-
];
37+
};
2738
const PROVIDER_ID = 'keycloak';
2839

2940
/**
3041
* @typedef {import('./cc-addon-credentials-beta.js').CcAddonCredentialsBeta} CcAddonCredentialsBeta
3142
* @typedef {import('./cc-addon-credentials-beta.types.js').AddonCredentialsBetaStateLoaded} AddonCredentialsBetaStateLoaded
43+
* @typedef {import('./cc-addon-credentials-beta.types.js').AddonCredentialsBetaStateLoading} AddonCredentialsBetaStateLoading
3244
* @typedef {import('../cc-addon-credentials-content/cc-addon-credentials-content.types.js').AddonCredential} AddonCredential
3345
* @typedef {import('../cc-addon-credentials-content/cc-addon-credentials-content.types.js').AddonCredentialNg} AddonCredentialNg
3446
* @typedef {import('../cc-addon-credentials-content/cc-addon-credentials-content.types.js').AddonCredentialNgEnabled} AddonCredentialNgEnabled
@@ -58,7 +70,7 @@ defineSmartComponent({
5870
'state',
5971
/** @param {AddonCredentialsBetaStateLoaded} state */
6072
(state) => {
61-
state.tabs.default = [...state.tabs.default].map((addonInfo) => {
73+
state.tabs.default.content = [...state.tabs.default.content].map((addonInfo) => {
6274
if (addonInfo.code === 'ng') {
6375
if (typeof newNgInfoOrCallback === 'function') {
6476
return newNgInfoOrCallback(addonInfo);
@@ -72,26 +84,19 @@ defineSmartComponent({
7284
);
7385
}
7486

75-
updateComponent('state', {
76-
type: 'loading',
77-
tabs: {
78-
default: SKELETON_DATA,
79-
},
80-
});
81-
updateComponent('docLink', {
82-
text: i18n('cc-addon-credentials-beta.doc-link.keycloak'),
83-
href: generateDocsHref('/addons/keycloak/#secured-multi-instances'),
84-
});
87+
updateComponent('state', LOADING_STATE);
8588

8689
api
8790
.getCredentials()
8891
.then((credentials) => {
89-
updateComponent('state', {
90-
type: 'loaded',
91-
tabs: {
92-
default: credentials,
92+
updateComponent(
93+
'state',
94+
/** @param {AddonCredentialsBetaStateLoaded|AddonCredentialsBetaStateLoading} state */
95+
(state) => {
96+
state.type = 'loaded';
97+
state.tabs.default.content = credentials;
9398
},
94-
});
99+
);
95100
})
96101
.catch((error) => {
97102
console.error(error);
@@ -209,11 +214,11 @@ class Api extends CcAddonCredentialsBetaClient {
209214
return [
210215
{
211216
code: 'initial-user',
212-
value: operator.envVars.CC_KEYCLOAK_ADMIN,
217+
value: operator.initialCredentials.user,
213218
},
214219
{
215220
code: 'initial-password',
216-
value: operator.envVars.CC_KEYCLOAK_ADMIN_DEFAULT_PASSWORD,
221+
value: operator.initialCredentials.password,
217222
},
218223
{
219224
code: 'ng',

‎src/components/cc-addon-credentials-beta/cc-addon-credentials-beta.smart-otoroshi.js‎

Lines changed: 83 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { fakeString } from '../../lib/fake-strings.js';
22
import { notifyError, notifySuccess } from '../../lib/notifications.js';
33
import { defineSmartComponent } from '../../lib/smart/define-smart-component.js';
4+
import { generateDocsHref } from '../../lib/utils.js';
45
import { i18n } from '../../translations/translation.js';
56
import '../cc-smart-container/cc-smart-container.js';
67
import { CcAddonCredentialsBetaClient } from './cc-addon-credentials-beta.client.js';
@@ -10,40 +11,56 @@ import './cc-addon-credentials-beta.js';
1011
const LOADING_STATE = {
1112
type: 'loading',
1213
tabs: {
13-
admin: [
14-
{
15-
code: 'user',
16-
value: fakeString(10),
17-
},
18-
{
19-
code: 'password',
20-
value: fakeString(10),
21-
},
22-
{
23-
code: 'ng',
24-
kind: 'standard',
25-
value: { status: 'disabled' },
26-
},
27-
],
28-
api: [
29-
{
30-
code: 'api-client-user',
31-
value: fakeString(10),
32-
},
33-
{
34-
code: 'api-client-secret',
35-
value: fakeString(10),
36-
},
37-
{
38-
code: 'api-url',
39-
value: fakeString(10),
14+
admin: {
15+
content: [
16+
{
17+
code: 'user',
18+
value: fakeString(10),
19+
},
20+
{
21+
code: 'password',
22+
value: fakeString(10),
23+
},
24+
{
25+
code: 'ng',
26+
kind: 'standard',
27+
value: { status: 'disabled' },
28+
},
29+
],
30+
docLink: {
31+
text: i18n('cc-addon-credentials-beta.doc-link.otoroshi-ng'),
32+
href: generateDocsHref('/addons/otoroshi/#use-otoroshi-in-a-network-group'),
4033
},
41-
{
42-
code: 'ng',
43-
kind: 'standard',
44-
value: { status: 'disabled' },
34+
},
35+
api: {
36+
content: [
37+
{
38+
code: 'api-client-user',
39+
value: fakeString(10),
40+
},
41+
{
42+
code: 'api-client-secret',
43+
value: fakeString(10),
44+
},
45+
{
46+
code: 'api-url',
47+
value: fakeString(10),
48+
},
49+
{
50+
code: 'open-api-url',
51+
value: fakeString(10),
52+
},
53+
{
54+
code: 'ng',
55+
kind: 'standard',
56+
value: { status: 'disabled' },
57+
},
58+
],
59+
docLink: {
60+
text: i18n('cc-addon-credentials-beta.doc-link.otoroshi-api'),
61+
href: generateDocsHref('/addons/otoroshi/#manage-otoroshi-from-its-api'),
4562
},
46-
],
63+
},
4764
},
4865
};
4966
const PROVIDER_ID = 'otoroshi';
@@ -84,35 +101,46 @@ defineSmartComponent({
84101
state.tabs = Object.fromEntries(
85102
Object.entries(state.tabs).map(([tabName, tabValue]) => [
86103
tabName,
87-
tabValue.map((addonInfo) => {
88-
if (addonInfo.code === 'ng') {
89-
if (typeof newNgInfoOrCallback === 'function') {
90-
return newNgInfoOrCallback(addonInfo);
91-
} else {
92-
return newNgInfoOrCallback;
104+
{
105+
...tabValue,
106+
content: tabValue.content.map((addonInfo) => {
107+
if (addonInfo.code === 'ng') {
108+
if (typeof newNgInfoOrCallback === 'function') {
109+
return newNgInfoOrCallback(addonInfo);
110+
} else {
111+
return newNgInfoOrCallback;
112+
}
93113
}
94-
}
95-
return addonInfo;
96-
}),
114+
return addonInfo;
115+
}),
116+
},
97117
]),
98118
);
99119
},
100120
);
101121
}
102122

103123
updateComponent('state', LOADING_STATE);
104-
updateComponent('docLink', {
105-
text: i18n('cc-addon-credentials-beta.doc-link.otoroshi'),
106-
href: 'https://www.clever-cloud.com/developers/doc/addons/otoroshi/',
107-
});
108124

109125
api
110126
.getAllCredentials()
111127
.then((tabs) => {
112-
updateComponent('state', {
113-
type: 'loaded',
114-
tabs,
115-
});
128+
updateComponent(
129+
'state',
130+
/** @param {AddonCredentialsBetaStateLoaded|AddonCredentialsBetaStateLoading} state */
131+
(state) => {
132+
state.type = 'loaded';
133+
state.tabs = Object.fromEntries(
134+
Object.entries(state.tabs).map(([tabName, tabValue]) => [
135+
tabName,
136+
{
137+
...tabValue,
138+
content: tabs[/** @type {'admin'|'api'} */ (tabName)],
139+
},
140+
]),
141+
);
142+
},
143+
);
116144
})
117145
.catch((error) => {
118146
console.error(error);
@@ -241,6 +269,10 @@ class Api extends CcAddonCredentialsBetaClient {
241269
code: 'api-url',
242270
value: operator.api.url,
243271
},
272+
{
273+
code: 'open-api-url',
274+
value: operator.api.openapi,
275+
},
244276
{
245277
code: 'ng',
246278
kind: 'standard',
@@ -252,11 +284,11 @@ class Api extends CcAddonCredentialsBetaClient {
252284
return [
253285
{
254286
code: 'user',
255-
value: operator.envVars.CC_OTOROSHI_INITIAL_ADMIN_LOGIN,
287+
value: operator.initialCredentials.user,
256288
},
257289
{
258290
code: 'password',
259-
value: operator.envVars.CC_OTOROSHI_INITIAL_ADMIN_PASSWORD,
291+
value: operator.initialCredentials.password,
260292
},
261293
{
262294
code: 'ng',

0 commit comments

Comments
 (0)