@truedat/dd 6.8.1 → 6.8.3

package/src/components/__tests__/__snapshots__/PendingStructureNotes.spec.js.snap

@@ -15,111 +15,193 @@ exports[`<PendingStructureNotes /> matches the latest snapshot 1`] = `
       <div
         class="content"
       >
-        Pending Notes
+        Header
         <div
           class="sub header"
         >
-          Structure notes pending some action
+          Subheader
         </div>
       </div>
     </h2>
-    <form
-      class="ui loading form"
+    <div
+      class="ui action left icon input"
     >
-      <h5
-        class="ui header"
-      >
-        Filters
-      </h5>
+      <i
+        aria-hidden="true"
+        class="search link icon"
+      />
+      <input
+        placeholder="Search..."
+        type="text"
+        value=""
+      />
       <div
-        class="field subscriptions-checkbox-filters"
+        aria-busy="false"
+        aria-disabled="false"
+        aria-expanded="false"
+        class="ui button floating labeled scrolling dropdown icon"
+        role="listbox"
+        tabindex="0"
       >
-        <label>
-          Status
-        </label>
         <div
-          class="ui checked checkbox"
+          aria-atomic="true"
+          aria-live="polite"
+          class="divider text"
+          role="alert"
         >
-          <input
-            checked=""
-            class="hidden"
-            readonly=""
-            tabindex="0"
-            type="checkbox"
-            value=""
-          />
-          <label>
-            Pending approval
-          </label>
+          Filters
         </div>
+        <i
+          aria-hidden="true"
+          class="filter icon"
+        />
         <div
-          class="ui checked checkbox"
+          class="menu transition"
         >
-          <input
-            checked=""
-            class="hidden"
-            readonly=""
-            tabindex="0"
-            type="checkbox"
-            value=""
-          />
-          <label>
-            Draft
-          </label>
+          <div
+            class="item"
+            role="option"
+          >
+            <em>
+              (reset filters)
+            </em>
+          </div>
         </div>
+      </div>
+    </div>
+    <div
+      class="selectedFilters"
+    />
+    <div
+      class="dimmable"
+    >
+      <div
+        class="ui inverted dimmer"
+        style=""
+      >
         <div
-          class="ui checked checkbox"
+          class="content"
         >
-          <input
-            checked=""
-            class="hidden"
-            readonly=""
-            tabindex="0"
-            type="checkbox"
-            value=""
+          <div
+            class="ui loader"
           />
-          <label>
-            Rejected
-          </label>
         </div>
       </div>
       <div
-        class="field"
+        class="ui label structures-notes-label-results"
       >
-        <label>
-          System
-        </label>
-        <div
-          aria-expanded="false"
-          aria-multiselectable="true"
-          class="ui multiple selection dropdown"
-          role="listbox"
-          tabindex="0"
+        0 structures found
+      </div>
+      <table
+        class="ui selectable sortable table"
+      >
+        <thead
+          class=""
         >
-          <i
-            aria-hidden="true"
-            class="dropdown icon"
-          />
-          <div
-            class="menu transition"
+          <tr
+            class=""
           >
-            <div
-              aria-checked="false"
-              aria-selected="true"
-              class="selected item"
-              role="option"
-              style="pointer-events: all;"
+            <th
+              class="two wide"
+            >
+              Name
+            </th>
+            <th
+              class="one wide"
+            >
+              Status
+            </th>
+            <th
+              class="one wide"
+            >
+              System
+            </th>
+            <th
+              class="one wide disabled"
+            >
+              Domain
+            </th>
+            <th
+              class="one wide disabled"
+            >
+              Path
+            </th>
+          </tr>
+        </thead>
+        <tbody
+          class=""
+        >
+          <tr
+            class=""
+          >
+            <td
+              class="structure-cell-overflow"
+              title="bar"
+            >
+              bar
+            </td>
+            <td
+              class=""
+            >
+              Draft
+            </td>
+            <td
+              class=""
+            >
+              bar system
+            </td>
+            <td
+              class=""
+            >
+              bar domain
+            </td>
+            <td
+              class=""
             >
               <span
-                class="text"
+                title="bar rute"
               >
-                some system
+                bar rute
               </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </form>
+            </td>
+          </tr>
+          <tr
+            class=""
+          >
+            <td
+              class="structure-cell-overflow"
+              title="foo"
+            >
+              foo
+            </td>
+            <td
+              class=""
+            >
+              Rejected
+            </td>
+            <td
+              class=""
+            >
+              foo system
+            </td>
+            <td
+              class=""
+            >
+              foo domain 1, foo domain 2
+            </td>
+            <td
+              class=""
+            >
+              <span
+                title="foo rute › other route"
+              >
+                foo rute › other route
+              </span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 </div>
 `;

package/src/components/__tests__/__snapshots__/PendingStructureNotesLabelResults.spec.js.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PendingStructureNotesLabelResults /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    class="ui label structures-notes-label-results"
+  >
+    22 structures found
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/PendingStructureNotesPagination.spec.js.snap

@@ -0,0 +1,96 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<PendingStructureNotesPagination /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-label="Pagination Navigation"
+    class="ui pagination menu"
+    role="navigation"
+  >
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="First item"
+      class="item"
+      tabindex="0"
+      type="firstItem"
+      value="1"
+    >
+      «
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Previous item"
+      class="item"
+      tabindex="0"
+      type="prevItem"
+      value="1"
+    >
+      ⟨
+    </a>
+    <a
+      aria-current="true"
+      aria-disabled="false"
+      class="active item"
+      tabindex="0"
+      type="pageItem"
+      value="1"
+    >
+      1
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="2"
+    >
+      2
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="3"
+    >
+      3
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      class="item"
+      tabindex="0"
+      type="pageItem"
+      value="4"
+    >
+      4
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Next item"
+      class="item"
+      tabindex="0"
+      type="nextItem"
+      value="2"
+    >
+      ⟩
+    </a>
+    <a
+      aria-current="false"
+      aria-disabled="false"
+      aria-label="Last item"
+      class="item"
+      tabindex="0"
+      type="lastItem"
+      value="4"
+    >
+      »
+    </a>
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/PendingStructureNotesTable.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`<PendingStructureNotesTable /> matches the latest snapshot 1`] = `
 <div>
   <table
-    class="ui selectable table"
+    class="ui selectable sortable table"
   >
     <thead
       class=""
@@ -12,27 +12,27 @@ exports[`<PendingStructureNotesTable /> matches the latest snapshot 1`] = `
         class=""
       >
         <th
-          class=""
+          class="two wide"
         >
-          Structure
+          Name
         </th>
         <th
-          class=""
+          class="one wide"
         >
           Status
         </th>
         <th
-          class=""
+          class="one wide"
         >
           System
         </th>
         <th
-          class=""
+          class="one wide disabled"
         >
-          Domains
+          Domain
         </th>
         <th
-          class=""
+          class="one wide disabled"
         >
           Path
         </th>
@@ -45,8 +45,11 @@ exports[`<PendingStructureNotesTable /> matches the latest snapshot 1`] = `
         class=""
       >
         <td
-          class=""
-        />
+          class="structure-cell-overflow"
+          title="bar"
+        >
+          bar
+        </td>
         <td
           class=""
         >
@@ -54,24 +57,33 @@ exports[`<PendingStructureNotesTable /> matches the latest snapshot 1`] = `
         </td>
         <td
           class=""
-        />
+        >
+          bar system
+        </td>
         <td
           class=""
         >
-          
+          bar domain
         </td>
         <td
           class=""
         >
-          
+          <span
+            title="bar rute"
+          >
+            bar rute
+          </span>
         </td>
       </tr>
       <tr
         class=""
       >
         <td
-          class=""
-        />
+          class="structure-cell-overflow"
+          title="foo"
+        >
+          foo
+        </td>
         <td
           class=""
         >
@@ -79,16 +91,22 @@ exports[`<PendingStructureNotesTable /> matches the latest snapshot 1`] = `
         </td>
         <td
           class=""
-        />
+        >
+          foo system
+        </td>
         <td
           class=""
         >
-          
+          foo domain 1, foo domain 2
         </td>
         <td
           class=""
         >
-          
+          <span
+            title="foo rute › other route"
+          >
+            foo rute › other route
+          </span>
         </td>
       </tr>
     </tbody>

package/src/selectors/__tests__/getSortedStructureNotes.spec.js

@@ -9,7 +9,7 @@ const sn1 = {
   data_structure_id: 1,
   version: 1,
   status: "versioned",
-  df_content: {
+  dynamic_content: {
     c1: { value: 1, origin: "user" },
     c2: { value: 2, origin: "user" },
   },
@@ -19,7 +19,7 @@ const sn2 = {
   data_structure_id: 1,
   version: 2,
   status: "published",
-  df_content: {
+  dynamic_content: {
     c1: { value: 2, origin: "user" },
     c2: { value: 4, origin: "user" },
   },
@@ -29,7 +29,7 @@ const sn3 = {
   data_structure_id: 1,
   version: 3,
   status: "draft",
-  df_content: {
+  dynamic_content: {
     c1: { value: 3, origin: "user" },
     c2: { value: 6, origin: "user" },
   },
@@ -44,7 +44,7 @@ describe("selectors: getSortedStructureNotes", () => {
 
   const activeStructureNotes = [sn3, sn2];
   const versionedStructureNotes = [sn1];
-  const latestDfContent = sn3.df_content;
+  const latestDfContent = sn3.dynamic_content;
 
   it("getActiveStructureNotes", () => {
     expect(getActiveStructureNotes(state)).toEqual(activeStructureNotes);

package/src/selectors/getSortedStructureNotes.js

@@ -15,5 +15,9 @@ export const getVersionedStructureNotes = createSelector(
 
 export const getLatestDfContent = createSelector(
   _.prop("structureNotes.structureNotes"),
-  _.flow(_.orderBy(["version"], ["desc"]), _.head, _.getOr({}, "df_content"))
+  _.flow(
+    _.orderBy(["version"], ["desc"]),
+    _.head,
+    _.getOr({}, "dynamic_content")
+  )
 );

package/src/selectors/index.js

@@ -40,6 +40,10 @@ export {
   defaultStructureFieldColumns,
 } from "./getStructureFieldColumns";
 export { getStructureParent } from "./getStructureParent";
+export {
+  getStructureNotesColumnsSelector,
+  defaultStructureNoteColumns,
+} from "./structureNotesColumnsSelector";
 export { getStructuresFields } from "./getStructuresFields";
 export { getStructureSortingCriteria } from "./getStructureSortingCriteria";
 export { getStructureUpdatedAt } from "./getStructureUpdatedAt";

package/src/selectors/structureNotesColumnsSelector.js

@@ -0,0 +1,65 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { createSelector } from "reselect";
+import { FormattedMessage } from "react-intl";
+
+const translateDecorator = (id) =>
+  id ? <FormattedMessage id={id} defaultMessage={id} /> : null;
+
+const DomainDecorator = (domains) =>
+  _.flow(_.map("name"), _.join(", "))(domains);
+
+DomainDecorator.propTypes = {
+  domains: PropTypes.array,
+};
+
+const PathDecorator = (path) => (
+  <span title={_.join(" › ")(path)}>
+    {_.flow(_.join(" › "), _.truncate({ length: 90 }))(path)}
+  </span>
+);
+PathDecorator.propTypes = {
+  path: PropTypes.string,
+};
+
+export const defaultStructureNoteColumns = [
+  {
+    name: "name",
+    sort: { name: "name.sort" },
+    width: 2,
+  },
+  {
+    name: "status",
+    fieldSelector: ({ non_published_note: { status: status } }) =>
+      translateDecorator(`pendingStructureNotes.status.${status}`),
+    sort: { name: "non_published_note.status.sort" },
+    width: 1,
+  },
+
+  {
+    name: "system",
+    fieldSelector: _.path("system.name"),
+    sort: { name: "system.name.sort" },
+    width: 1,
+  },
+  {
+    name: "domain",
+    fieldSelector: _.pathOr([], "domains"),
+    fieldDecorator: DomainDecorator,
+    width: 1,
+  },
+  {
+    name: "path",
+    fieldSelector: _.path("path"),
+    fieldDecorator: PathDecorator,
+    width: 1,
+  },
+];
+
+const getColumns = (state) => state.structuresNotesColumns;
+
+export const getStructureNotesColumnsSelector = createSelector(
+  getColumns,
+  _.defaultTo(defaultStructureNoteColumns)
+);