Fix #1397. Add show empty toggle to Dashboard

webapp/i18n/en.json

@@ -38,6 +38,7 @@
   "DashboardPage.CenterPanel.ChangeChannels": "Use the switcher to easily change channels",
   "DashboardPage.CenterPanel.NoWorkspaces": "Sorry, we could not find any channels matching that term",
   "DashboardPage.CenterPanel.NoWorkspacesDescription": "Please try searching for another term",
+  "DashboardPage.showEmpty": "Show empty",
   "DashboardPage.title": "Dashboard",
   "Dialog.closeDialog": "Close dialog",
   "EditableDayPicker.today": "Today",

webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap

@@ -13,6 +13,18 @@ exports[`pages/dashboard/CenterContent base case 1`] = `
       >
         Dashboard
       </h1>
+      <div
+        class="DashboardPage__showEmpty"
+      >
+        Show empty
+        <div
+          class="Switch on"
+        >
+          <div
+            class="octo-switch-inner"
+          />
+        </div>
+      </div>
       <div
         class="DashboardPage__search"
       >
@@ -97,6 +109,18 @@ exports[`pages/dashboard/CenterContent search filter - search non-existing works
       >
         Dashboard
       </h1>
+      <div
+        class="DashboardPage__showEmpty"
+      >
+        Show empty
+        <div
+          class="Switch on"
+        >
+          <div
+            class="octo-switch-inner"
+          />
+        </div>
+      </div>
       <div
         class="DashboardPage__search"
       >
@@ -177,6 +201,18 @@ exports[`pages/dashboard/CenterContent search filter 1`] = `
       >
         Dashboard
       </h1>
+      <div
+        class="DashboardPage__showEmpty"
+      >
+        Show empty
+        <div
+          class="Switch on"
+        >
+          <div
+            class="octo-switch-inner"
+          />
+        </div>
+      </div>
       <div
         class="DashboardPage__search"
       >

webapp/src/pages/dashboard/__snapshots__/dashboardPage.test.tsx.snap

@@ -327,6 +327,18 @@ exports[`pages/dashboard/DashboardPage base case 1`] = `
         >
           Dashboard
         </h1>
+        <div
+          class="DashboardPage__showEmpty"
+        >
+          Show empty
+          <div
+            class="Switch on"
+          >
+            <div
+              class="octo-switch-inner"
+            />
+          </div>
+        </div>
         <div
           class="DashboardPage__search"
         >

webapp/src/pages/dashboard/centerContent.tsx

@@ -12,15 +12,18 @@ import {UserWorkspace} from '../../user'
 import {useAppDispatch, useAppSelector} from '../../store/hooks'
 import {getUserWorkspaceList, setUserWorkspaces} from '../../store/workspace'
 import octoClient from '../../octoClient'
+import Switch from '../../widgets/switch'
 
 import SearchIcon from '../../widgets/icons/search'
+import {UserSettings} from '../../userSettings'
 
 const DashboardCenterContent = (): JSX.Element => {
     const rawWorkspaces = useAppSelector<UserWorkspace[]>(getUserWorkspaceList) || []
     const dispatch = useAppDispatch()
     const history = useHistory()
     const intl = useIntl()
     const [searchFilter, setSearchFilter] = useState('')
+    const [showEmptyWorkspaces, setShowEmptyWorkspaces] = useState(UserSettings.dashboardShowEmpty)
 
     const initializeUserWorkspaces = async () => {
         const userWorkspaces = await octoClient.getUserWorkspaces()
@@ -36,7 +39,7 @@ const DashboardCenterContent = (): JSX.Element => {
     })
 
     const userWorkspaces = rawWorkspaces.
-        filter((workspace) => workspace.title.toLowerCase().includes(searchFilter) || workspace.boardCount.toString().includes(searchFilter)).
+        filter((workspace) => (workspace.boardCount > 0 || showEmptyWorkspaces) && (workspace.title.toLowerCase().includes(searchFilter) || workspace.boardCount.toString().includes(searchFilter))).
         sort((a, b) => {
             if ((a.boardCount === 0 && b.boardCount === 0) || (a.boardCount !== 0 && b.boardCount !== 0)) {
                 return a.title.localeCompare(b.title)
@@ -49,6 +52,16 @@ const DashboardCenterContent = (): JSX.Element => {
         <div className='DashboardCenterContent'>
             <div className='DashboardPage__header'>
                 <h1 className='h1'>{intl.formatMessage({id: 'DashboardPage.title', defaultMessage: 'Dashboard'})}</h1>
+                <div className='DashboardPage__showEmpty'>
+                    {intl.formatMessage({id: 'DashboardPage.showEmpty', defaultMessage: 'Show empty'})}
+                    <Switch
+                        isOn={showEmptyWorkspaces}
+                        onChanged={() => {
+                            UserSettings.dashboardShowEmpty = !showEmptyWorkspaces
+                            setShowEmptyWorkspaces(!showEmptyWorkspaces)
+                        }}
+                    />
+                </div>
                 <div className='DashboardPage__search'>
                     <SearchIcon/>
                     <input

webapp/src/pages/dashboard/dashboardPage.scss

@@ -39,7 +39,20 @@
         position: relative;
         display: flex;
         justify-content: space-between;
-        align-items: flex-end;
+        align-items: center;
+    }
+
+    &__showEmpty {
+        margin-right: 20px;
+        margin-left: auto;
+        padding-left: 20px;
+        min-width: 150px;
+        display: flex;
+        align-items: center;
+
+        .Switch {
+            margin-left: 10px;
+        }
     }
 
     &__search {

webapp/src/userSettings.ts

@@ -16,7 +16,8 @@ enum UserSettingKey {
     EmojiMartFrequently = 'emoji-mart.frequently',
     RandomIcons = 'randomIcons',
     MobileWarningClosed = 'mobileWarningClosed',
-    WelcomePageViewed = 'welcomePageViewed'
+    WelcomePageViewed = 'welcomePageViewed',
+    DashboardShowEmpty = 'dashboardShowEmpty'
 }
 
 export class UserSettings {
@@ -92,6 +93,14 @@ export class UserSettings {
         UserSettings.set(UserSettingKey.RandomIcons, JSON.stringify(newValue))
     }
 
+    static get dashboardShowEmpty(): boolean {
+        return localStorage.getItem(UserSettingKey.DashboardShowEmpty) !== 'false'
+    }
+
+    static set dashboardShowEmpty(newValue: boolean) {
+        localStorage.setItem(UserSettingKey.DashboardShowEmpty, JSON.stringify(newValue))
+    }
+
     static getEmojiMartSetting(key: string): any {
         const prefixed = `emoji-mart.${key}`
         Utils.assert((Object as any).values(UserSettingKey).includes(prefixed))