From c6a310a827e6472df058c1bc0a8d71a86d537f9b Mon Sep 17 00:00:00 2001
From: Eugenia <32821331+jenny-s51@users.noreply.github.com>
Date: Fri, 4 Sep 2020 14:16:11 -0400
Subject: [PATCH] add realm selector (#48)

* WIP realm selector

* realm dropdown is working

* address PR feedback

* address PR feedback and fix conflicts

* fix formatting

* fix path

* address PR feedback from Stan

* update snapshot tests

* fix formatting

* change minwidth
---
 public/index.css                              |   4 +
 src/PageNav.tsx                               |   4 +-
 .../realm-selector/RealmSelector.test.tsx     |  33 +
 .../realm-selector/RealmSelector.tsx          |  51 +-
 .../__snapshots__/RealmSelector.test.tsx.snap | 587 ++++++++++++++++++
 .../realm-selector/realm-selector.module.css  |  15 +
 src/models/Realm.ts                           |   4 +
 7 files changed, 684 insertions(+), 14 deletions(-)
 create mode 100644 src/components/realm-selector/RealmSelector.test.tsx
 create mode 100644 src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
 create mode 100644 src/models/Realm.ts

diff --git a/public/index.css b/public/index.css
index a854244e74..e7b7625e4d 100644
--- a/public/index.css
+++ b/public/index.css
@@ -2,4 +2,8 @@
 
 .pf-c-brand {
   height: 35px;
+}
+
+button.pf-c-button.pf-m-primary.realmSelectButton {
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/PageNav.tsx b/src/PageNav.tsx
index 92fc77a27c..dd95d9fb45 100644
--- a/src/PageNav.tsx
+++ b/src/PageNav.tsx
@@ -2,13 +2,13 @@ import React from "react";
 import { Nav, NavItem, NavList, PageSidebar } from "@patternfly/react-core";
 import { RealmSelector } from "./components/realm-selector/RealmSelector";
 
-export const PageNav = () => {
+export const PageNav: React.FunctionComponent = () => {
   return (
     <PageSidebar
       nav={
         <Nav>
           <NavList>
-            <RealmSelector realm="Master" realmList={["Photoz"]} />
+            <RealmSelector />
             <NavItem id="default-link1" to="/default-link1" itemId={0}>
               Link 1
             </NavItem>
diff --git a/src/components/realm-selector/RealmSelector.test.tsx b/src/components/realm-selector/RealmSelector.test.tsx
new file mode 100644
index 0000000000..f3f8256d61
--- /dev/null
+++ b/src/components/realm-selector/RealmSelector.test.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+import { Button, AlertVariant } from "@patternfly/react-core";
+import { mount } from "enzyme";
+import EnzymeToJson from "enzyme-to-json";
+import { act } from "react-dom/test-utils";
+
+import { RealmSelector } from "./RealmSelector";
+
+const WithButton = () => {
+  const [add, alerts, hide] = useAlerts();
+  return (
+    <>
+      <AlertPanel alerts={alerts} onCloseAlert={hide} />
+      <Button onClick={() => add("Hello", AlertVariant.default)}>Add</Button>
+    </>
+  );
+};
+
+it("renders realm selector", () => {
+  const tree = mount(<RealmSelector />);
+  const button = tree.find("button");
+  expect(button).not.toBeNull();
+
+  act(() => {
+    button!.simulate("click");
+  });
+  expect(EnzymeToJson(tree)).toMatchSnapshot();
+
+  act(() => {
+    jest.runAllTimers();
+  });
+  expect(EnzymeToJson(tree)).toMatchSnapshot();
+});
diff --git a/src/components/realm-selector/RealmSelector.tsx b/src/components/realm-selector/RealmSelector.tsx
index eed8b12cfa..f7f76e7d41 100644
--- a/src/components/realm-selector/RealmSelector.tsx
+++ b/src/components/realm-selector/RealmSelector.tsx
@@ -1,27 +1,48 @@
-import React, { useState } from "react";
+import React, { useState, useContext, useEffect } from "react";
 import { useHistory } from "react-router-dom";
+import { Realm } from "../../models/Realm";
+
 import {
   Dropdown,
   DropdownToggle,
   DropdownItem,
   Button,
+  Divider,
 } from "@patternfly/react-core";
 
 import style from "./realm-selector.module.css";
+import { HttpClientContext } from "../../http-service/HttpClientContext";
 
-type RealmSelectorProps = {
-  realm: string;
-  realmList: string[];
-};
-
-export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
+export const RealmSelector = () => {
   const [open, setOpen] = useState(false);
   const history = useHistory();
-  const dropdownItems = realmList.map((r) => (
-    <DropdownItem component="a" href="/" key={r}>
-      {r}
+  const httpClient = useContext(HttpClientContext);
+  const [realms, setRealms] = useState([] as Realm[]);
+  const [currentRealm, setCurrentRealm] = useState("Master");
+
+  const getRealms = async () => {
+    return await httpClient
+      ?.doGet("/admin/realms")
+      .then((r) => r.data as Realm[]);
+  };
+
+  useEffect(() => {
+    getRealms().then((result) => {
+      setRealms(result) !== undefined ? result : [];
+    });
+  }, []);
+
+  const dropdownItems = realms.map((r) => (
+    <DropdownItem
+      component="a"
+      href={"/#/realms/" + r.id}
+      key={r.id}
+      onClick={() => setCurrentRealm(r.realm)}
+    >
+      {r.realm.charAt(0).toUpperCase() + r.realm.slice(1)}
     </DropdownItem>
   ));
+
   return (
     <Dropdown
       id="realm-select"
@@ -33,13 +54,19 @@ export const RealmSelector = ({ realm, realmList }: RealmSelectorProps) => {
           onToggle={() => setOpen(!open)}
           className={style.toggle}
         >
-          {realm}
+          {currentRealm}
         </DropdownToggle>
       }
       dropdownItems={[
         ...dropdownItems,
+        <Divider key={1} />,
         <DropdownItem component="div" key="add">
-          <Button onClick={() => history.push("/add-realm")}>Add Realm</Button>
+          <Button
+            className="realmSelectButton"
+            onClick={() => history.push("/add-realm")}
+          >
+            Create Realm
+          </Button>
         </DropdownItem>,
       ]}
     />
diff --git a/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap b/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
new file mode 100644
index 0000000000..364c4c2284
--- /dev/null
+++ b/src/components/realm-selector/__snapshots__/RealmSelector.test.tsx.snap
@@ -0,0 +1,587 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders realm selector 1`] = `
+<RealmSelector>
+  <Dropdown
+    dropdownItems={
+      Array [
+        <Divider />,
+        <DropdownItem
+          component="div"
+        >
+          <Button
+            className="realmSelectButton"
+            onClick={[Function]}
+          >
+            Create Realm
+          </Button>
+        </DropdownItem>,
+      ]
+    }
+    id="realm-select"
+    isOpen={false}
+    toggle={
+      <DropdownToggle
+        id="realm-select-toggle"
+        onToggle={[Function]}
+      >
+        Master
+      </DropdownToggle>
+    }
+  >
+    <DropdownWithContext
+      autoFocus={true}
+      className=""
+      direction="down"
+      dropdownItems={
+        Array [
+          <Divider />,
+          <DropdownItem
+            component="div"
+          >
+            <Button
+              className="realmSelectButton"
+              onClick={[Function]}
+            >
+              Create Realm
+            </Button>
+          </DropdownItem>,
+        ]
+      }
+      id="realm-select"
+      isGrouped={false}
+      isOpen={false}
+      isPlain={false}
+      menuAppendTo="inline"
+      onSelect={[Function]}
+      position="left"
+      toggle={
+        <DropdownToggle
+          id="realm-select-toggle"
+          onToggle={[Function]}
+        >
+          Master
+        </DropdownToggle>
+      }
+    >
+      <div
+        className="pf-c-dropdown"
+        data-ouia-component-id={0}
+        data-ouia-component-type="PF4/Dropdown"
+        data-ouia-safe={true}
+        id="realm-select"
+      >
+        <DropdownToggle
+          aria-haspopup={true}
+          getMenuRef={[Function]}
+          id="realm-select-toggle"
+          isOpen={false}
+          isPlain={false}
+          key=".0"
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={
+            Object {
+              "current": <div
+                class="pf-c-dropdown pf-m-expanded"
+                data-ouia-component-id="1"
+                data-ouia-component-type="PF4/Dropdown"
+                data-ouia-safe="true"
+                id="realm-select"
+              >
+                <button
+                  aria-expanded="true"
+                  aria-haspopup="true"
+                  class="pf-c-dropdown__toggle"
+                  id="realm-select-toggle"
+                  type="button"
+                >
+                  <span
+                    class="pf-c-dropdown__toggle-text"
+                  >
+                    Master
+                  </span>
+                  <span
+                    class="pf-c-dropdown__toggle-icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        transform=""
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <ul
+                  aria-labelledby="realm-select-toggle"
+                  class="pf-c-dropdown__menu"
+                  role="menu"
+                >
+                  <hr
+                    class="pf-c-divider"
+                    index="0"
+                  />
+                  <li
+                    role="menuitem"
+                  >
+                    <div
+                      class="pf-c-dropdown__menu-item"
+                      tabindex="-1"
+                    >
+                      <button
+                        aria-disabled="false"
+                        class="pf-c-button pf-m-primary realmSelectButton"
+                        data-ouia-component-id="2"
+                        data-ouia-component-type="PF4/Button"
+                        data-ouia-safe="true"
+                        type="button"
+                      >
+                        Create Realm
+                      </button>
+                    </div>
+                  </li>
+                </ul>
+              </div>,
+            }
+          }
+        >
+          <Toggle
+            aria-haspopup={true}
+            bubbleEvent={false}
+            className=""
+            getMenuRef={[Function]}
+            id="realm-select-toggle"
+            isActive={false}
+            isDisabled={false}
+            isOpen={false}
+            isPlain={false}
+            isPrimary={false}
+            isSplitButton={false}
+            onEnter={[Function]}
+            onToggle={[Function]}
+            parentRef={
+              Object {
+                "current": <div
+                  class="pf-c-dropdown pf-m-expanded"
+                  data-ouia-component-id="1"
+                  data-ouia-component-type="PF4/Dropdown"
+                  data-ouia-safe="true"
+                  id="realm-select"
+                >
+                  <button
+                    aria-expanded="true"
+                    aria-haspopup="true"
+                    class="pf-c-dropdown__toggle"
+                    id="realm-select-toggle"
+                    type="button"
+                  >
+                    <span
+                      class="pf-c-dropdown__toggle-text"
+                    >
+                      Master
+                    </span>
+                    <span
+                      class="pf-c-dropdown__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                          transform=""
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <ul
+                    aria-labelledby="realm-select-toggle"
+                    class="pf-c-dropdown__menu"
+                    role="menu"
+                  >
+                    <hr
+                      class="pf-c-divider"
+                      index="0"
+                    />
+                    <li
+                      role="menuitem"
+                    >
+                      <div
+                        class="pf-c-dropdown__menu-item"
+                        tabindex="-1"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="pf-c-button pf-m-primary realmSelectButton"
+                          data-ouia-component-id="2"
+                          data-ouia-component-type="PF4/Button"
+                          data-ouia-safe="true"
+                          type="button"
+                        >
+                          Create Realm
+                        </button>
+                      </div>
+                    </li>
+                  </ul>
+                </div>,
+              }
+            }
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup={true}
+              className="pf-c-dropdown__toggle"
+              disabled={false}
+              id="realm-select-toggle"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <span
+                className="pf-c-dropdown__toggle-text"
+              >
+                Master
+              </span>
+              <span
+                className="pf-c-dropdown__toggle-icon"
+              >
+                <CaretDownIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      transform=""
+                    />
+                  </svg>
+                </CaretDownIcon>
+              </span>
+            </button>
+          </Toggle>
+        </DropdownToggle>
+      </div>
+    </DropdownWithContext>
+  </Dropdown>
+</RealmSelector>
+`;
+
+exports[`renders realm selector 2`] = `
+<RealmSelector>
+  <Dropdown
+    dropdownItems={
+      Array [
+        <Divider />,
+        <DropdownItem
+          component="div"
+        >
+          <Button
+            className="realmSelectButton"
+            onClick={[Function]}
+          >
+            Create Realm
+          </Button>
+        </DropdownItem>,
+      ]
+    }
+    id="realm-select"
+    isOpen={false}
+    toggle={
+      <DropdownToggle
+        id="realm-select-toggle"
+        onToggle={[Function]}
+      >
+        Master
+      </DropdownToggle>
+    }
+  >
+    <DropdownWithContext
+      autoFocus={true}
+      className=""
+      direction="down"
+      dropdownItems={
+        Array [
+          <Divider />,
+          <DropdownItem
+            component="div"
+          >
+            <Button
+              className="realmSelectButton"
+              onClick={[Function]}
+            >
+              Create Realm
+            </Button>
+          </DropdownItem>,
+        ]
+      }
+      id="realm-select"
+      isGrouped={false}
+      isOpen={false}
+      isPlain={false}
+      menuAppendTo="inline"
+      onSelect={[Function]}
+      position="left"
+      toggle={
+        <DropdownToggle
+          id="realm-select-toggle"
+          onToggle={[Function]}
+        >
+          Master
+        </DropdownToggle>
+      }
+    >
+      <div
+        className="pf-c-dropdown"
+        data-ouia-component-id={0}
+        data-ouia-component-type="PF4/Dropdown"
+        data-ouia-safe={true}
+        id="realm-select"
+      >
+        <DropdownToggle
+          aria-haspopup={true}
+          getMenuRef={[Function]}
+          id="realm-select-toggle"
+          isOpen={false}
+          isPlain={false}
+          key=".0"
+          onEnter={[Function]}
+          onToggle={[Function]}
+          parentRef={
+            Object {
+              "current": <div
+                class="pf-c-dropdown pf-m-expanded"
+                data-ouia-component-id="1"
+                data-ouia-component-type="PF4/Dropdown"
+                data-ouia-safe="true"
+                id="realm-select"
+              >
+                <button
+                  aria-expanded="true"
+                  aria-haspopup="true"
+                  class="pf-c-dropdown__toggle"
+                  id="realm-select-toggle"
+                  type="button"
+                >
+                  <span
+                    class="pf-c-dropdown__toggle-text"
+                  >
+                    Master
+                  </span>
+                  <span
+                    class="pf-c-dropdown__toggle-icon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 320 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                        transform=""
+                      />
+                    </svg>
+                  </span>
+                </button>
+                <ul
+                  aria-labelledby="realm-select-toggle"
+                  class="pf-c-dropdown__menu"
+                  role="menu"
+                >
+                  <hr
+                    class="pf-c-divider"
+                    index="0"
+                  />
+                  <li
+                    role="menuitem"
+                  >
+                    <div
+                      class="pf-c-dropdown__menu-item"
+                      tabindex="-1"
+                    >
+                      <button
+                        aria-disabled="false"
+                        class="pf-c-button pf-m-primary realmSelectButton"
+                        data-ouia-component-id="2"
+                        data-ouia-component-type="PF4/Button"
+                        data-ouia-safe="true"
+                        type="button"
+                      >
+                        Create Realm
+                      </button>
+                    </div>
+                  </li>
+                </ul>
+              </div>,
+            }
+          }
+        >
+          <Toggle
+            aria-haspopup={true}
+            bubbleEvent={false}
+            className=""
+            getMenuRef={[Function]}
+            id="realm-select-toggle"
+            isActive={false}
+            isDisabled={false}
+            isOpen={false}
+            isPlain={false}
+            isPrimary={false}
+            isSplitButton={false}
+            onEnter={[Function]}
+            onToggle={[Function]}
+            parentRef={
+              Object {
+                "current": <div
+                  class="pf-c-dropdown pf-m-expanded"
+                  data-ouia-component-id="1"
+                  data-ouia-component-type="PF4/Dropdown"
+                  data-ouia-safe="true"
+                  id="realm-select"
+                >
+                  <button
+                    aria-expanded="true"
+                    aria-haspopup="true"
+                    class="pf-c-dropdown__toggle"
+                    id="realm-select-toggle"
+                    type="button"
+                  >
+                    <span
+                      class="pf-c-dropdown__toggle-text"
+                    >
+                      Master
+                    </span>
+                    <span
+                      class="pf-c-dropdown__toggle-icon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        height="1em"
+                        role="img"
+                        style="vertical-align: -0.125em;"
+                        viewBox="0 0 320 512"
+                        width="1em"
+                      >
+                        <path
+                          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                          transform=""
+                        />
+                      </svg>
+                    </span>
+                  </button>
+                  <ul
+                    aria-labelledby="realm-select-toggle"
+                    class="pf-c-dropdown__menu"
+                    role="menu"
+                  >
+                    <hr
+                      class="pf-c-divider"
+                      index="0"
+                    />
+                    <li
+                      role="menuitem"
+                    >
+                      <div
+                        class="pf-c-dropdown__menu-item"
+                        tabindex="-1"
+                      >
+                        <button
+                          aria-disabled="false"
+                          class="pf-c-button pf-m-primary realmSelectButton"
+                          data-ouia-component-id="2"
+                          data-ouia-component-type="PF4/Button"
+                          data-ouia-safe="true"
+                          type="button"
+                        >
+                          Create Realm
+                        </button>
+                      </div>
+                    </li>
+                  </ul>
+                </div>,
+              }
+            }
+          >
+            <button
+              aria-expanded={false}
+              aria-haspopup={true}
+              className="pf-c-dropdown__toggle"
+              disabled={false}
+              id="realm-select-toggle"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              type="button"
+            >
+              <span
+                className="pf-c-dropdown__toggle-text"
+              >
+                Master
+              </span>
+              <span
+                className="pf-c-dropdown__toggle-icon"
+              >
+                <CaretDownIcon
+                  color="currentColor"
+                  noVerticalAlign={false}
+                  size="sm"
+                >
+                  <svg
+                    aria-hidden={true}
+                    aria-labelledby={null}
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style={
+                      Object {
+                        "verticalAlign": "-0.125em",
+                      }
+                    }
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                      transform=""
+                    />
+                  </svg>
+                </CaretDownIcon>
+              </span>
+            </button>
+          </Toggle>
+        </DropdownToggle>
+      </div>
+    </DropdownWithContext>
+  </Dropdown>
+</RealmSelector>
+`;
diff --git a/src/components/realm-selector/realm-selector.module.css b/src/components/realm-selector/realm-selector.module.css
index 6078a5b00d..8ed60c559e 100644
--- a/src/components/realm-selector/realm-selector.module.css
+++ b/src/components/realm-selector/realm-selector.module.css
@@ -1,11 +1,26 @@
 
 .dropdown {
   width: 100%;
+  padding: 32px;
   border-bottom: 1px solid var(--pf-c-nav__link--before--BorderColor);
+
+  outline: 1px solid var(--pf-global--Color--200);
+  outline-offset:-32px;    
+}
+
+.menu {
+    /* setting this to 85% for now */
+    min-width: 85%;
+}
+
+.pf-c-button.pf-m-primary.realmSelectButton {
+  width: 100%;
 }
 
 .toggle {
   color: var(--pf-c-nav__link--m-current--Color);
+  width: 100%;
+  background: var(--pf-global--BackgroundColor--dark-100);
 }
 
 .toggle:focus {
diff --git a/src/models/Realm.ts b/src/models/Realm.ts
new file mode 100644
index 0000000000..53f841b026
--- /dev/null
+++ b/src/models/Realm.ts
@@ -0,0 +1,4 @@
+export interface Realm {
+  id: string;
+  realm: string;
+}