catalog/ts_web/elements/sz-demo-view-registries.ts

import {
  DeesElement,
  customElement,
  html,
  css,
  cssManager,
  state,
  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-registries': SzDemoViewRegistries;
  }
}

@customElement('sz-demo-view-registries')
export class SzDemoViewRegistries extends DeesElement {
  private appui: DeesAppui | null = null;

  @state()
  private accessor currentTab: 'onebox' | 'external' = 'onebox';

  async onActivate(context: { appui: DeesAppui; viewId: string }) {
    this.appui = context.appui;

    // Set up content tabs
    this.appui.setContentTabs([
      {
        key: 'Registry Advertisement',
        action: () => {
          this.currentTab = 'onebox';
          this.updateSecondaryMenu();
        },
      },
      {
        key: 'External Registries',
        action: () => {
          this.currentTab = 'external';
          this.updateSecondaryMenu();
        },
      },
    ]);

    this.updateSecondaryMenu();
  }

  private updateSecondaryMenu() {
    if (!this.appui) return;

    if (this.currentTab === 'onebox') {
      this.appui.setSecondaryMenu({
        heading: 'Registry Advertisement',
        groups: [
          {
            name: 'Actions',
            items: [
              { type: 'action', key: 'Push Image', iconName: 'lucide:Upload', action: () => { console.log('Push image'); } },
              { type: 'action', variant: 'danger', key: 'Garbage Collect', iconName: 'lucide:Trash2', action: () => { console.log('GC'); } },
            ],
          },
          {
            name: 'Statistics',
            items: [
              { type: 'header', label: '4 Images' },
              { type: 'header', label: '640 MB Total' },
            ],
          },
        ],
      });
    } else {
      this.appui.setSecondaryMenu({
        heading: 'External Registries',
        groups: [
          {
            name: 'Actions',
            items: [
              { type: 'action', key: 'Add Registry', iconName: 'lucide:Plus', action: () => { console.log('Add registry'); } },
              { type: 'action', key: 'Test All', iconName: 'lucide:CheckCircle', action: () => { console.log('Test all'); } },
            ],
          },
          {
            name: 'Connected',
            items: [
              { key: 'Docker Hub', iconName: 'lucide:Box', action: () => { console.log('Docker Hub'); } },
              { key: 'GHCR', iconName: 'lucide:Github', action: () => { console.log('GHCR'); } },
            ],
          },
        ],
      });
    }
  }

  onDeactivate() {
    // Cleanup if needed
  }

  private demoOneboxImages = [
    { id: '1', name: 'api-gateway', tags: ['latest', 'v2.1.0', 'v2.0.0'], size: '256 MB', updated: '2024-01-20', pulls: 142 },
    { id: '2', name: 'frontend', tags: ['latest', 'v1.5.0'], size: '128 MB', updated: '2024-01-19', pulls: 89 },
    { id: '3', name: 'worker-service', tags: ['latest'], size: '64 MB', updated: '2024-01-18', pulls: 56 },
    { id: '4', name: 'admin-panel', tags: ['latest', 'v3.0.0', 'v2.9.0'], size: '192 MB', updated: '2024-01-17', pulls: 34 },
  ];

  private demoExternalRegistries = [
    { id: '1', name: 'Docker Hub', url: 'docker.io', status: 'connected' as const, images: 12 },
    { id: '2', name: 'GitHub Container Registry', url: 'ghcr.io', status: 'connected' as const, images: 8 },
    { id: '3', name: 'AWS ECR', url: '123456789.dkr.ecr.us-east-1.amazonaws.com', status: 'error' as const, images: 0 },
  ];

  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;
      }

      .tabs {
        display: flex;
        gap: 4px;
        margin-bottom: 24px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
      }

      .tab {
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        background: transparent;
        border: none;
        cursor: pointer;
        position: relative;
        transition: color 200ms ease;
      }

      .tab:hover {
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .tab.active {
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .tab.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
        border-radius: 1px 1px 0 0;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      ${this.currentTab === 'onebox' ? html`
        <sz-registry-advertisement
          .images=${this.demoOneboxImages}
          .stats=${{
            totalImages: 4,
            totalSize: '640 MB',
            totalPulls: 321,
          }}
          @view-image=${(e: CustomEvent) => console.log('View image:', e.detail)}
          @delete-image=${(e: CustomEvent) => console.log('Delete image:', e.detail)}
          @delete-tag=${(e: CustomEvent) => console.log('Delete tag:', e.detail)}
        ></sz-registry-advertisement>
      ` : html`
        <sz-registry-external-view
          .registries=${this.demoExternalRegistries}
          @add-registry=${() => console.log('Add registry')}
          @edit-registry=${(e: CustomEvent) => console.log('Edit registry:', e.detail)}
          @delete-registry=${(e: CustomEvent) => console.log('Delete registry:', e.detail)}
          @test-connection=${(e: CustomEvent) => console.log('Test connection:', e.detail)}
        ></sz-registry-external-view>
      `}
    `;
  }
}