luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix #1397. Add show empty toggle to Dashboard (#1398)

Browse source 
* Fix #1397. Add show empty toggle to Dashboard

* Update Jest snapshot

* Fix jest

* Use UserSettingKey
This commit is contained in:
Chen-I Lim 2021-10-04 14:27:30 -07:00 committed by GitHub
parent c332e455c1
commit 58f6b8031a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 87 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
webapp/i18n/en.json
View file

@ -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",

36
webapp/src/pages/dashboard/__snapshots__/centerContent.test.tsx.snap
View file

@ -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"
>

12
webapp/src/pages/dashboard/__snapshots__/dashboardPage.test.tsx.snap
View file

@ -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"
>

15
webapp/src/pages/dashboard/centerContent.tsx
View file

@ -12,8 +12,10 @@ 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) || []
@ -21,6 +23,7 @@ const DashboardCenterContent = (): JSX.Element => {
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

15
webapp/src/pages/dashboard/dashboardPage.scss
View file

@ -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 {

11
webapp/src/userSettings.ts
View file

@ -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))