From cfbec9d90b47ab59d52c4d82690bd8a704084511 Mon Sep 17 00:00:00 2001
From: Julien Fabre <julien.fabre.33@gmail.com>
Date: Tue, 9 Nov 2021 22:45:13 +0100
Subject: [PATCH] [GH-840]: add unit tests for workspace (#1781)

* chore[GH-#840]: add unit tests for workspace

* fix: test and snapshot

* fix: snapshot error
---
 .../__snapshots__/workspace.test.tsx.snap     | 2557 +++++++++++++++++
 webapp/src/components/workspace.test.tsx      |  259 ++
 2 files changed, 2816 insertions(+)
 create mode 100644 webapp/src/components/__snapshots__/workspace.test.tsx.snap
 create mode 100644 webapp/src/components/workspace.test.tsx

diff --git a/webapp/src/components/__snapshots__/workspace.test.tsx.snap b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
new file mode 100644
index 000000000..a684d02de
--- /dev/null
+++ b/webapp/src/components/__snapshots__/workspace.test.tsx.snap
@@ -0,0 +1,2557 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`src/components/workspace return workspace and showcard 1`] = `
+<div>
+  <div
+    class="Workspace"
+  >
+    <div
+      class="Sidebar octo-sidebar"
+    >
+      <div
+        class="octo-sidebar-header"
+      >
+        <div
+          class="heading"
+        >
+          <div
+            class="SidebarUserMenu"
+          >
+            <div
+              class="ModalWrapper"
+            >
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <div
+                  class="logo"
+                >
+                  <div
+                    class="logo-title"
+                  >
+                    <svg
+                      class="FocalboardLogoIcon Icon"
+                      version="1.1"
+                      viewBox="0 0 52.589677 64"
+                      x="0px"
+                      y="0px"
+                    >
+                      <path
+                        d="m 33.071077,12.069805 c -12.663,-3.4670001 -27.0530002,3.289 -31.6760002,16.943 -4.655,13.75 2.719,28.67 16.4690002,33.325 13.75,4.655 28.67,-2.719 33.326,-16.469 3.804,-11.235 -0.462,-22.701 -8.976,-29.249 l -0.46,4.871 h -0.001 c 4.631,4.896 6.709,11.941 4.325,18.985 -3.362,9.931 -14.447,15.151 -24.76,11.66 -10.313,-3.49 -15.9480002,-14.37 -12.5870002,-24.301 2.9750002,-8.788 11.9980002,-13.715 20.7430002,-12.625 v -10e-4 z m -6.175,16.488 c 3.456,-0.665 6.986,2.754 5.762,6.37 -0.854,2.522 -3.67,3.85 -6.291,2.962 -2.62,-0.887 -4.052,-3.651 -3.197,-6.174 0.573,-1.697 2.034,-2.852 3.726,-3.158 z m -1.285,-4.944 c -1.786,0.323 -3.45,1.104 -4.812,2.258 -1.299,1.101 -2.319,2.545 -2.898,4.258 -0.879,2.597 -0.579,5.323 0.617,7.632 1.206,2.329 3.325,4.234 6.07,5.164 2.744,0.929 5.584,0.701 7.959,-0.417 2.352,-1.107 4.246,-3.091 5.125,-5.688 0.555,-1.639 0.633,-3.254 0.344,-4.761 -0.21,-1.093 -0.615,-2.134 -1.174,-3.091 l 1.019,-5.107 c 0.189,0.187 0.374,0.378 0.552,0.574 1.75,1.919 3.008,4.283 3.508,6.877 0.415,2.154 0.304,4.457 -0.484,6.784 -1.239,3.661 -3.898,6.453 -7.193,8.005 -3.273,1.541 -7.175,1.858 -10.93,0.588 -3.754,-1.271 -6.661,-3.895 -8.326,-7.108 -1.674,-3.233 -2.09,-7.065 -0.851,-10.728 0.819,-2.419 2.26,-4.46 4.097,-6.016 1.88,-1.593 4.181,-2.673 6.656,-3.125 l -0.001,-0.004 c 1.759,-0.339 3.522,-0.313 5.213,0.016 l -3.583,3.761 c -0.294,0.028 -0.588,0.071 -0.883,0.127 h -0.025 z"
+                      />
+                      <polygon
+                        points="26.057,32.594 37.495,11.658 36.79,8.44 41.066,0.207 43.683,4.611 48.803,4.434 44.185,12.48 40.902,13.697 29.542,34.491 "
+                        transform="translate(7.6780426e-5,-0.21919512)"
+                      />
+                    </svg>
+                    <span>
+                      Focalboard
+                    </span>
+                    <div
+                      class="versionFrame"
+                    >
+                      <div
+                        class="version"
+                      >
+                        v1.0.0
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="octo-spacer"
+        />
+        <div
+          class="sidebarSwitcher"
+        >
+          <button
+            class="Button IconButton"
+            type="button"
+          >
+            <svg
+              class="HideSidebarIcon Icon"
+              viewBox="0 0 100 100"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="80,20 50,50 80,80"
+              />
+              <polyline
+                points="50,20 20,50, 50,80"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div
+        class="WorkspaceTitle"
+      />
+      <div
+        class="WorkspaceSwitcherWrapper"
+      >
+        <div
+          class="WorkspaceSwitcher"
+        >
+          <span>
+            Workspace 1
+          </span>
+          <i
+            class="CompassIcon icon-chevron-down ChevronDownIcon"
+          />
+        </div>
+        <span
+          class="add-workspace-icon"
+        >
+          <i
+            class="CompassIcon icon-plus AddIcon"
+          />
+        </span>
+      </div>
+      <div
+        class="octo-sidebar-list"
+      >
+        <div
+          class="SidebarBoardItem"
+        >
+          <div
+            class="octo-sidebar-item ' expanded active"
+          >
+            <button
+              class="Button IconButton"
+              type="button"
+            >
+              <svg
+                class="DisclosureTriangleIcon Icon"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  points="37,35 37,65 63,50"
+                />
+              </svg>
+            </button>
+            <div
+              class="octo-sidebar-title"
+              title="board title"
+            >
+              i board title
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-dots-horizontal OptionsIcon"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="octo-sidebar-item subitem active"
+          >
+            <svg
+              class="BoardIcon Icon"
+              viewBox="0 0 100 100"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="80"
+                rx="5"
+                ry="5"
+                width="80"
+                x="10"
+                y="10"
+              />
+              <polyline
+                points="28,25 28,55"
+                style="stroke-width: 15px;"
+              />
+              <polyline
+                points="50,25 50,70"
+                style="stroke-width: 15px;"
+              />
+              <polyline
+                points="72,25 72,45"
+                style="stroke-width: 15px;"
+              />
+            </svg>
+            <div
+              class="octo-sidebar-title"
+              title="view title"
+            >
+              view title
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="octo-spacer"
+      />
+      <div
+        class="SidebarAddBoardMenu"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="menu-entry"
+          >
+            + Add board
+          </div>
+        </div>
+      </div>
+      <div
+        class="SidebarSettingsMenu"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="menu-entry"
+          >
+            Settings
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mainFrame"
+    >
+      <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="ViewTitle"
+          >
+            <div
+              class="add-buttons add-visible"
+            >
+              <button
+                type="button"
+              >
+                <svg
+                  class="HideIcon Icon"
+                  viewBox="0 0 640 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
+                  />
+                </svg>
+                <span>
+                  hide description
+                </span>
+              </button>
+            </div>
+            <div
+              class="title"
+            >
+              <div
+                class="BlockIconSelector"
+              >
+                <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"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          style="display: block; bottom: 0px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px; height: 53px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px; width: 0px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line"
+                                      role="presentation"
+                                    >
+                                      <span
+                                        role="presentation"
+                                        style="padding-right: .1px;"
+                                      >
+                                        description
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ViewHeader"
+          >
+            <input
+              class="Editable undefined"
+              placeholder="Untitled View"
+              spellcheck="true"
+              title="view title"
+              value="view title"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-chevron-down DropdownIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-spacer"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Properties
+                </span>
+              </button>
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Group by: 
+                  <span
+                    id="groupByLabel"
+                  >
+                    Property 2
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="ModalWrapper"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Filter
+                </span>
+              </button>
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Sort
+                </span>
+              </button>
+            </div>
+            <button
+              type="button"
+            >
+              <span>
+                Search
+              </span>
+            </button>
+            <div
+              class="ModalWrapper"
+            >
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button 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 Property 2 property will go here. This column cannot be removed."
+              >
+                No Property 2
+              </span>
+              
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    3
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button IconButton"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
+              <button
+                class="Button 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 undefined"
+                  placeholder="New Select"
+                  spellcheck="true"
+                  title="value 2"
+                  value="value 2"
+                />
+              </span>
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    0
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button IconButton"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-plus AddIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-board-header-cell narrow"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + Add a group
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="octo-board-body"
+            id="mainBoardBody"
+          >
+            <div
+              class="octo-board-column"
+            >
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-1
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-2
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-3
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <button
+                type="button"
+              >
+                <span>
+                  + New
+                </span>
+              </button>
+            </div>
+            <div
+              class="octo-board-column"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + New
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`src/components/workspace return workspace readonly and showcard 1`] = `
+<div>
+  <div
+    class="Workspace"
+  >
+    <div
+      class="mainFrame"
+    >
+      <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="ViewTitle"
+          >
+            <div
+              class="add-buttons add-visible"
+            />
+            <div
+              class="title"
+            >
+              <div
+                class="BlockIconSelector"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper"
+                  role="button"
+                >
+                  <div
+                    class="octo-icon size-m"
+                  >
+                    <span>
+                      i
+                    </span>
+                  </div>
+                </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"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          style="display: block; bottom: 0px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px; height: 53px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px; width: 0px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line"
+                                      role="presentation"
+                                    >
+                                      <span
+                                        role="presentation"
+                                        style="padding-right: .1px;"
+                                      >
+                                        description
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ViewHeader"
+          >
+            <input
+              class="Editable readonly undefined"
+              placeholder="Untitled View"
+              readonly=""
+              spellcheck="true"
+              title="view title"
+              value="view title"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-chevron-down DropdownIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-spacer"
+            />
+            <button
+              type="button"
+            >
+              <span>
+                Search
+              </span>
+            </button>
+          </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 Property 2 property will go here. This column cannot be removed."
+              >
+                No Property 2
+              </span>
+              
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    3
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+            </div>
+            <div
+              class="octo-board-header-cell KanbanColumnHeader"
+              draggable="true"
+              style="opacity: 1;"
+            >
+              <span
+                class="Label propColorBlue "
+              >
+                <input
+                  class="Editable readonly undefined"
+                  placeholder="New Select"
+                  readonly=""
+                  spellcheck="true"
+                  title="value 2"
+                  value="value 2"
+                />
+              </span>
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    0
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+            </div>
+          </div>
+          <div
+            class="octo-board-body"
+            id="mainBoardBody"
+          >
+            <div
+              class="octo-board-column"
+            >
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-1
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-2
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-3
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="octo-board-column"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`src/components/workspace return workspace with EmptyCenterPanel component 1`] = `
+<div>
+  <div
+    class="Workspace"
+  >
+    <div
+      class="mainFrame"
+    >
+      <div
+        class="EmptyCenterPanel"
+      >
+        <div
+          class="Hint"
+        >
+          Add or select a board from the sidebar to get started.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`src/components/workspace should match snapshot 1`] = `
+<div>
+  <div
+    class="Workspace"
+  >
+    <div
+      class="Sidebar octo-sidebar"
+    >
+      <div
+        class="octo-sidebar-header"
+      >
+        <div
+          class="heading"
+        >
+          <div
+            class="SidebarUserMenu"
+          >
+            <div
+              class="ModalWrapper"
+            >
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <div
+                  class="logo"
+                >
+                  <div
+                    class="logo-title"
+                  >
+                    <svg
+                      class="FocalboardLogoIcon Icon"
+                      version="1.1"
+                      viewBox="0 0 52.589677 64"
+                      x="0px"
+                      y="0px"
+                    >
+                      <path
+                        d="m 33.071077,12.069805 c -12.663,-3.4670001 -27.0530002,3.289 -31.6760002,16.943 -4.655,13.75 2.719,28.67 16.4690002,33.325 13.75,4.655 28.67,-2.719 33.326,-16.469 3.804,-11.235 -0.462,-22.701 -8.976,-29.249 l -0.46,4.871 h -0.001 c 4.631,4.896 6.709,11.941 4.325,18.985 -3.362,9.931 -14.447,15.151 -24.76,11.66 -10.313,-3.49 -15.9480002,-14.37 -12.5870002,-24.301 2.9750002,-8.788 11.9980002,-13.715 20.7430002,-12.625 v -10e-4 z m -6.175,16.488 c 3.456,-0.665 6.986,2.754 5.762,6.37 -0.854,2.522 -3.67,3.85 -6.291,2.962 -2.62,-0.887 -4.052,-3.651 -3.197,-6.174 0.573,-1.697 2.034,-2.852 3.726,-3.158 z m -1.285,-4.944 c -1.786,0.323 -3.45,1.104 -4.812,2.258 -1.299,1.101 -2.319,2.545 -2.898,4.258 -0.879,2.597 -0.579,5.323 0.617,7.632 1.206,2.329 3.325,4.234 6.07,5.164 2.744,0.929 5.584,0.701 7.959,-0.417 2.352,-1.107 4.246,-3.091 5.125,-5.688 0.555,-1.639 0.633,-3.254 0.344,-4.761 -0.21,-1.093 -0.615,-2.134 -1.174,-3.091 l 1.019,-5.107 c 0.189,0.187 0.374,0.378 0.552,0.574 1.75,1.919 3.008,4.283 3.508,6.877 0.415,2.154 0.304,4.457 -0.484,6.784 -1.239,3.661 -3.898,6.453 -7.193,8.005 -3.273,1.541 -7.175,1.858 -10.93,0.588 -3.754,-1.271 -6.661,-3.895 -8.326,-7.108 -1.674,-3.233 -2.09,-7.065 -0.851,-10.728 0.819,-2.419 2.26,-4.46 4.097,-6.016 1.88,-1.593 4.181,-2.673 6.656,-3.125 l -0.001,-0.004 c 1.759,-0.339 3.522,-0.313 5.213,0.016 l -3.583,3.761 c -0.294,0.028 -0.588,0.071 -0.883,0.127 h -0.025 z"
+                      />
+                      <polygon
+                        points="26.057,32.594 37.495,11.658 36.79,8.44 41.066,0.207 43.683,4.611 48.803,4.434 44.185,12.48 40.902,13.697 29.542,34.491 "
+                        transform="translate(7.6780426e-5,-0.21919512)"
+                      />
+                    </svg>
+                    <span>
+                      Focalboard
+                    </span>
+                    <div
+                      class="versionFrame"
+                    >
+                      <div
+                        class="version"
+                      >
+                        v1.0.0
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="octo-spacer"
+        />
+        <div
+          class="sidebarSwitcher"
+        >
+          <button
+            class="Button IconButton"
+            type="button"
+          >
+            <svg
+              class="HideSidebarIcon Icon"
+              viewBox="0 0 100 100"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <polyline
+                points="80,20 50,50 80,80"
+              />
+              <polyline
+                points="50,20 20,50, 50,80"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <div
+        class="WorkspaceTitle"
+      />
+      <div
+        class="WorkspaceSwitcherWrapper"
+      >
+        <div
+          class="WorkspaceSwitcher"
+        >
+          <span>
+            Workspace 1
+          </span>
+          <i
+            class="CompassIcon icon-chevron-down ChevronDownIcon"
+          />
+        </div>
+        <span
+          class="add-workspace-icon"
+        >
+          <i
+            class="CompassIcon icon-plus AddIcon"
+          />
+        </span>
+      </div>
+      <div
+        class="octo-sidebar-list"
+      >
+        <div
+          class="SidebarBoardItem"
+        >
+          <div
+            class="octo-sidebar-item ' expanded active"
+          >
+            <button
+              class="Button IconButton"
+              type="button"
+            >
+              <svg
+                class="DisclosureTriangleIcon Icon"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  points="37,35 37,65 63,50"
+                />
+              </svg>
+            </button>
+            <div
+              class="octo-sidebar-title"
+              title="board title"
+            >
+              i board title
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-dots-horizontal OptionsIcon"
+                />
+              </button>
+            </div>
+          </div>
+          <div
+            class="octo-sidebar-item subitem active"
+          >
+            <svg
+              class="BoardIcon Icon"
+              viewBox="0 0 100 100"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                height="80"
+                rx="5"
+                ry="5"
+                width="80"
+                x="10"
+                y="10"
+              />
+              <polyline
+                points="28,25 28,55"
+                style="stroke-width: 15px;"
+              />
+              <polyline
+                points="50,25 50,70"
+                style="stroke-width: 15px;"
+              />
+              <polyline
+                points="72,25 72,45"
+                style="stroke-width: 15px;"
+              />
+            </svg>
+            <div
+              class="octo-sidebar-title"
+              title="view title"
+            >
+              view title
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="octo-spacer"
+      />
+      <div
+        class="SidebarAddBoardMenu"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="menu-entry"
+          >
+            + Add board
+          </div>
+        </div>
+      </div>
+      <div
+        class="SidebarSettingsMenu"
+      >
+        <div
+          aria-label="menuwrapper"
+          class="MenuWrapper"
+          role="button"
+        >
+          <div
+            class="menu-entry"
+          >
+            Settings
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="mainFrame"
+    >
+      <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="ViewTitle"
+          >
+            <div
+              class="add-buttons add-visible"
+            >
+              <button
+                type="button"
+              >
+                <svg
+                  class="HideIcon Icon"
+                  viewBox="0 0 640 512"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
+                  />
+                </svg>
+                <span>
+                  hide description
+                </span>
+              </button>
+            </div>
+            <div
+              class="title"
+            >
+              <div
+                class="BlockIconSelector"
+              >
+                <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"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          style="display: block; bottom: 0px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px; height: 53px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px; width: 0px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line"
+                                      role="presentation"
+                                    >
+                                      <span
+                                        role="presentation"
+                                        style="padding-right: .1px;"
+                                      >
+                                        description
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ViewHeader"
+          >
+            <input
+              class="Editable undefined"
+              placeholder="Untitled View"
+              spellcheck="true"
+              title="view title"
+              value="view title"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-chevron-down DropdownIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-spacer"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Properties
+                </span>
+              </button>
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Group by: 
+                  <span
+                    id="groupByLabel"
+                  >
+                    Property 2
+                  </span>
+                </span>
+              </button>
+            </div>
+            <div
+              class="ModalWrapper"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Filter
+                </span>
+              </button>
+            </div>
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  Sort
+                </span>
+              </button>
+            </div>
+            <button
+              type="button"
+            >
+              <span>
+                Search
+              </span>
+            </button>
+            <div
+              class="ModalWrapper"
+            >
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button 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 Property 2 property will go here. This column cannot be removed."
+              >
+                No Property 2
+              </span>
+              
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    3
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button IconButton"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
+              <button
+                class="Button 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 undefined"
+                  placeholder="New Select"
+                  spellcheck="true"
+                  title="value 2"
+                  value="value 2"
+                />
+              </span>
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    0
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+              <div
+                aria-label="menuwrapper"
+                class="MenuWrapper"
+                role="button"
+              >
+                <button
+                  class="Button IconButton"
+                  type="button"
+                >
+                  <i
+                    class="CompassIcon icon-dots-horizontal OptionsIcon"
+                  />
+                </button>
+              </div>
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-plus AddIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-board-header-cell narrow"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + Add a group
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="octo-board-body"
+            id="mainBoardBody"
+          >
+            <div
+              class="octo-board-column"
+            >
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-1
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-2
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="true"
+                style="opacity: 1;"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper optionsMenu"
+                  role="button"
+                >
+                  <button
+                    class="Button IconButton"
+                    type="button"
+                  >
+                    <i
+                      class="CompassIcon icon-dots-horizontal OptionsIcon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-3
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <button
+                type="button"
+              >
+                <span>
+                  + New
+                </span>
+              </button>
+            </div>
+            <div
+              class="octo-board-column"
+            >
+              <button
+                type="button"
+              >
+                <span>
+                  + New
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`src/components/workspace should match snapshot with readonly 1`] = `
+<div>
+  <div
+    class="Workspace"
+  >
+    <div
+      class="mainFrame"
+    >
+      <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="ViewTitle"
+          >
+            <div
+              class="add-buttons add-visible"
+            />
+            <div
+              class="title"
+            >
+              <div
+                class="BlockIconSelector"
+              >
+                <div
+                  aria-label="menuwrapper"
+                  class="MenuWrapper"
+                  role="button"
+                >
+                  <div
+                    class="octo-icon size-m"
+                  >
+                    <span>
+                      i
+                    </span>
+                  </div>
+                </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"
+                />
+                <div
+                  class="octo-editor-active Editor"
+                  style="visibility: hidden; position: absolute; top: 0px; left: 0px;"
+                >
+                  <div
+                    id="test-id-wrapper"
+                  >
+                    <textarea
+                      id="test-id"
+                      style="display: none;"
+                    />
+                    <div
+                      class="EasyMDEContainer"
+                    >
+                      <div
+                        class="CodeMirror cm-s-easymde CodeMirror-wrap"
+                      >
+                        <div
+                          style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 0px;"
+                        >
+                          <textarea
+                            autocapitalize="off"
+                            autocorrect="off"
+                            spellcheck="false"
+                            style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"
+                            tabindex="0"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-vscrollbar"
+                          cm-not-content="true"
+                          style="display: block; bottom: 0px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="min-width: 1px; height: 53px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-hscrollbar"
+                          cm-not-content="true"
+                          tabindex="-1"
+                        >
+                          <div
+                            style="height: 100%; min-height: 1px; width: 0px;"
+                          />
+                        </div>
+                        <div
+                          class="CodeMirror-scrollbar-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-gutter-filler"
+                          cm-not-content="true"
+                        />
+                        <div
+                          class="CodeMirror-scroll"
+                          style="min-height: 10px;"
+                          tabindex="-1"
+                        >
+                          <div
+                            class="CodeMirror-sizer"
+                            style="margin-left: 0px; padding-right: 0px; padding-bottom: 0px;"
+                          >
+                            <div
+                              style="position: relative;"
+                            >
+                              <div
+                                class="CodeMirror-lines"
+                                role="presentation"
+                              >
+                                <div
+                                  role="presentation"
+                                  style="position: relative; outline: none;"
+                                >
+                                  <div
+                                    class="CodeMirror-measure"
+                                  />
+                                  <div
+                                    class="CodeMirror-measure"
+                                  >
+                                    <pre
+                                      class="CodeMirror-line"
+                                      role="presentation"
+                                    >
+                                      <span
+                                        role="presentation"
+                                        style="padding-right: .1px;"
+                                      >
+                                        description
+                                      </span>
+                                    </pre>
+                                  </div>
+                                  <div
+                                    style="position: relative; z-index: 1;"
+                                  />
+                                  <div
+                                    class="CodeMirror-cursors"
+                                  />
+                                  <div
+                                    class="CodeMirror-code"
+                                    role="presentation"
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            style="position: absolute; height: 50px; width: 1px; border-bottom: 0px solid transparent;"
+                          />
+                          <div
+                            class="CodeMirror-gutters"
+                            style="display: none;"
+                          />
+                        </div>
+                      </div>
+                      <div
+                        class="editor-preview-side editor-preview"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="ViewHeader"
+          >
+            <input
+              class="Editable readonly undefined"
+              placeholder="Untitled View"
+              readonly=""
+              spellcheck="true"
+              title="view title"
+              value="view title"
+            />
+            <div
+              aria-label="menuwrapper"
+              class="MenuWrapper"
+              role="button"
+            >
+              <button
+                class="Button IconButton"
+                type="button"
+              >
+                <i
+                  class="CompassIcon icon-chevron-down DropdownIcon"
+                />
+              </button>
+            </div>
+            <div
+              class="octo-spacer"
+            />
+            <button
+              type="button"
+            >
+              <span>
+                Search
+              </span>
+            </button>
+          </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 Property 2 property will go here. This column cannot be removed."
+              >
+                No Property 2
+              </span>
+              
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    3
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+            </div>
+            <div
+              class="octo-board-header-cell KanbanColumnHeader"
+              draggable="true"
+              style="opacity: 1;"
+            >
+              <span
+                class="Label propColorBlue "
+              >
+                <input
+                  class="Editable readonly undefined"
+                  placeholder="New Select"
+                  readonly=""
+                  spellcheck="true"
+                  title="value 2"
+                  value="value 2"
+                />
+              </span>
+              <div
+                class="KanbanCalculation"
+              >
+                <button
+                  type="button"
+                >
+                  <span>
+                    0
+                  </span>
+                </button>
+              </div>
+              <div
+                class="octo-spacer"
+              />
+            </div>
+          </div>
+          <div
+            class="octo-board-body"
+            id="mainBoardBody"
+          >
+            <div
+              class="octo-board-column"
+            >
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-1
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-2
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+              <div
+                class="KanbanCard"
+                draggable="false"
+                style="opacity: 1;"
+              >
+                <div
+                  class="octo-icontitle"
+                >
+                  <div
+                    class="octo-icon"
+                  >
+                    i
+                  </div>
+                  <div>
+                    card-3
+                  </div>
+                </div>
+                <div
+                  class="octo-tooltip tooltip-top"
+                  data-tooltip="Property 1"
+                >
+                  <div
+                    class="octo-propertyvalue"
+                  >
+                    value1
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="octo-board-column"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/webapp/src/components/workspace.test.tsx b/webapp/src/components/workspace.test.tsx
new file mode 100644
index 000000000..933b412e6
--- /dev/null
+++ b/webapp/src/components/workspace.test.tsx
@@ -0,0 +1,259 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import {act, render} from '@testing-library/react'
+import React from 'react'
+import {Provider as ReduxProvider} from 'react-redux'
+import {MemoryRouter} from 'react-router-dom'
+import {mocked} from 'ts-jest/utils'
+
+import userEvent from '@testing-library/user-event'
+
+import {IUser, UserWorkspace} from '../user'
+import {TestBlockFactory} from '../test/testBlockFactory'
+import {mockDOM, mockMatchMedia, mockStateStore, wrapDNDIntl} from '../testUtils'
+import {Constants} from '../constants'
+import {Utils} from '../utils'
+
+import Workspace from './workspace'
+
+Object.defineProperty(Constants, 'versionString', {value: '1.0.0'})
+jest.useFakeTimers()
+jest.mock('../utils')
+const mockedUtils = mocked(Utils, true)
+const workspace1: UserWorkspace = {
+    id: 'workspace_1',
+    title: 'Workspace 1',
+    boardCount: 1,
+}
+const board = TestBlockFactory.createBoard()
+board.id = 'board1'
+board.rootId = 'root1'
+board.workspaceId = workspace1.id
+board.fields.cardProperties = [
+    {
+        id: 'property1',
+        name: 'Property 1',
+        type: 'text',
+        options: [
+            {
+                id: 'value1',
+                value: 'value 1',
+                color: 'propColorBrown',
+            },
+        ],
+    },
+    {
+        id: 'property2',
+        name: 'Property 2',
+        type: 'select',
+        options: [
+            {
+                id: 'value2',
+                value: 'value 2',
+                color: 'propColorBlue',
+            },
+        ],
+    },
+]
+const activeView = TestBlockFactory.createBoardView(board)
+activeView.id = 'view1'
+activeView.fields.hiddenOptionIds = []
+activeView.fields.visiblePropertyIds = ['property1']
+activeView.fields.visibleOptionIds = ['value1']
+activeView.workspaceId = workspace1.id
+const card1 = TestBlockFactory.createCard(board)
+card1.id = 'card1'
+card1.title = 'card-1'
+card1.workspaceId = workspace1.id
+const card2 = TestBlockFactory.createCard(board)
+card2.id = 'card2'
+card2.title = 'card-2'
+card2.workspaceId = workspace1.id
+const card3 = TestBlockFactory.createCard(board)
+card3.id = 'card3'
+card3.title = 'card-3'
+card3.workspaceId = workspace1.id
+
+const me: IUser = {id: 'user-id-1', username: 'username_1', email: '', props: {}, createAt: 0, updateAt: 0}
+
+jest.mock('react-router-dom', () => {
+    const originalModule = jest.requireActual('react-router-dom')
+
+    return {
+        ...originalModule,
+        useRouteMatch: jest.fn(() => {
+            return {
+                params: {
+                    boardId: board.id,
+                    viewId: activeView.id,
+                    cardId: card1.id,
+                },
+            }
+        }),
+    }
+})
+
+describe('src/components/workspace', () => {
+    const state = {
+        workspace: {
+            current: workspace1,
+        },
+        users: {
+            me,
+            workspaceUsers: [me],
+        },
+        boards: {
+            current: board.id,
+            boards: {
+                [board.id]: board,
+            },
+            templates: [],
+        },
+        globalTemplates: {
+            value: [],
+        },
+        views: {
+            views: {
+                [activeView.id]: activeView,
+            },
+            current: activeView.id,
+        },
+        cards: {
+            templates: [],
+            cards: [card1, card2, card3],
+        },
+        searchText: {},
+        clientConfig: {
+            value: {
+                telemetry: true,
+                telemetryid: 'telemetry',
+                enablePublicSharedBoards: true,
+                featureFlags: {},
+            },
+        },
+        contents: {
+            contents: {},
+        },
+        comments: {
+            comments: {},
+        },
+    }
+    const store = mockStateStore([], state)
+    beforeAll(() => {
+        mockDOM()
+        mockMatchMedia({matches: true})
+    })
+    beforeEach(() => {
+        jest.clearAllMocks()
+        mockedUtils.createGuid.mockReturnValue('test-id')
+    })
+    test('should match snapshot', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <Workspace readonly={false}/>
+                </ReduxProvider>,
+            ), {wrapper: MemoryRouter})
+            container = result.container
+            jest.runOnlyPendingTimers()
+        })
+        expect(container).toMatchSnapshot()
+    })
+    test('should match snapshot with readonly', async () => {
+        let container
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <Workspace readonly={true}/>
+                </ReduxProvider>,
+            ), {wrapper: MemoryRouter})
+            container = result.container
+            jest.runOnlyPendingTimers()
+        })
+        expect(container).toMatchSnapshot()
+    })
+    test('return workspace and showcard', async () => {
+        let container:Element | undefined
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <Workspace readonly={false}/>
+                </ReduxProvider>,
+            ), {wrapper: MemoryRouter})
+            container = result.container
+            jest.runOnlyPendingTimers()
+            const cardElements = container!.querySelectorAll('.KanbanCard')
+            expect(cardElements).toBeDefined()
+            const cardElement = cardElements[0]
+            userEvent.click(cardElement)
+        })
+        expect(container).toMatchSnapshot()
+    })
+    test('return workspace readonly and showcard', async () => {
+        let container:Element | undefined
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={store}>
+                    <Workspace readonly={true}/>
+                </ReduxProvider>,
+            ), {wrapper: MemoryRouter})
+            container = result.container
+            jest.runOnlyPendingTimers()
+            const cardElements = container!.querySelectorAll('.KanbanCard')
+            expect(cardElements).toBeDefined()
+            const cardElement = cardElements[0]
+            userEvent.click(cardElement)
+        })
+        expect(container).toMatchSnapshot()
+        expect(mockedUtils.getReadToken).toBeCalledTimes(1)
+    })
+    test('return workspace with EmptyCenterPanel component', async () => {
+        const emptyStore = mockStateStore([], {
+            users: {
+                me,
+                workspaceUsers: [me],
+            },
+            workspace: {
+                current: workspace1,
+            },
+            boards: {
+                current: board.id,
+                boards: {
+                    [board.id]: board,
+                },
+                templates: [],
+            },
+            views: {
+                views: {},
+            },
+            cards: {
+                cards: [],
+            },
+            globalTemplates: {
+                value: [],
+            },
+            searchText: {},
+            clientConfig: {
+                value: {
+                    telemetry: true,
+                    telemetryid: 'telemetry',
+                    enablePublicSharedBoards: true,
+                    featureFlags: {},
+                },
+            },
+        })
+        let container:Element | undefined
+        await act(async () => {
+            const result = render(wrapDNDIntl(
+                <ReduxProvider store={emptyStore}>
+                    <Workspace readonly={true}/>
+                </ReduxProvider>,
+            ), {wrapper: MemoryRouter})
+            container = result.container
+            jest.runOnlyPendingTimers()
+        })
+
+        expect(container).toMatchSnapshot()
+    })
+})