initial

2026-02-24 12:29:58 +00:00
commit 3fad287a29
58 changed files with 3999 additions and 0 deletions
--- a/ts_web/elements/views/connections/index.ts
+++ b/ts_web/elements/views/connections/index.ts
@@ -0,0 +1,158 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-connections')
+export class GitopsViewConnections extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  constructor() {
+    super();
+    const sub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Connections</div>
+      <div class="view-description">Manage your Gitea and GitLab provider connections</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addConnection()}>Add Connection</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Provider Connections'}
+        .heading2=${'Configure connections to Gitea and GitLab instances'}
+        .data=${this.connectionsState.connections}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Type: item.providerType,
+          URL: item.baseUrl,
+          Status: item.status,
+          Created: new Date(item.createdAt).toLocaleDateString(),
+        })}
+        .dataActions=${[
+          {
+            name: 'Test',
+            iconName: 'lucide:plug',
+            action: async (item: any) => {
+              await appstate.connectionsStatePart.dispatchAction(
+                appstate.testConnectionAction,
+                { connectionId: item.id },
+              );
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            action: async (item: any) => {
+              const confirmed = await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Delete Connection',
+                content: html`<p style="color: #fff;">Are you sure you want to delete connection "${item.name}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: 'Delete',
+                    action: async (modal: any) => {
+                      await appstate.connectionsStatePart.dispatchAction(
+                        appstate.deleteConnectionAction,
+                        { connectionId: item.id },
+                      );
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.refresh();
+  }
+
+  private async refresh() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+  }
+
+  private async addConnection() {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Connection',
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+        </style>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Provider Type'}
+            .key=${'providerType'}
+            .options=${[
+              { option: 'gitea', key: 'gitea' },
+              { option: 'gitlab', key: 'gitlab' },
+            ]}
+            .selectedOption=${{ option: 'gitea', key: 'gitea' }}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Base URL'} .key=${'baseUrl'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'API Token'} .key=${'token'} type="password"></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Add',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-dropdown');
+            const data: any = {};
+            for (const input of inputs) {
+              if (input.key === 'providerType') {
+                data[input.key] = input.selectedOption?.key || 'gitea';
+              } else {
+                data[input.key] = input.value || '';
+              }
+            }
+            await appstate.connectionsStatePart.dispatchAction(
+              appstate.createConnectionAction,
+              {
+                name: data.name,
+                providerType: data.providerType,
+                baseUrl: data.baseUrl,
+                token: data.token,
+              },
+            );
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}