UI Secrets Sync: Destinations adapter add LIST

ui/app/adapters/sync/destination.js

@@ -13,8 +13,13 @@ export default class SyncDestinationAdapter extends ApplicationAdapter {
   }
 
   // id is the destination name
-  // modelName is sync/destination/<destination type>
+  // modelName is sync/destinations/:type
   urlForFindRecord(id, modelName) {
     return `${this._baseUrl()}/${modelName}/${id}`;
   }
+
+  query() {
+    const url = `${this._baseUrl()}/sync/destinations`;
+    return this.ajax(url, 'GET', { data: { list: true } });
+  }
 }

ui/app/serializers/sync/destination.js

@@ -6,14 +6,37 @@
 import ApplicationSerializer from 'vault/serializers/application';
 
 export default class SyncDestinationSerializer extends ApplicationSerializer {
-  primaryKey = 'name';
+  // overwrite application serializer's normalizeResponse method
+  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
+    let transformedPayload = payload;
 
-  normalizeItems(payload) {
-    if (payload.data?.connection_details) {
-      const data = { ...payload.data, ...payload.data.connection_details };
-      delete data.connection_details;
-      return data;
+    if (requestType === 'findRecord') {
+      transformedPayload = this._normalizeFindRecord(payload);
     }
-    return super.normalizeItems(...arguments);
+    return super.normalizeResponse(store, primaryModelClass, transformedPayload, id, requestType);
+  }
+
+  extractLazyPaginatedData(payload) {
+    const transformedPayload = [];
+    // loop through each destination type (keys in key_info)
+    for (const type in payload.data.key_info) {
+      // iterate through each type's destination names
+      payload.data.key_info[type].forEach((name) => {
+        const id = `${type}/${name}`;
+        // create object with destination's id and attributes, add to payload
+        transformedPayload.pushObject({ id, name, type });
+      });
+    }
+    return transformedPayload;
+  }
+
+  // generates id and spreads connection_details object into data
+  _normalizeFindRecord(payload) {
+    if (payload?.data?.connection_details) {
+      const { type, name, connection_details } = payload.data;
+      const id = `${type}/${name}`;
+      return { data: { id, type, name, ...connection_details } };
+    }
+    return payload;
   }
 }

ui/docs/client-pagination.md

@@ -43,7 +43,7 @@ The `size` param defaults to the default page size set in [the app config](../co
 
 ### Serializing
 
-In order to interrupt the regular serialization when using `lazyPaginatedData`, define `extractLazyPaginatedData` on the modelType's serializer. This will be called with the raw response before being cached on the store.
+In order to interrupt the regular serialization when using `lazyPaginatedData`, define `extractLazyPaginatedData` on the modelType's serializer. This will be called with the raw response before being cached on the store. `extractLazyPaginatedData` should return an array of objects.
 
 ## Gotchas
 

ui/lib/sync/addon/components/secrets/page/overview.hbs

@@ -4,5 +4,9 @@
 ~}}
 
 <SyncHeader @title="Secrets sync" />
-{{! TODO if no destinations CTA otherwise LIST view }}
-<Secrets::LandingCta />
+
+{{#if @shouldRenderOverview}}
+  {{! overview cards here }}
+{{else}}
+  <Secrets::LandingCta />
+{{/if}}

ui/lib/sync/addon/routes/secrets.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+import type StoreService from 'vault/services/store';
+
+export default class SyncSecretsRoute extends Route {
+  @service declare readonly store: StoreService;
+
+  async model() {
+    return this.store.query('sync/destination', {}).catch(() => []);
+  }
+}

ui/lib/sync/addon/routes/secrets/destinations.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+import type StoreService from 'vault/services/store';
+
+interface SyncSecretsDestinationsRouteParams {
+  page: string;
+  pageFilter: string;
+}
+
+export default class SyncSecretsDestinationsRoute extends Route {
+  @service declare readonly store: StoreService;
+
+  async model(params: SyncSecretsDestinationsRouteParams) {
+    return this.store.lazyPaginatedQuery('sync/destination', {
+      page: Number(params.page) || 1,
+      pageFilter: params.pageFilter,
+      responsePath: 'data.keys',
+    });
+  }
+}

ui/lib/sync/addon/templates/secrets/overview.hbs

@@ -1 +1,6 @@
-<Secrets::Page::Overview />
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: BUSL-1.1
+~}}
+
+<Secrets::Page::Overview @shouldRenderOverview={{this.model.length}} />

ui/mirage/handlers/sync.js

@@ -24,6 +24,7 @@ export default function (server) {
           }
           return keyInfo;
         }, {}),
+        keys: records.map((r) => r.type),
       },
     };
   });
@@ -33,6 +34,7 @@ export default function (server) {
     if (record) {
       delete record.type;
       delete record.name;
+      delete record.id;
       return {
         data: {
           connection_details: record,

ui/tests/unit/adapters/sync/destinations-test.js

@@ -8,7 +8,7 @@ import { module, test } from 'qunit';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { destinationTypes } from 'vault/helpers/sync-destinations';
 
-module('Unit | Adapter | sync/destinations', function (hooks) {
+module('Unit | Adapter | sync | destination', function (hooks) {
   setupTest(hooks);
   setupMirage(hooks);
 
@@ -34,4 +34,23 @@ module('Unit | Adapter | sync/destinations', function (hooks) {
       this.store.findRecord(`sync/destinations/${type}`, 'my-dest');
     }
   });
+
+  test('it calls the correct endpoint for query', async function (assert) {
+    assert.expect(2);
+
+    this.server.get('sys/sync/destinations', (schema, req) => {
+      assert.propEqual(req.queryParams, { list: 'true' }, 'it passes { list: true } as query params');
+      assert.ok(true, `request is made to LIST sys/sync/destinations endpoint on query`);
+      return {
+        data: {
+          key_info: {
+            'aws-sm': ['my-dest-1'],
+            gh: ['my-dest-1'],
+          },
+          keys: ['aws-sm', 'gh'],
+        },
+      };
+    });
+    this.store.query('sync/destination', {});
+  });
 });

ui/tests/unit/serializers/sync/destinations-test.js

@@ -8,15 +8,15 @@ import { setupTest } from 'vault/tests/helpers';
 import { setupMirage } from 'ember-cli-mirage/test-support';
 import { destinationTypes } from 'vault/helpers/sync-destinations';
 
-module('Unit | Serializer | sync/destination', function (hooks) {
+module('Unit | Serializer | sync | destination', function (hooks) {
   setupTest(hooks);
   setupMirage(hooks);
 
   hooks.beforeEach(function () {
     this.serializer = this.owner.lookup('serializer:sync/destination');
   });
 
-  test('it normalizes the payload from the server', async function (assert) {
+  test('it normalizes findRecord payload from the server', async function (assert) {
     const types = destinationTypes();
     assert.expect(types.length);
 
@@ -26,13 +26,45 @@ module('Unit | Serializer | sync/destination', function (hooks) {
         destinationType
       );
       const serverData = { request_id: id, data: { name, type, connection_details } };
-      const normalized = this.serializer.normalizeItems(serverData);
-      const expected = { type, name, ...connection_details };
+
+      const normalized = this.serializer._normalizeFindRecord(serverData);
+      const expected = { data: { id: `${type}/${name}`, type, name, ...connection_details } };
       assert.propEqual(
         normalized,
         expected,
-        `connection details key is removed and params are added to ${destinationType} data object`
+        `generates id and adds connection details to ${destinationType} data object`
       );
     }
   });
+
+  test('it normalizes query payload from the server', async function (assert) {
+    assert.expect(1);
+    // hardcoded from docs https://developer.hashicorp.com/vault/api-docs/system/secrets-sync#sample-response
+    // destinations intentionally named the same to test no id naming collision happens
+    const serverData = {
+      data: {
+        key_info: {
+          'aws-sm': ['my-dest-1'],
+          gh: ['my-dest-1'],
+        },
+        keys: ['aws-sm', 'gh'],
+      },
+    };
+
+    const normalized = this.serializer.extractLazyPaginatedData(serverData);
+    const expected = [
+      {
+        id: 'aws-sm/my-dest-1',
+        name: 'my-dest-1',
+        type: 'aws-sm',
+      },
+      {
+        id: 'gh/my-dest-1',
+        name: 'my-dest-1',
+        type: 'gh',
+      },
+    ];
+
+    assert.propEqual(normalized, expected, 'payload is array of objects with concatenated type/name as id');
+  });
 });