Use EntriesList everywhere

app/javascript/src/admin/components/clustering/EntriesList.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import _ from "lodash";
 import { SearchLink } from "./SearchLink";
 
-export const EntriesList = ({ entries, fields, extra }) => {
+export const EntriesList = ({ entries, fields, extraColumn }) => {
   const grouped = _.groupBy(entries, (e) => fields.map((n) => e[n]).join(","));
   const sorted = _.reverse(_.sortBy(_.values(grouped), "length")).map((a) => ({
     count: a.length,
@@ -15,7 +15,7 @@ export const EntriesList = ({ entries, fields, extra }) => {
         {fields.map((field) => (
           <td key={field}>{e[field]}</td>
         ))}
-        <td>{extra && extra(e)}</td>
+        <td>{extraColumn && extraColumn(e)}</td>
         <td>
           <SearchLink e={e} fields={fields} />
         </td>

app/javascript/src/admin/micro-clusters/DisplayMacroClusters.jsx

@@ -4,7 +4,6 @@
 import ScrollIntoViewIfNeeded from "react-scroll-into-view-if-needed";
 import { matchSorter } from "match-sorter";
 
-import { CollectedInksList } from "./CollectedInksList";
 import { SearchLink } from "../components/clustering/SearchLink";
 import { StateContext, DispatchContext } from "./GenericApp";
 import {
@@ -18,6 +17,7 @@
   setInBrandSelector
 } from "../components/clustering/keyDownListener";
 import { useCallback } from "react";
+import { EntriesList } from "../components/clustering/EntriesList";
 
 export const DisplayMacroClusters = ({ afterAssign, assignCluster }) => {
   const dispatch = useContext(DispatchContext);
@@ -239,10 +239,12 @@
           <td colSpan="7">
             <table className="table macro-cluster-collected-inks">
               <tbody>
-                <CollectedInksList
-                  collectedInks={macroCluster.micro_clusters
+                <EntriesList
+                  entries={macroCluster.micro_clusters
                     .map((c) => c.entries)
                     .flat()}
+                  fields={["brand_name", "line_name", "ink_name"]}
+                  extraColumn={extraColumn}
                 />
               </tbody>
             </table>
@@ -252,3 +254,13 @@
     </>
   );
 };
+
+const extraColumn = (ci) => (
+  <div
+    style={{
+      backgroundColor: ci.color,
+      height: "45px",
+      width: "45px"
+    }}
+  />
+);

app/javascript/src/admin/micro-clusters/DisplayMicroCluster.jsx

@@ -2,13 +2,14 @@
 
 import { StateContext } from "./GenericApp";
 import { DisplayMacroClusters } from "./DisplayMacroClusters";
-import { CollectedInksList } from "./CollectedInksList";
 import { CreateRow } from "../components/clustering/CreateRow";
 import { createMacroClusterAndAssign } from "./createMacroClusterAndAssign";
 import { ignoreCluster } from "./ignoreCluster";
+import { EntriesList } from "../components/clustering/EntriesList";
 
 export const DisplayMicroCluster = ({ afterCreate, assignCluster }) => {
   const { activeCluster } = useContext(StateContext);
+  const fields = ["brand_name", "line_name", "ink_name"];
   return (
     <div className="fpc-table fpc-table--full-width fpc-scroll-shadow">
       <table className="table">
@@ -17,11 +18,15 @@
             afterCreate={afterCreate}
             createMacroClusterAndAssign={createMacroClusterAndAssign}
             ignoreCluster={ignoreCluster}
-            fields={["brand_name", "line_name", "ink_name"]}
+            fields={fields}
           />
         </thead>
         <tbody>
-          <CollectedInksList collectedInks={activeCluster.entries} />
+          <EntriesList
+            entries={activeCluster.entries}
+            fields={fields}
+            extraColumn={extraColumn}
+          />
           <tr>
             <td colSpan="8" style={{ backgroundColor: "black" }}></td>
           </tr>
@@ -34,3 +39,13 @@
     </div>
   );
 };
+
+const extraColumn = (ci) => (
+  <div
+    style={{
+      backgroundColor: ci.color,
+      height: "45px",
+      width: "45px"
+    }}
+  />
+);