Add count prop to OuiTreeView opensearch-project#934

Signed-off-by: keskami <[email protected]>
keskami · Nov 2, 2023 · f6f6576 · f6f6576
1 parent baead4a
commit f6f6576
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 16 deletions.
diff --git a/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap b/src/components/tree_view/__snapshots__/tree_view.test.tsx.snap
@@ -34,10 +34,28 @@ exports[`OuiTreeView is rendered 1`] = `
             data-ouiicon-type="folderOpen"
           />
         </span>
+      </button>
+      <button
+        class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
+        type="button"
+      >
         <span
-          class="ouiTreeView__nodeLabel"
+          class="ouiFacetButton__content"
         >
-          Item One
+          <span
+            class="ouiFacetButton__text"
+          >
+            <span
+              class="ouiTreeView__nodeLabel"
+            >
+              Item One
+            </span>
+          </span>
+          <span
+            class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
+          >
+            3
+          </span>
         </span>
       </button>
       <div
@@ -67,10 +85,23 @@ exports[`OuiTreeView is rendered 1`] = `
                     data-ouiicon-type="document"
                   />
                 </span>
+              </button>
+              <button
+                class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
+                type="button"
+              >
                 <span
-                  class="ouiTreeView__nodeLabel"
+                  class="ouiFacetButton__content"
                 >
-                  Item A
+                  <span
+                    class="ouiFacetButton__text"
+                  >
+                    <span
+                      class="ouiTreeView__nodeLabel"
+                    >
+                      Item A
+                    </span>
+                  </span>
                 </span>
               </button>
               <div
@@ -94,10 +125,28 @@ exports[`OuiTreeView is rendered 1`] = `
                     data-ouiicon-type="arrowRight"
                   />
                 </span>
+              </button>
+              <button
+                class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
+                type="button"
+              >
                 <span
-                  class="ouiTreeView__nodeLabel"
+                  class="ouiFacetButton__content"
                 >
-                  Item B
+                  <span
+                    class="ouiFacetButton__text"
+                  >
+                    <span
+                      class="ouiTreeView__nodeLabel"
+                    >
+                      Item B
+                    </span>
+                  </span>
+                  <span
+                    class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
+                  >
+                    2
+                  </span>
                 </span>
               </button>
               <div
@@ -121,10 +170,28 @@ exports[`OuiTreeView is rendered 1`] = `
                     data-ouiicon-type="arrowRight"
                   />
                 </span>
+              </button>
+              <button
+                class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
+                type="button"
+              >
                 <span
-                  class="ouiTreeView__nodeLabel"
+                  class="ouiFacetButton__content"
                 >
-                  Item C
+                  <span
+                    class="ouiFacetButton__text"
+                  >
+                    <span
+                      class="ouiTreeView__nodeLabel"
+                    >
+                      Item C
+                    </span>
+                  </span>
+                  <span
+                    class="ouiNotificationBadge ouiNotificationBadge--medium ouiNotificationBadge--subdued ouiFacetButton__quantity"
+                  >
+                    2
+                  </span>
                 </span>
               </button>
               <div
@@ -144,11 +211,23 @@ exports[`OuiTreeView is rendered 1`] = `
         class="ouiTreeView__nodeInner"
         data-test-subj="ouiTreeViewButton-ouiTreeView_generated-id"
         id="item_two"
+      />
+      <button
+        class="ouiFacetButton ouiFacetButton--unSelected ouiTreeView_ouiFacetButton"
+        type="button"
       >
         <span
-          class="ouiTreeView__nodeLabel"
+          class="ouiFacetButton__content"
         >
-          Item Two
+          <span
+            class="ouiFacetButton__text"
+          >
+            <span
+              class="ouiTreeView__nodeLabel"
+            >
+              Item Two
+            </span>
+          </span>
         </span>
       </button>
       <div

diff --git a/src/components/tree_view/tree_view.scss b/src/components/tree_view/tree_view.scss
@@ -55,6 +55,11 @@
 
 }
 
+.ouiTreeView_ouiFacetButton {
+  text-align-last: center;
+  padding: none;
+}
+
 .ouiTreeView__nodeLabel {
   @include ouiTextTruncate;
 }

diff --git a/src/components/tree_view/tree_view.tsx b/src/components/tree_view/tree_view.tsx
@@ -37,6 +37,7 @@ import { OuiScreenReaderOnly } from '../accessibility';
 import { OuiText } from '../text';
 import { keys, htmlIdGenerator } from '../../services';
 import { OuiInnerText } from '../inner_text';
+import { OuiFacetButton } from '../facet';
 
 const OuiTreeViewContext = createContext<string>('');
 
@@ -118,6 +119,8 @@ export type CommonTreeProps = CommonProps &
      * that contain children
      */
     showExpansionArrows?: boolean;
+    /** Number of child components within tree view node
+     */
   };
 
 export type OuiTreeViewProps = Omit<
@@ -307,7 +310,7 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> {
             {items.map((node, index) => {
               const buttonId = node.id;
               const wrappingId = this.treeIdGenerator(buttonId);
-
+              const count = node.children?.length;
               return (
                 <OuiInnerText
                   key={node.id + index}
@@ -389,11 +392,23 @@ export class OuiTreeView extends Component<OuiTreeViewProps, OuiTreeViewState> {
                                 {node.useEmptyIcon && !node.icon ? (
                                   <span className="ouiTreeView__iconPlaceholder" />
                                 ) : null}
-                                <span
-                                  ref={ref}
-                                  className="ouiTreeView__nodeLabel">
-                                  {node.label}
-                                </span>
+                                {count === 0 ? (
+                                  <span
+                                    ref={ref}
+                                    className="ouiTreeView__nodeLabel">
+                                    {node.label}
+                                  </span>
+                                ) : (
+                                  <OuiFacetButton
+                                    quantity={count}
+                                    className="ouiTreeView_ouiFacetButton">
+                                    <span
+                                      ref={ref}
+                                      className="ouiTreeView__nodeLabel">
+                                      {node.label}
+                                    </span>
+                                  </OuiFacetButton>
+                                )}
                               </button>
                               <div
                                 id={wrappingId}