adds a count of datasets in the data systems currently being viewed as a pill in the navigation bar

wherehows-web/app/components/datasets/containers/data-systems-count.ts

@@ -0,0 +1,46 @@
+import Component from '@ember/component';
+import { get, set } from '@ember/object';
+import { task } from 'ember-concurrency';
+import { getUrnParts, isLiUrn } from 'wherehows-web/utils/validators/urn';
+import { readDatasetsCount } from 'wherehows-web/utils/api/datasets/dataset';
+
+export default class DataSystemsCountContainer extends Component {
+  /**
+   * The data system string urn
+   * @type {string}
+   * @memberof DataSystemsCountContainer
+   */
+  urn: string;
+
+  /**
+   * The count of datasets within the data system
+   * @type {number|void}
+   * @memberof DataSystemsCountContainer
+   */
+  count: number | void;
+
+  didInsertElement() {
+    get(this, 'getDataSystemCountTask').perform();
+  }
+
+  didUpdateAttrs() {
+    get(this, 'getDataSystemCountTask').perform();
+  }
+
+  /**
+   * EC task to request data system count
+   * @type {(ComputedProperty<TaskProperty<Promise<number>> & {
+    perform: (a?: {} | undefined) => TaskInstance<Promise<number>>}>)}
+   * @memberof DataSystemsCountContainer
+   */
+  getDataSystemCountTask = task(function*(this: DataSystemsCountContainer): IterableIterator<Promise<number>> {
+    const urn = get(this, 'urn');
+
+    if (isLiUrn(urn)) {
+      const { platform = '', prefix = '' } = getUrnParts(urn);
+      const count = yield readDatasetsCount({ platform, prefix });
+
+      set(this, 'count', count);
+    }
+  });
+}

wherehows-web/app/styles/components/browse-nav/_browse-data-systems.scss

@@ -4,6 +4,19 @@
   // not an ideal solution
   $breadcrumbs-margin-offset: 5px;
   margin-top: item-spacing(5) + $breadcrumbs-margin-offset;
+
+  &__navbar {
+    display: flex;
+    align-items: center;
+
+    &__breadcrumbs {
+      max-width: 95%;
+    }
+
+    &__count {
+      margin: item-spacing(0 4);
+    }
+  }
 }
 
 .data-systems {

wherehows-web/app/styles/components/dataset-property/_all.scss

@@ -2,3 +2,4 @@
 @import 'removed-dataset';
 @import 'contains-personal-data';
 @import 'dataset-pill';
+@import 'data-system-nav-count';

wherehows-web/app/styles/components/dataset-property/_data-system-nav-count.scss

@@ -0,0 +1,6 @@
+.data-system-count-pill {
+  @include pill(get-color(blue5), get-color(white));
+  font-size: item-spacing(4);
+  line-height: item-spacing(5);
+  white-space: nowrap;
+}

wherehows-web/app/templates/browse/entity.hbs

@@ -7,7 +7,19 @@
         {{else}}
           {{#if dataSystemsContainer.requestParams.platform}}
             <section class="data-systems-container">
-              {{datasets/urn-breadcrumbs urn=dataSystemsContainer.urn}}
+              <div class="data-systems-container__navbar">
+                <div class="data-systems-container__navbar__breadcrumbs">
+                  {{datasets/urn-breadcrumbs urn=dataSystemsContainer.urn}}
+                </div>
+
+                <div class="data-systems-container__navbar__count">
+                  {{#datasets/containers/data-systems-count urn=dataSystemsContainer.urn as |countContainer|}}
+                    <span class="data-system-count-pill">
+                      {{pluralize countContainer.count 'dataset'}}
+                    </span>
+                  {{/datasets/containers/data-systems-count}}
+                </div>
+              </div>
 
               {{browser/data-systems nodes=dataSystemsContainer.nodes}}
             </section>

wherehows-web/app/templates/components/datasets/containers/data-systems-count.hbs

@@ -0,0 +1,7 @@
+{{#if getDataSystemCountTask.isRunning}}
+  {{pendulum-ellipsis-animation}}
+{{else}}
+  {{yield (hash
+            count=count
+          )}}
+{{/if}}

wherehows-web/app/utils/validators/urn.ts

@@ -86,6 +86,36 @@ const getFabricFromUrn = (urn: string): Fabric | void => {
   }
 };
 
+/**
+ * Extracts the constituent parts of a datasystem / dataset urn
+ * @param {string} urn
+ * @return {({platform: DatasetPlatform | void; prefix: string | void; fabric: Fabric | void})}
+ */
+const getUrnParts = (
+  urn: string
+): { platform: DatasetPlatform | void; prefix: string | void; fabric: Fabric | void } => {
+  const match = datasetUrnRegexLI.exec(urn);
+  const urnParts = {
+    platform: void 0,
+    prefix: void 0,
+    fabric: void 0
+  };
+
+  if (match) {
+    let [, platform, prefix, fabric] = match;
+    fabric = String(fabric).toUpperCase();
+
+    return {
+      ...urnParts,
+      platform: <DatasetPlatform>platform,
+      prefix,
+      fabric: isDatasetFabric(fabric) ? fabric : void 0
+    };
+  }
+
+  return urnParts;
+};
+
 /**
  * Converts a WH URN format to a LI URN format
  * @param {string} whUrn
@@ -197,6 +227,7 @@ export {
   specialFlowUrnRegex,
   getPlatformFromUrn,
   getFabricFromUrn,
+  getUrnParts,
   convertWhUrnToLiUrn,
   convertWhDatasetPathToLiPath,
   encodeForwardSlash,