feat(secrets): add ability to fetch and view all secrets across projects and groups, include scopeName, and improve frontend merging/filtering

ts_web/elements/views/secrets/index.ts

@@ -36,7 +36,7 @@ export class GitopsViewSecrets extends DeesElement {
   accessor selectedScope: 'project' | 'group' = 'project';
 
   @state()
-  accessor selectedScopeId: string = '';
+  accessor selectedScopeId: string = '__all__';
 
   private _autoRefreshHandler: () => void;
 
@@ -70,6 +70,13 @@ export class GitopsViewSecrets extends DeesElement {
     viewHostCss,
   ];
 
+  private get filteredSecrets() {
+    if (this.selectedScopeId === '__all__') {
+      return this.dataState.secrets;
+    }
+    return this.dataState.secrets.filter((s) => s.scopeId === this.selectedScopeId);
+  }
+
   public render(): TemplateResult {
     const connectionOptions = this.connectionsState.connections.map((c) => ({
       option: `${c.name} (${c.providerType})`,
@@ -81,10 +88,17 @@ export class GitopsViewSecrets extends DeesElement {
       { option: 'Group', key: 'group' },
     ];
 
-    const entityOptions = this.selectedScope === 'project'
+    const entities = this.selectedScope === 'project'
       ? this.dataState.projects.map((p) => ({ option: p.fullPath || p.name, key: p.id }))
       : this.dataState.groups.map((g) => ({ option: g.fullPath || g.name, key: g.id }));
 
+    const entityOptions = [
+      { option: 'All', key: '__all__' },
+      ...entities,
+    ];
+
+    const isAllSelected = this.selectedScopeId === '__all__';
+
     return html`
       <div class="view-title">Secrets</div>
       <div class="view-description">Manage CI/CD secrets and variables</div>
@@ -95,7 +109,9 @@ export class GitopsViewSecrets extends DeesElement {
           .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
           @selectedOption=${(e: CustomEvent) => {
             this.selectedConnectionId = e.detail.key;
+            this.selectedScopeId = '__all__';
             this.loadEntities();
+            this.loadSecrets();
           }}
         ></dees-input-dropdown>
         <dees-input-dropdown
@@ -104,7 +120,9 @@ export class GitopsViewSecrets extends DeesElement {
           .selectedOption=${scopeOptions.find((o) => o.key === this.selectedScope)}
           @selectedOption=${(e: CustomEvent) => {
             this.selectedScope = e.detail.key as 'project' | 'group';
+            this.selectedScopeId = '__all__';
             this.loadEntities();
+            this.loadSecrets();
           }}
         ></dees-input-dropdown>
         <dees-input-dropdown
@@ -113,18 +131,21 @@ export class GitopsViewSecrets extends DeesElement {
           .selectedOption=${entityOptions.find((o) => o.key === this.selectedScopeId) || entityOptions[0]}
           @selectedOption=${(e: CustomEvent) => {
             this.selectedScopeId = e.detail.key;
-            this.loadSecrets();
           }}
         ></dees-input-dropdown>
-        <dees-button @click=${() => this.addSecret()}>Add Secret</dees-button>
+        <dees-button
+          .disabled=${isAllSelected}
+          @click=${() => this.addSecret()}
+        >Add Secret</dees-button>
         <dees-button @click=${() => this.loadSecrets()}>Refresh</dees-button>
       </div>
       <dees-table
         .heading1=${'Secrets'}
         .heading2=${'CI/CD variables for the selected entity'}
-        .data=${this.dataState.secrets}
+        .data=${this.filteredSecrets}
         .displayFunction=${(item: any) => ({
           Key: item.key,
+          Scope: item.scopeName || item.scopeId,
           Value: item.masked ? '******' : item.value,
           Protected: item.protected ? 'Yes' : 'No',
           Environment: item.environment || '*',
@@ -141,8 +162,8 @@ export class GitopsViewSecrets extends DeesElement {
             action: async (item: any) => {
               await appstate.dataStatePart.dispatchAction(appstate.deleteSecretAction, {
                 connectionId: this.selectedConnectionId,
-                scope: this.selectedScope,
-                scopeId: this.selectedScopeId,
+                scope: item.scope,
+                scopeId: item.scopeId,
                 key: item.key,
               });
             },
@@ -158,6 +179,7 @@ export class GitopsViewSecrets extends DeesElement {
     if (conns.length > 0 && !this.selectedConnectionId) {
       this.selectedConnectionId = conns[0].id;
       await this.loadEntities();
+      await this.loadSecrets();
     }
   }
 
@@ -175,15 +197,15 @@ export class GitopsViewSecrets extends DeesElement {
   }
 
   private async loadSecrets() {
-    if (!this.selectedConnectionId || !this.selectedScopeId) return;
-    await appstate.dataStatePart.dispatchAction(appstate.fetchSecretsAction, {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchAllSecretsAction, {
       connectionId: this.selectedConnectionId,
       scope: this.selectedScope,
-      scopeId: this.selectedScopeId,
     });
   }
 
   private async addSecret() {
+    if (this.selectedScopeId === '__all__') return;
     await plugins.deesCatalog.DeesModal.createAndShow({
       heading: 'Add Secret',
       content: html`
@@ -234,8 +256,8 @@ export class GitopsViewSecrets extends DeesElement {
             const input = modal.shadowRoot.querySelector('dees-input-text');
             await appstate.dataStatePart.dispatchAction(appstate.updateSecretAction, {
               connectionId: this.selectedConnectionId,
-              scope: this.selectedScope,
-              scopeId: this.selectedScopeId,
+              scope: item.scope,
+              scopeId: item.scopeId,
               key: item.key,
               value: input?.value || '',
             });