// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`src/components/shareBoard/shareBoard confirm unlinking linked channel 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-12-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-12-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-12-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-12-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-4-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-4-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-4-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-4-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Copy link 2`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-4-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-4-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-4-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-4-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copied!
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Regenerate token 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-5-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-5-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-5-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-5-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item false"
          >
            Share
          </button>
          <button
            class="tab-item tab-item--active"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Publish to the web
                </div>
                <div
                  class="text-light"
                >
                  Publish and share a read-only link with everyone on the web.
                </div>
              </div>
              <div>
                <div
                  class="Switch override-main size--medium on"
                >
                  <div
                    class="octo-switch-inner"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/shared/1/1?r=anotherToken"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/shared/1/1?r=anotherToken
              </a>
              <div
                class="octo-tooltip tooltip-top"
                data-tooltip="Regenerate token"
              >
                <button
                  aria-label="Regenerate token"
                  title="Regenerate token"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-refresh"
                  />
                </button>
              </div>
            </div>
            <button
              title="Copy public link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-10-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-10-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-10-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-10-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Select 2`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-10-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              >
                <span
                  id="aria-selection"
                />
                <span
                  id="aria-focused"
                />
                <span
                  id="aria-results"
                >
                  8 results available.
                </span>
                <span
                  id="aria-guidance"
                >
                  Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
                </span>
              </span>
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-10-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant="react-select-10-option-0-0"
                      aria-autocomplete="list"
                      aria-controls="react-select-10-listbox"
                      aria-describedby="react-select-10-placeholder"
                      aria-expanded="true"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-10-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
              <div
                class=" css-45h7mv-menu"
              >
                <div
                  aria-multiselectable="false"
                  class=" css-1d1qzc4-MenuList"
                  id="react-select-10-listbox"
                  role="listbox"
                >
                  <div
                    class=" css-syji7d-Group"
                  >
                    <div
                      class=" css-jtaw72-group"
                      id="react-select-10-group-0-heading"
                    >
                      Members
                    </div>
                    <div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-8e5kjb-option"
                        id="react-select-10-option-0-0"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_1
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_1
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-0-1"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_2
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_2
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-0-2"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_3
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_3
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-0-3"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_4
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_4
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class=" css-syji7d-Group"
                  >
                    <div
                      class=" css-jtaw72-group"
                      id="react-select-10-group-1-heading"
                    >
                      Channels
                    </div>
                    <div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-1-0"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-lock-outline LockOutlineIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 1
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-1-1"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-lock-outline LockOutlineIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 2
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-1-2"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-globe GlobeIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 3
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-10-option-1-3"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-globe GlobeIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 4
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-11-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-11-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-11-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-11-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard and click Select, non-plugin mode 2`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-11-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              >
                <span
                  id="aria-selection"
                />
                <span
                  id="aria-focused"
                />
                <span
                  id="aria-results"
                >
                  8 results available.
                </span>
                <span
                  id="aria-guidance"
                >
                  Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
                </span>
              </span>
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-11-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant="react-select-11-option-0-0"
                      aria-autocomplete="list"
                      aria-controls="react-select-11-listbox"
                      aria-describedby="react-select-11-placeholder"
                      aria-expanded="true"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-11-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
              <div
                class=" css-45h7mv-menu"
              >
                <div
                  aria-multiselectable="false"
                  class=" css-1d1qzc4-MenuList"
                  id="react-select-11-listbox"
                  role="listbox"
                >
                  <div
                    class=" css-syji7d-Group"
                  >
                    <div
                      class=" css-jtaw72-group"
                      id="react-select-11-group-0-heading"
                    >
                      Members
                    </div>
                    <div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-8e5kjb-option"
                        id="react-select-11-option-0-0"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_1
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_1
                            </strong>
                            <div
                              class="AdminBadge"
                            >
                              <div
                                class="AdminBadge__box"
                              >
                                Team Admin
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-0-1"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_2
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_2
                            </strong>
                            <div
                              class="AdminBadge"
                            >
                              <div
                                class="AdminBadge__box"
                              >
                                Admin
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-0-2"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_3
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_3
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-0-3"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_4
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_4
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class=" css-syji7d-Group"
                  >
                    <div
                      class=" css-jtaw72-group"
                      id="react-select-11-group-1-heading"
                    >
                      Channels
                    </div>
                    <div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-1-0"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-lock-outline LockOutlineIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 1
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-1-1"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-lock-outline LockOutlineIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 2
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-1-2"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-globe GlobeIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 3
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-11-option-1-3"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <i
                            class="CompassIcon icon-globe GlobeIcon"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              Channel 4
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Template
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-14-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-14-placeholder"
                  >
                    Search for people
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-14-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-14-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard template and click Select 2`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Template
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-14-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              >
                <span
                  id="aria-selection"
                />
                <span
                  id="aria-focused"
                />
                <span
                  id="aria-results"
                >
                  4 results available.
                </span>
                <span
                  id="aria-guidance"
                >
                  Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
                </span>
              </span>
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-14-placeholder"
                  >
                    Search for people
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant="react-select-14-option-0-0"
                      aria-autocomplete="list"
                      aria-controls="react-select-14-listbox"
                      aria-describedby="react-select-14-placeholder"
                      aria-expanded="true"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-14-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
              <div
                class=" css-45h7mv-menu"
              >
                <div
                  aria-multiselectable="false"
                  class=" css-1d1qzc4-MenuList"
                  id="react-select-14-listbox"
                  role="listbox"
                >
                  <div
                    class=" css-syji7d-Group"
                  >
                    <div
                      class=" css-jtaw72-group"
                      id="react-select-14-group-0-heading"
                    >
                      Members
                    </div>
                    <div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-8e5kjb-option"
                        id="react-select-14-option-0-0"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_1
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_1
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-14-option-0-1"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_2
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_2
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-14-option-0-2"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_3
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_3
                            </strong>
                          </div>
                        </div>
                      </div>
                      <div
                        aria-disabled="false"
                        aria-selected="false"
                        class=" css-x3yilo-option"
                        id="react-select-14-option-0-3"
                        role="option"
                        tabindex="-1"
                      >
                        <div
                          class="user-item"
                        >
                          <img
                            class="user-item__img"
                          />
                          <div
                            class="ml-3"
                          >
                            <strong>
                              username_4
                            </strong>
                            <strong
                              class="ml-2 text-light"
                            >
                              @username_4
                            </strong>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoard, and click switch 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-6-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-6-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-6-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-6-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item false"
          >
            Share
          </button>
          <button
            class="tab-item tab-item--active"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Publish to the web
                </div>
                <div
                  class="text-light"
                >
                  Publish and share a read-only link with everyone on the web.
                </div>
              </div>
              <div>
                <div
                  class="Switch override-main size--medium on"
                >
                  <div
                    class="octo-switch-inner"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/shared/1/1?r=oneToken"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/shared/1/1?r=oneToken
              </a>
              <div
                class="octo-tooltip tooltip-top"
                data-tooltip="Regenerate token"
              >
                <button
                  aria-label="Regenerate token"
                  title="Regenerate token"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-refresh"
                  />
                </button>
              </div>
            </div>
            <button
              title="Copy public link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard return shareBoardComponent and click Switch without sharing 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-7-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-7-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-7-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-7-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item false"
          >
            Share
          </button>
          <button
            class="tab-item tab-item--active"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Publish to the web
                </div>
                <div
                  class="text-light"
                >
                  Publish and share a read-only link with everyone on the web.
                </div>
              </div>
              <div>
                <div
                  class="Switch override-main size--medium on"
                >
                  <div
                    class="octo-switch-inner"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/shared/1/1?r=aToken"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/shared/1/1?r=aToken
              </a>
              <div
                class="octo-tooltip tooltip-top"
                data-tooltip="Regenerate token"
              >
                <button
                  aria-label="Regenerate token"
                  title="Regenerate token"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-refresh"
                  />
                </button>
              </div>
            </div>
            <button
              title="Copy public link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard should match snapshot 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-2-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-2-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-2-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-2-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard should match snapshot with sharing 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-3-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-3-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-3-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-3-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and subpath 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-9-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-9-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-9-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-9-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/test-subpath/plugins/boards1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/test-subpath/plugins/boards1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard should match snapshot with sharing and without workspaceId and subpath 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Board
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-8-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-8-placeholder"
                  >
                    Search for people and channels
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-8-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-8-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
        <div
          class="tabs-container"
        >
          <button
            class="tab-item tab-item--active"
          >
            Share
          </button>
          <button
            class="tab-item false"
          >
            Publish
          </button>
        </div>
        <div
          class="tabs-content"
        >
          <div>
            <div
              class="d-flex justify-content-between"
            >
              <div
                class="d-flex flex-column"
              >
                <div
                  class="text-heading2"
                >
                  Share internally
                </div>
                <div
                  class="text-light"
                >
                  Users who have permissions will be able to use this link.
                </div>
              </div>
            </div>
          </div>
          <div
            class="d-flex justify-content-between tabs-inputs"
          >
            <div
              class="d-flex input-container"
            >
              <a
                class="shareUrl"
                href="http://localhost/test-subpath/plugins/boards1/1"
                rel="noreferrer"
                target="_blank"
              >
                http://localhost/test-subpath/plugins/boards1/1
              </a>
            </div>
            <button
              title="Copy link"
              type="button"
            >
              <i
                class="CompassIcon icon-content-copy CompassIcon"
              />
              <span>
                Copy link
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`src/components/shareBoard/shareBoard should match snapshot, with template 1`] = `
<div>
  <div
    class="Dialog dialog-back ShareBoardDialog size--medium"
  >
    <div
      class="backdrop"
    />
    <div
      class="wrapper"
    >
      <div
        class="dialog"
        role="dialog"
      >
        <div
          class="toolbar"
        >
          <div>
            <h1
              class="dialog-title"
            >
              Share Template
            </h1>
          </div>
          <div
            class="toolbar--right"
          >
            <button
              aria-label="Close dialog"
              title="Close dialog"
              type="button"
            >
              <i
                class="CompassIcon icon-close CloseIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="share-input__container"
        >
          <div
            class="share-input"
          >
            <i
              class="CompassIcon icon-magnify MagnifyIcon"
            />
            <div
              class="userSearchInput css-b62m3t-container"
            >
              <span
                class="css-1f43avz-a11yText-A11yText"
                id="react-select-13-live-region"
              />
              <span
                aria-atomic="false"
                aria-live="polite"
                aria-relevant="additions text"
                class="css-1f43avz-a11yText-A11yText"
                role="log"
              />
              <div
                class=" css-1wmrr75-Control"
              >
                <div
                  class=" css-b2z5qd-ValueContainer"
                >
                  <div
                    class=" css-1jqq78o-placeholder"
                    id="react-select-13-placeholder"
                  >
                    Search for people
                  </div>
                  <div
                    class=" css-1p5v8kp-Input"
                    data-value=""
                  >
                    <input
                      aria-activedescendant=""
                      aria-autocomplete="list"
                      aria-describedby="react-select-13-placeholder"
                      aria-expanded="false"
                      aria-haspopup="true"
                      autocapitalize="none"
                      autocomplete="off"
                      autocorrect="off"
                      class=""
                      id="react-select-13-input"
                      role="combobox"
                      spellcheck="false"
                      style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
                      tabindex="0"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class=" css-1hb7zxy-IndicatorsContainer"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="user-items"
        >
          <div
            class="user-item"
          >
            <div
              class="user-item__content"
            >
              <i
                class="CompassIcon icon-mattermost user-item__img"
              />
              <div
                class="ml-3"
              >
                <strong>
                  Everyone at Test Team Team
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  None
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
          <div
            class="user-item channel-item"
          >
            <div
              class="user-item__content"
            >
              <span
                class="user-item__img"
              >
                <i
                  class="CompassIcon icon-lock-outline LockOutlineIcon"
                />
              </span>
              <div
                class="ml-3"
              >
                <strong>
                  Dunder Mifflin Party Planing Committee
                </strong>
              </div>
            </div>
            <div>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="user-item__button"
                >
                  Editor
                  <i
                    class="CompassIcon icon-chevron-down CompassIcon"
                  />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
