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

exports[`components/centerPanel Clicking on the Hidden card count should open a dailog 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
      <div
        class="HiddenCardCount"
      >
        <div
          class="hidden-card-title"
        >
          Cards hidden
        </div>
        <button
          class="Button"
          title="hidden-card-count"
          type="button"
        >
          <span>
            2
          </span>
        </button>
      </div>
    </div>
    <div
      class="NotificationBox"
    >
      <div
        class="NotificationBox__icon"
      >
        <i
          class="CompassIcon icon-alert-outline AlertIcon"
        />
      </div>
      <div
        class="content"
      >
        <p
          class="title"
        >
          2 cards hidden from board
        </p>
        Card limit reached, to view older cards, 
        <a>
          Upgrade to a paid plan
        </a>
      </div>
      <button
        class="IconButton"
        type="button"
      >
        <i
          class="CompassIcon icon-close CloseIcon"
        />
      </button>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and click on card to show card 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Kanban"
    >
      <div
        class="octo-board-header"
        id="mainBoardHeader"
      >
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label empty "
            title="Items with an empty name property will go here. This column cannot be removed."
          >
            No name
          </span>
          
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorOrange "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q1"
              value="Q1"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="2"
              type="button"
            >
              <span>
                2
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorBlue "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q2"
              value="Q2"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell narrow"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + Add a group
            </span>
          </button>
        </div>
      </div>
      <div
        class="octo-board-body"
        id="mainBoardBody"
      >
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <div
            class="KanbanCard false"
            draggable="true"
            style="opacity: 1;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper optionsMenu "
              role="button"
            >
              <button
                class="IconButton CardActionsMenuIcon"
                type="button"
              >
                <i
                  class="CompassIcon icon-dots-horizontal OptionsIcon"
                />
              </button>
            </div>
            <div
              class="octo-icontitle"
            >
              <div
                class="octo-icon"
              >
                i
              </div>
              <div
                class="octo-titletext"
              >
                card1
              </div>
            </div>
          </div>
          <div
            class="KanbanCard false"
            draggable="true"
            style="opacity: 1;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper optionsMenu "
              role="button"
            >
              <button
                class="IconButton CardActionsMenuIcon"
                type="button"
              >
                <i
                  class="CompassIcon icon-dots-horizontal OptionsIcon"
                />
              </button>
            </div>
            <div
              class="octo-icontitle"
            >
              <div
                class="octo-icon"
              >
                i
              </div>
              <div
                class="octo-titletext"
              >
                card2
              </div>
            </div>
          </div>
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and click on new card to edit template 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch 1 with readonly 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          />
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                class="octo-icon size-m readonly"
              >
                <span>
                  i
                </span>
              </div>
            </div>
            <input
              class="Editable readonly title"
              placeholder="Untitled board"
              readonly=""
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardLoginButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Login"
              type="button"
            >
              <span>
                Login
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable readonly "
            placeholder="Untitled View"
            readonly=""
            spellcheck="true"
            title="view title"
            value="view title"
          />
        </div>
        <div
          class="octo-spacer"
        />
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper disabled"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand readonly"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand readonly"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable readonly "
                    placeholder="New Select"
                    readonly=""
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
            </div>
            <div
              class="TableRow octo-table-row readonly"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              />
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable readonly "
                    placeholder="Untitled"
                    readonly=""
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row readonly"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              />
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable readonly "
                    placeholder="Untitled"
                    readonly=""
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand readonly"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable readonly "
                    placeholder="New Select"
                    readonly=""
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell disabled  "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch ctrl+d for one card selected 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch del for one card selected 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch esc for one card selected 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch esc for one card selected 2`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch esc for two cards selected 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch esc for two cards selected 2`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and press touch esc for two cards selected 3`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and select one card and click background 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row selected"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel return centerPanel and select one card and click background 2`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  2
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card2"
                    value="card2"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              2
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel should match snapshot for Gallery 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Gallery"
    >
      <div
        class="GalleryCard"
        draggable="true"
        style="opacity: 1;"
      >
        <div
          aria-label="menuwrapper"
          class="MenuWrapper optionsMenu"
          role="button"
        >
          <button
            class="IconButton CardActionsMenuIcon"
            type="button"
          >
            <i
              class="CompassIcon icon-dots-horizontal OptionsIcon"
            />
          </button>
        </div>
        <div
          class="gallery-item"
        />
      </div>
      <div
        class="octo-gallery-new"
      >
        + New
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel should match snapshot for Kanban 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Kanban"
    >
      <div
        class="octo-board-header"
        id="mainBoardHeader"
      >
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label empty "
            title="Items with an empty name property will go here. This column cannot be removed."
          >
            No name
          </span>
          
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorOrange "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q1"
              value="Q1"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="1"
              type="button"
            >
              <span>
                1
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorBlue "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q2"
              value="Q2"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell narrow"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + Add a group
            </span>
          </button>
        </div>
      </div>
      <div
        class="octo-board-body"
        id="mainBoardBody"
      >
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <div
            class="KanbanCard false"
            draggable="true"
            style="opacity: 1;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper optionsMenu "
              role="button"
            >
              <button
                class="IconButton CardActionsMenuIcon"
                type="button"
              >
                <i
                  class="CompassIcon icon-dots-horizontal OptionsIcon"
                />
              </button>
            </div>
            <div
              class="octo-icontitle"
            >
              <div
                class="octo-icon"
              >
                i
              </div>
              <div
                class="octo-titletext"
              >
                card1
              </div>
            </div>
          </div>
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel should match snapshot for Kanban, not shared 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Kanban"
    >
      <div
        class="octo-board-header"
        id="mainBoardHeader"
      >
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label empty "
            title="Items with an empty name property will go here. This column cannot be removed."
          >
            No name
          </span>
          
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorOrange "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q1"
              value="Q1"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="1"
              type="button"
            >
              <span>
                1
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell KanbanColumnHeader"
          draggable="true"
          style="opacity: 1;"
        >
          <span
            class="Label propColorBlue "
          >
            <input
              class="Editable "
              placeholder="New Select"
              spellcheck="true"
              title="Q2"
              value="Q2"
            />
          </span>
          <div
            class="KanbanCalculation"
          >
            <button
              class="Button"
              title="0"
              type="button"
            >
              <span>
                0
              </span>
            </button>
          </div>
          <div
            class="octo-spacer"
          />
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
          <button
            class="IconButton"
            type="button"
          >
            <i
              class="CompassIcon icon-plus AddIcon"
            />
          </button>
        </div>
        <div
          class="octo-board-header-cell narrow"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + Add a group
            </span>
          </button>
        </div>
      </div>
      <div
        class="octo-board-body"
        id="mainBoardBody"
      >
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <div
            class="KanbanCard false"
            draggable="true"
            style="opacity: 1;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper optionsMenu "
              role="button"
            >
              <button
                class="IconButton CardActionsMenuIcon"
                type="button"
              >
                <i
                  class="CompassIcon icon-dots-horizontal OptionsIcon"
                />
              </button>
            </div>
            <div
              class="octo-icontitle"
            >
              <div
                class="octo-icon"
              >
                i
              </div>
              <div
                class="octo-titletext"
              >
                card1
              </div>
            </div>
          </div>
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
        <div
          class="octo-board-column"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              + New
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`components/centerPanel should match snapshot for Table 1`] = `
<div>
  <div
    class="BoardComponent"
  >
    <div
      class="top-head"
    >
      <div
        class="TopBar"
      >
        <a
          class="link"
          href="https://www.focalboard.com/fwlink/feedback-focalboard.html?v=1.0.0"
          rel="noreferrer"
          target="_blank"
        >
          Give feedback
        </a>
        <a
          href="https://www.focalboard.com/guide/user?utm_source=webapp"
          rel="noreferrer"
          target="_blank"
        >
          <i
            class="CompassIcon icon-help-circle-outline HelpIcon"
          />
        </a>
      </div>
      <div
        class="mid-head"
      >
        <div
          class="ViewTitle"
        >
          <div
            class="add-buttons add-visible"
          >
            <button
              class="Button emphasis--default size--xsmall"
              type="button"
            >
              <i
                class="CompassIcon icon-eye-off-outline"
              />
              <span>
                hide description
              </span>
            </button>
          </div>
          <div
            class="title"
          >
            <div
              class="IconSelector"
            >
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <div
                  class="octo-icon size-m"
                >
                  <span>
                    i
                  </span>
                </div>
              </div>
            </div>
            <input
              class="Editable title"
              placeholder="Untitled board"
              spellcheck="true"
              title="board title"
              value="board title"
            />
          </div>
          <div
            class="description"
          >
            <div
              class="MarkdownEditor octo-editor  "
            >
              <div
                class="octo-editor-preview"
                data-testid="preview-element"
              />
            </div>
          </div>
        </div>
        <div
          class="shareButtonWrapper"
        >
          <div
            class="ShareBoardButton"
          >
            <button
              class="Button emphasis--primary size--medium"
              title="Share board"
              type="button"
            >
              <i
                class="CompassIcon icon-lock-outline LockOutlineIcon"
              />
              <span>
                Share
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="ViewHeader"
      >
        <div
          class="viewSelector"
        >
          <input
            class="Editable "
            placeholder="Untitled View"
            spellcheck="true"
            title="view title"
            value="view title"
          />
          <div>
            <div
              aria-label="View menu"
              class="MenuWrapper"
              role="button"
            >
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-chevron-down DropdownIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-spacer"
        />
        <div
          aria-label="Properties menu"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Properties
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button"
            type="button"
          >
            <span>
              Group by: 
              <span
                id="groupByLabel"
              >
                name
              </span>
            </span>
          </button>
        </div>
        <div
          class="ModalWrapper"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Filter
            </span>
          </button>
        </div>
        <div
          aria-label="menuwrapper"
          class="MenuWrapper"
          role="button"
        >
          <button
            class="Button active"
            type="button"
          >
            <span>
              Sort
            </span>
          </button>
        </div>
        <div
          class="board-search-field"
        >
          <i
            class="CompassIcon icon-magnify board-search-icon"
          />
          <input
            class="Editable "
            placeholder="Search cards"
            value=""
          />
        </div>
        <div
          class="ModalWrapper"
        >
          <div
            aria-label="View header menu"
            class="MenuWrapper"
            role="button"
          >
            <button
              class="IconButton"
              type="button"
            >
              <i
                class="CompassIcon icon-dots-horizontal OptionsIcon"
              />
            </button>
          </div>
        </div>
        <div
          class="ButtonWithMenu"
        >
          <div
            class="button-text"
          >
            New
          </div>
          <div
            aria-label="menuwrapper"
            class="MenuWrapper"
            role="button"
          >
            <div
              class="button-dropdown"
            >
              <i
                class="CompassIcon icon-chevron-down DropdownIcon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Table"
    >
      <div
        class="octo-table-body"
      >
        <div
          class="octo-table-header TableHeaders"
          id="mainBoardHeader"
        >
          <div
            class="octo-table-cell header-cell"
            style="overflow: unset; opacity: 1; width: 100px;"
          >
            <div
              aria-label="menuwrapper"
              class="MenuWrapper"
              role="button"
            >
              <span
                class="Label empty "
              >
                Name
              </span>
            </div>
            <div
              class="octo-spacer"
            />
            <div
              class="HorizontalGrip"
            />
          </div>
        </div>
        <div
          class="table-row-container"
        >
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label empty "
                  title="Items with an empty name property will go here. This column cannot be removed."
                >
                  No name
                </span>
                
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorOrange "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q1"
                    value="Q1"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  1
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
            <div
              class="TableRow octo-table-row"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="action-cell octo-table-cell-btn"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-drag-vertical"
                  />
                </button>
              </div>
              <div
                class="octo-table-cell title-cell"
                id="mainBoardHeader"
                style="width: 100px;"
              >
                <div
                  class="octo-icontitle"
                >
                  <div
                    class="octo-icon"
                  >
                    i
                  </div>
                  <input
                    class="Editable "
                    placeholder="Untitled"
                    spellcheck="true"
                    title="card1"
                    value="card1"
                  />
                </div>
                <div
                  aria-label="menuwrapper"
                  class="MenuWrapper optionsMenu ml-2 mr-2"
                  role="button"
                >
                  <div
                    class="octo-tooltip tooltip-top"
                    data-tooltip="More actions"
                  >
                    <button
                      aria-label="MenuBtn"
                      class="IconButton"
                      title="MenuBtn"
                      type="button"
                    >
                      <i
                        class="CompassIcon icon-dots-horizontal OptionsIcon"
                      />
                    </button>
                  </div>
                </div>
                <div
                  class="open-button"
                >
                  <button
                    class="Button"
                    type="button"
                  >
                    <span>
                      Open
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div
            class="octo-table-group"
          >
            <div
              class="octo-group-header-cell expanded"
              draggable="true"
              style="opacity: 1;"
            >
              <div
                class="octo-table-cell"
                style="width: 100px;"
              >
                <button
                  class="IconButton octo-table-cell__expand "
                  type="button"
                >
                  <i
                    class="CompassIcon icon-menu-right"
                  />
                </button>
                <span
                  class="Label propColorBlue "
                >
                  <input
                    class="Editable "
                    placeholder="New Select"
                    spellcheck="true"
                    title="Q2"
                    value="Q2"
                  />
                </span>
              </div>
              <button
                class="Button"
                type="button"
              >
                <span>
                  0
                </span>
              </button>
              <div
                aria-label="menuwrapper"
                class="MenuWrapper"
                role="button"
              >
                <button
                  class="IconButton"
                  type="button"
                >
                  <i
                    class="CompassIcon icon-dots-horizontal OptionsIcon"
                  />
                </button>
              </div>
              <button
                class="IconButton"
                type="button"
              >
                <i
                  class="CompassIcon icon-plus AddIcon"
                />
              </button>
            </div>
          </div>
        </div>
        <div
          class="octo-table-footer"
        />
        <div
          class="CalculationRow octo-table-row"
        >
          <div
            class="Calculation count octo-table-cell   "
            style="width: 100px;"
            tabindex="0"
          >
            <span
              class="calculationLabel"
            >
              Count
            </span>
            <span
              class="calculationValue"
            >
              1
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;
