From 4093516a0db895c684e448ee9b4ae420b972dbb0 Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 27 Apr 2023 12:46:40 +0100 Subject: [PATCH 1/4] Initial commit of filter UX behaviour --- .../_components/BuilderSidePanel.svelte | 44 +++++++++++++++---- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 9a6d9ea1d3..b31488e492 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -28,6 +28,10 @@ let inviting = false let searchFocus = false + //Or searching = true? + let filtered = true + $: console.log("filtering enabled ", filtered) + let appInvites = [] let filteredInvites = [] let filteredUsers = [] @@ -52,15 +56,31 @@ } const filterInvites = async query => { - appInvites = await getInvites() - if (!query || query == "") { - filteredInvites = appInvites + if (!prodAppId) { return } - filteredInvites = appInvites.filter(invite => invite.email.includes(query)) + + appInvites = await getInvites() + + //On Focus behaviour + if (!filtered && (!query || query == "")) { + filteredInvites = [...appInvites] + return + } + + filteredInvites = appInvites.filter(invite => { + const inviteInfo = invite.info?.apps + if ((!query || query == "") && inviteInfo && prodAppId) { + return Object.keys(inviteInfo).includes(prodAppId) + } + return invite.email.includes(query) + }) } - $: filterInvites(query) + $: filtered, prodAppId, filterInvites(query) + $: if (searchFocus === true) { + filtered = false + } const usersFetch = fetchData({ API, @@ -351,7 +371,7 @@ onMount(() => { rendered = true - searchFocus = true + // searchFocus = true }) function handleKeyDown(evt) { @@ -417,7 +437,6 @@ autocomplete="off" disabled={inviting} value={query} - autofocus on:input={e => { query = e.target.value.trim() }} @@ -428,16 +447,20 @@ { + if (!filtered) { + filtered = true + } if (!query) { return } query = null userOnboardResponse = null + filtered = true }} > - + @@ -481,6 +504,8 @@
+ + +
{/each} From bb981603174bfc4f79b3e85b0bd703c1bb7965f9 Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 2 May 2023 14:35:15 +0100 Subject: [PATCH 2/4] On focus search behaviour renders to 100 invites, all groups and the first page of current users --- .../_components/BuilderSidePanel.svelte | 51 ++++++++++--------- 1 file changed, 28 insertions(+), 23 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index b31488e492..7341dcd35c 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -28,9 +28,9 @@ let inviting = false let searchFocus = false - //Or searching = true? - let filtered = true - $: console.log("filtering enabled ", filtered) + // Initially filter entities without app access + // Show all when false + let filterByAppAccess = true let appInvites = [] let filteredInvites = [] @@ -38,7 +38,6 @@ let filteredGroups = [] let selectedGroup let userOnboardResponse = null - let userLimitReachedModal $: queryIsEmail = emailValidator(query) === true @@ -63,8 +62,9 @@ appInvites = await getInvites() //On Focus behaviour - if (!filtered && (!query || query == "")) { - filteredInvites = [...appInvites] + if (!filterByAppAccess && (!query || query == "")) { + filteredInvites = + appInvites.length > 100 ? appInvites.slice(0, 100) : [...appInvites] return } @@ -77,9 +77,9 @@ }) } - $: filtered, prodAppId, filterInvites(query) + $: filterByAppAccess, prodAppId, filterInvites(query) $: if (searchFocus === true) { - filtered = false + filterByAppAccess = false } const usersFetch = fetchData({ @@ -99,9 +99,9 @@ } await usersFetch.update({ query: { - appId: query ? null : prodAppId, + appId: query || !filterByAppAccess ? null : prodAppId, email: query, - paginated: query ? null : false, + paginated: query || !filterByAppAccess ? null : false, }, }) await usersFetch.refresh() @@ -127,7 +127,12 @@ } const debouncedUpdateFetch = Utils.debounce(searchUsers, 250) - $: debouncedUpdateFetch(query, $store.builderSidePanel, loaded) + $: debouncedUpdateFetch( + query, + $store.builderSidePanel, + loaded, + filterByAppAccess + ) const updateAppUser = async (user, role) => { if (!prodAppId) { @@ -202,9 +207,10 @@ } const searchGroups = (userGroups, query) => { - let filterGroups = query?.length - ? userGroups - : getAppGroups(userGroups, prodAppId) + let filterGroups = + query?.length || !filterByAppAccess + ? userGroups + : getAppGroups(userGroups, prodAppId) return filterGroups .filter(group => { if (!query?.length) { @@ -234,7 +240,7 @@ } // Adds the 'role' attribute and sets it to the current app. - $: enrichedGroups = getEnrichedGroups($groups) + $: enrichedGroups = getEnrichedGroups($groups, filterByAppAccess) $: filteredGroups = searchGroups(enrichedGroups, query) $: groupUsers = buildGroupUsers(filteredGroups, filteredUsers) $: allUsers = [...filteredUsers, ...groupUsers] @@ -246,7 +252,7 @@ specific roles for the app. */ const buildGroupUsers = (userGroups, filteredUsers) => { - if (query) { + if (query || !filterByAppAccess) { return [] } // Must exclude users who have explicit privileges @@ -371,7 +377,6 @@ onMount(() => { rendered = true - // searchFocus = true }) function handleKeyDown(evt) { @@ -447,20 +452,20 @@ { - if (!filtered) { - filtered = true + if (!filterByAppAccess) { + filterByAppAccess = true } if (!query) { return } query = null userOnboardResponse = null - filtered = true + filterByAppAccess = true }} > - + @@ -581,7 +586,7 @@ {#if filteredUsers?.length}
-
+
Users
Access
From 20885a708d56969502c4c4505f95a32f3c8eeabd Mon Sep 17 00:00:00 2001 From: Dean Date: Wed, 3 May 2023 12:23:21 +0100 Subject: [PATCH 3/4] Feedback updates --- .../_components/BuilderSidePanel.svelte | 40 ++++++------------- 1 file changed, 12 insertions(+), 28 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 7341dcd35c..5b35e65ed9 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -28,10 +28,6 @@ let inviting = false let searchFocus = false - // Initially filter entities without app access - // Show all when false - let filterByAppAccess = true - let appInvites = [] let filteredInvites = [] let filteredUsers = [] @@ -62,7 +58,7 @@ appInvites = await getInvites() //On Focus behaviour - if (!filterByAppAccess && (!query || query == "")) { + if (searchFocus && !query) { filteredInvites = appInvites.length > 100 ? appInvites.slice(0, 100) : [...appInvites] return @@ -77,10 +73,7 @@ }) } - $: filterByAppAccess, prodAppId, filterInvites(query) - $: if (searchFocus === true) { - filterByAppAccess = false - } + $: searchFocus, prodAppId, filterInvites(query) const usersFetch = fetchData({ API, @@ -99,9 +92,9 @@ } await usersFetch.update({ query: { - appId: query || !filterByAppAccess ? null : prodAppId, + appId: query || searchFocus ? null : prodAppId, email: query, - paginated: query || !filterByAppAccess ? null : false, + paginated: query || searchFocus ? null : false, }, }) await usersFetch.refresh() @@ -127,12 +120,7 @@ } const debouncedUpdateFetch = Utils.debounce(searchUsers, 250) - $: debouncedUpdateFetch( - query, - $store.builderSidePanel, - loaded, - filterByAppAccess - ) + $: debouncedUpdateFetch(query, $store.builderSidePanel, loaded, searchFocus) const updateAppUser = async (user, role) => { if (!prodAppId) { @@ -208,7 +196,7 @@ const searchGroups = (userGroups, query) => { let filterGroups = - query?.length || !filterByAppAccess + query?.length || searchFocus ? userGroups : getAppGroups(userGroups, prodAppId) return filterGroups @@ -240,7 +228,7 @@ } // Adds the 'role' attribute and sets it to the current app. - $: enrichedGroups = getEnrichedGroups($groups, filterByAppAccess) + $: enrichedGroups = getEnrichedGroups($groups, searchFocus) $: filteredGroups = searchGroups(enrichedGroups, query) $: groupUsers = buildGroupUsers(filteredGroups, filteredUsers) $: allUsers = [...filteredUsers, ...groupUsers] @@ -252,7 +240,7 @@ specific roles for the app. */ const buildGroupUsers = (userGroups, filteredUsers) => { - if (query || !filterByAppAccess) { + if (query || searchFocus) { return [] } // Must exclude users who have explicit privileges @@ -452,20 +440,19 @@ { - if (!filterByAppAccess) { - filterByAppAccess = true + if (searchFocus) { + searchFocus = false } if (!query) { return } query = null userOnboardResponse = null - filterByAppAccess = true }} > - +
@@ -509,8 +496,6 @@
- - -
{/each} From 5cf0e57eec977074c1c7e804b56d85ad2465f405 Mon Sep 17 00:00:00 2001 From: Dean Date: Thu, 4 May 2023 16:01:34 +0100 Subject: [PATCH 4/4] Feedback updates and a fix pass the current query after updating a user invite --- .../_components/BuilderSidePanel.svelte | 43 ++++++++++++------- 1 file changed, 28 insertions(+), 15 deletions(-) diff --git a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte index 5b35e65ed9..9dce1fdf9b 100644 --- a/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/_components/BuilderSidePanel.svelte @@ -28,6 +28,10 @@ let inviting = false let searchFocus = false + // Initially filter entities without app access + // Show all when false + let filterByAppAccess = true + let appInvites = [] let filteredInvites = [] let filteredUsers = [] @@ -58,7 +62,7 @@ appInvites = await getInvites() //On Focus behaviour - if (searchFocus && !query) { + if (!filterByAppAccess && !query) { filteredInvites = appInvites.length > 100 ? appInvites.slice(0, 100) : [...appInvites] return @@ -66,14 +70,17 @@ filteredInvites = appInvites.filter(invite => { const inviteInfo = invite.info?.apps - if ((!query || query == "") && inviteInfo && prodAppId) { + if (!query && inviteInfo && prodAppId) { return Object.keys(inviteInfo).includes(prodAppId) } return invite.email.includes(query) }) } - $: searchFocus, prodAppId, filterInvites(query) + $: filterByAppAccess, prodAppId, filterInvites(query) + $: if (searchFocus === true) { + filterByAppAccess = false + } const usersFetch = fetchData({ API, @@ -92,9 +99,9 @@ } await usersFetch.update({ query: { - appId: query || searchFocus ? null : prodAppId, + appId: query || !filterByAppAccess ? null : prodAppId, email: query, - paginated: query || searchFocus ? null : false, + paginated: query || !filterByAppAccess ? null : false, }, }) await usersFetch.refresh() @@ -120,7 +127,12 @@ } const debouncedUpdateFetch = Utils.debounce(searchUsers, 250) - $: debouncedUpdateFetch(query, $store.builderSidePanel, loaded, searchFocus) + $: debouncedUpdateFetch( + query, + $store.builderSidePanel, + loaded, + filterByAppAccess + ) const updateAppUser = async (user, role) => { if (!prodAppId) { @@ -196,7 +208,7 @@ const searchGroups = (userGroups, query) => { let filterGroups = - query?.length || searchFocus + query?.length || !filterByAppAccess ? userGroups : getAppGroups(userGroups, prodAppId) return filterGroups @@ -228,7 +240,7 @@ } // Adds the 'role' attribute and sets it to the current app. - $: enrichedGroups = getEnrichedGroups($groups, searchFocus) + $: enrichedGroups = getEnrichedGroups($groups, filterByAppAccess) $: filteredGroups = searchGroups(enrichedGroups, query) $: groupUsers = buildGroupUsers(filteredGroups, filteredUsers) $: allUsers = [...filteredUsers, ...groupUsers] @@ -240,7 +252,7 @@ specific roles for the app. */ const buildGroupUsers = (userGroups, filteredUsers) => { - if (query || searchFocus) { + if (query || !filterByAppAccess) { return [] } // Must exclude users who have explicit privileges @@ -335,12 +347,12 @@ [prodAppId]: role, }, }) - await filterInvites() + await filterInvites(query) } const onUninviteAppUser = async invite => { await uninviteAppUser(invite) - await filterInvites() + await filterInvites(query) } // Purge only the app from the invite or recind the invite if only 1 app remains? @@ -440,19 +452,20 @@ { - if (searchFocus) { - searchFocus = false + if (!filterByAppAccess) { + filterByAppAccess = true } if (!query) { return } query = null userOnboardResponse = null + filterByAppAccess = true }} > - +