110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type { DeesAppui } from '@design.estate/dees-catalog';
|
|
import './index.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-demo-view-tokens': SzDemoViewTokens;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-demo-view-tokens')
|
|
export class SzDemoViewTokens extends DeesElement {
|
|
private appui: DeesAppui | null = null;
|
|
|
|
async onActivate(context: { appui: DeesAppui; viewId: string }) {
|
|
this.appui = context.appui;
|
|
|
|
// Tokens secondary menu
|
|
this.appui.setSecondaryMenu({
|
|
heading: 'Tokens',
|
|
groups: [
|
|
{
|
|
name: 'Actions',
|
|
items: [
|
|
{ type: 'action', key: 'Create Global Token', iconName: 'lucide:Plus', action: () => { console.log('Create global token'); } },
|
|
{ type: 'action', key: 'Create CI Token', iconName: 'lucide:GitBranch', action: () => { console.log('Create CI token'); } },
|
|
],
|
|
},
|
|
{
|
|
name: 'Token Types',
|
|
items: [
|
|
{ key: 'Global Tokens', iconName: 'lucide:Key', badge: '3', action: () => { console.log('Filter global'); } },
|
|
{ key: 'CI Tokens', iconName: 'lucide:Cpu', badge: '3', action: () => { console.log('Filter CI'); } },
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
onDeactivate() {
|
|
// Cleanup if needed
|
|
}
|
|
private demoGlobalTokens = [
|
|
{ id: '1', name: 'CI/CD Pipeline', type: 'global' as const, createdAt: '2024-01-15', lastUsed: '2024-01-20' },
|
|
{ id: '2', name: 'Development', type: 'global' as const, createdAt: '2024-01-10' },
|
|
{ id: '3', name: 'Production Deploy', type: 'global' as const, createdAt: '2024-01-05', lastUsed: '2024-01-19' },
|
|
];
|
|
|
|
private demoCiTokens = [
|
|
{ id: '4', name: 'api-gateway-ci', type: 'ci' as const, service: 'api-gateway', createdAt: '2024-01-18', lastUsed: '2024-01-20' },
|
|
{ id: '5', name: 'frontend-ci', type: 'ci' as const, service: 'frontend', createdAt: '2024-01-12', lastUsed: '2024-01-19' },
|
|
{ id: '6', name: 'worker-service-ci', type: 'ci' as const, service: 'worker-service', createdAt: '2024-01-08' },
|
|
];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 24px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
margin: 0;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="page-header">
|
|
<h1 class="page-title">Tokens</h1>
|
|
<p class="page-subtitle">Manage registry access tokens for CI/CD pipelines</p>
|
|
</div>
|
|
|
|
<sz-tokens-view
|
|
.globalTokens=${this.demoGlobalTokens}
|
|
.ciTokens=${this.demoCiTokens}
|
|
@create=${(e: CustomEvent) => console.log('Create token:', e.detail)}
|
|
@copy=${(e: CustomEvent) => console.log('Copy token:', e.detail)}
|
|
@regenerate=${(e: CustomEvent) => console.log('Regenerate token:', e.detail)}
|
|
@delete=${(e: CustomEvent) => console.log('Delete token:', e.detail)}
|
|
></sz-tokens-view>
|
|
`;
|
|
}
|
|
}
|