User filter and segments (#299)

* Removed draft-js

* User segment WIP

* WIP: Populating filters from query param

* Almost final designs for Segments and Filters

* New component: Filter container

* Finished filter and segments basic implementation

* Added docs

* Removed console.log

* Fixed CodeQL warnings

* Removing CodeQL issues

* Removed unused import

---------

Co-authored-by: Rajat Saxena <[email protected]>

.gitignore

@@ -14,6 +14,7 @@ coverage
 
 # Text editors configurations
 .vscode
+.rgignore
 
 # Env file
 .env*.local

apps/docs/src/config.ts

@@ -93,6 +93,8 @@ export const SIDEBAR: Sidebar = {
             { text: "Introduction", link: "en/users/introduction" },
             { text: "Manage users", link: "en/users/manage" },
             { text: "User permissions", link: "en/users/permissions" },
+            { text: "Filter users", link: "en/users/filters" },
+            { text: "Segment users", link: "en/users/segments" },
         ],
         "Self hosting": [
             { text: "Why self host?", link: "en/self-hosting/introduction" },

apps/docs/src/pages/en/pages/blocks.md

@@ -4,7 +4,7 @@ description: Page blocks
 layout: ../../../layouts/MainLayout.astro
 ---
 
-Every page in CourseLit is made up of various blocks, stacked in a top to down fashion. Each block serves a unique purpose and can be customized.
+Every page in CourseLit is made up of various blocks, stacked in a top to bottom fashion. Each block serves a unique purpose and can be customized.
 
 The following screenshot shows [Header](/en/pages/header), [Banner](/en/pages/banner), [Content](/en/pages/content) and [Grid](/en/pages/grid) blocks in action. Different blocks are highlighted in different colors.
 

apps/docs/src/pages/en/users/filters.md

@@ -0,0 +1,66 @@
+---
+title: Filter users
+description: Filter users
+layout: ../../../layouts/MainLayout.astro
+---
+
+As your school grows, your user base will also grow. Filters help you in sifting through your users to quickly find the users you are interested in.
+
+![Users filters](/assets/users/user-filtering.png)
+
+## Apply a filter
+
+To apply a filter:
+
+1. Click on the `Filters` button to reveal all the available filters.
+
+![Users filters in action](/assets/users/filter-click.gif)
+
+2. Select the filter you are interested in, to reveal its settings.
+3. Click `Apply` to apply the filter. The applied filter will be visible beneath the filters bar.
+
+![Users filters applied](/assets/users/apply-filter.gif)
+
+4. The users list will refresh automatically and the total number of users satisfying the selected filter will be visible on the right side of the filters bar.
+
+![Total users count after filter apply](/assets/users/total-users-count-after-filter.png)
+
+## Remove a filter
+
+To remove a filter, simply click on the `Cross` icon on the filter chip.
+
+![Remove filter](/assets/users/remove-filter.gif)
+
+## Work with multiple filters
+
+You can add as many filters as you would like. You can additionally choose how these filters fit together.
+
+CourseLit offers two ways to match filters.
+
+##### Match any filter
+
+Users matching any of the filters will show up in the results. This is the default.
+
+##### Match all filters
+
+Users matching all of the applied filters will show up in the results.
+
+To switch the matching filter, select the desired option from the dropdown on the left (right beneath the `Segments` button).
+
+![Match filters](/assets/users/matching-filters.gif)
+
+## Search by email
+
+CourseLit offers a quick way to search users via email addresses. If you know any part of the user's email, you can quickly search for it by typing in the search bar.
+
+![Search by email filter](/assets/users/search-by-email-filter.gif)
+
+This filter behaves just like any other filter. Multiple patterns can be searched by entering one pattern at a time.
+
+## Next step
+
+Learn how to [segment users](/en/users/segment).
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/users/manage.md

@@ -8,15 +8,17 @@ layout: ../../../layouts/MainLayout.astro
 
 From the users list in the User's area, click on the user whose details you want to see. Following is how it looks.
 
-![User's details](/assets/users/user-details.png)
+![Access user's details](/assets/users/access-user-details.gif)
 
 On the left side, you see user's basic details and on the right side you see CourseLit's [permissions editor](/en/users/persmissions) using which you can control what a user can do on your school.
 
 If the user has not yet updated their name from their `Profile`, it will be indicated as `--`.
 
 ## Ban a user
 
-If you don't want to a user to log into your school, you can restrict their account. Following are the steps.
+If you don't want to a user to log into your school, you can restrict their account.
+
+To ban a user:
 
 1. Select on the user from the users list to open its editor.
 2. Flip the `Account active` toggle off as shown below.
@@ -25,15 +27,17 @@ If you don't want to a user to log into your school, you can restrict their acco
 
 Now when the user tries to generate a login link, they will get an error stating that there is some problem. They won't know that they have been banned.
 
-## Change user's permission
+## Change user's permissions
 
 Before changing user's permissions, read our [permissions](/en/users/permissions) guide so that you understand what you are doing.
 
-To change user's permissions, follow the steps.
+To change user's permissions:
 
 1. Select on the user from the users list to open its editor.
 2. On the permissions pane on the right, tick the boxes against the permissions to want to provide to the user.
 
+![User's details](/assets/users/user-details.png)
+
 ## Stuck somewhere?
 
 We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/docs/src/pages/en/users/permissions.md

@@ -4,32 +4,61 @@ description: User permissions
 layout: ../../../layouts/MainLayout.astro
 ---
 
-CourseLit offers a powerful user permissions system so that you can control who can do what in your school.
+CourseLit offers a powerful permissions system so that you can control who can do what in your school.
 
 You can bring your entire team including designers, content creators, editors etc. and provide fine-grained access to them.
 
 Following is how it looks (indicated in the red box).
 
-![User's permission editor](/assets/users/user-permission-editor.png)
+![User's permission editor](/assets/users/user-permissions-editor.png)
 
-## Team and Customer users
+## Understanding permissions
 
-If the user has the following permission, they are categorised as a `Customer`.
+Let take a moment to understand what all permissions are available and what aspect of CourseLit they control.
 
--   Enroll in courses
+-   **Manage products**
 
-If they have any of the following permissions, they are categorised as a `Team` member.
+    Create/update/delete your products.
 
--   Create content
--   Manage all content
--   Publish content
--   View files
--   Upload files
--   Manage files
--   Manage all files
--   Edit site
--   Edit settings
--   Edit users
+-   **Manage all products**
+
+    Create/update/delete any product in the school. This includes products created by other creators in the school.
+
+-   **Manage blog**
+
+    Create/update/delete new any blog posts.
+
+-   **Buy products**
+
+    Purchase products from the school.
+
+-   **Manage pages**
+
+    Update any page in the school.
+
+-   **Manage settings**
+
+    Update school wide settings like payments integration etc.
+
+-   **Manage users**
+
+    Access/update school's users.
+
+-   **View files**
+
+    Access school's files like images, videos, PDFs etc.
+
+-   **Upload files**
+
+    Upload media assets like images, videos, PDFs etc.
+
+-   **Manage files**
+
+    Update/delete your media assets
+
+-   **Manage all files**
+
+    Update/delete any media asset. This includes media uploaded by other creators in the school.
 
 ## Stuck somewhere?
 

apps/docs/src/pages/en/users/segments.md

@@ -0,0 +1,53 @@
+---
+title: Segment users
+description: Segment users
+layout: ../../../layouts/MainLayout.astro
+---
+
+You can bucket users with common characteristics into distinct groups called `Segments`. User segmentation helps you in managing the users efficiently.
+
+CourseLit offers an easy way to create new user segments. By default, your account has only one segment called `Everyone` which includes all the users in your school.
+
+## Switching segments
+
+By default, the `Everyone` segment is selected. The segment includes all the users in your school.
+
+To switch to any other previously saved segment, click on the segment button i.e. the button with the `Everyone` label.
+
+![Segment selector](/assets/users/segment-selector.png)
+
+Let's see how to create a segment.
+
+## Create a segment
+
+To create a segment:
+
+1. Apply some filters to reveal the `Save new segment` button.
+
+![Add filters for segmentation](/assets/users/add-filters-for-segmentation.gif)
+
+2. Once you are satisfied with the applied filters, click on the `Save new segment` button to reveal a popup.
+
+3. Enter a name for this user segment and click `Save`.
+
+![Save segment](/assets/users/save-segment.gif)
+
+4. The saved segment can now be accessed from the `Segments` dropdown on the left (as shown above).
+
+## Delete a segment
+
+To delete a segment:
+
+1. Click on the `Segments` button to reveal the saved segments.
+
+![Open segment popover](/assets/users/open-segment-popup.gif)
+
+2. Click on the `Trash can` icon against the segment you want to delete.
+
+3. Click `Delete` to confirm the deletion of the segment.
+
+![Delete segment](/assets/users/delete-segment.gif)
+
+## Stuck somewhere?
+
+We are always here for you. Come chat with us in our <a href="https://discord.com/invite/GR4bQsN" target="_blank">Discord</a> channel or send a tweet at <a href="https://twitter.com/courselit" target="_blank">@CourseLit</a>.

apps/web/.env

@@ -1,2 +1,2 @@
 JWT_SECRET=any_random_value
-DB_CONNECTION_STRING=mongodb_connection_string
+DB_CONNECTION_STRING=mongodb_connection_string

apps/web/components/admin/users/filter-container/filter-chip.tsx

@@ -0,0 +1,49 @@
+import { IconButton, Tooltip } from "@courselit/components-library";
+import { Cross } from "@courselit/icons";
+import { capitalize } from "@courselit/utils";
+import { USER_FILTER_CHIP_TOOLTIP } from "@ui-config/strings";
+import { useMemo } from "react";
+import Filter from "@ui-models/filter";
+import permissionToCaptionMap from "../permissions-to-caption-map";
+
+interface FilterChipProps {
+    filter: Filter;
+    index: number;
+    onRemove: (index: number) => void;
+}
+
+export default function FilterChip({
+    filter,
+    index,
+    onRemove,
+}: FilterChipProps) {
+    const { name, condition, value, valueLabel } = filter;
+
+    const displayedValue = useMemo(() => {
+        let dispValue = valueLabel || value;
+        if (name === "subscription") {
+            dispValue = "";
+        }
+        if (name === "permission") {
+            dispValue = permissionToCaptionMap[value];
+        }
+        return dispValue;
+    }, [name, value, valueLabel]);
+
+    return (
+        <div className="text-xs flex flex-wrap py-[2px] px-[4px] items-center rounded bg-slate-200">
+            <div>
+                <span className="font-medium">{capitalize(name)}</span>:{" "}
+                <span className="italic">{condition}</span>{" "}
+                {displayedValue && (
+                    <span className="font-medium"> {displayedValue}</span>
+                )}
+            </div>
+            <IconButton variant="transparent" onClick={() => onRemove(index)}>
+                <Tooltip title={USER_FILTER_CHIP_TOOLTIP}>
+                    <Cross />
+                </Tooltip>
+            </IconButton>
+        </div>
+    );
+}

apps/web/components/admin/users/filter-container/filter-editor/categories-map.ts

@@ -0,0 +1,20 @@
+import {
+    USER_FILTER_CATEGORY_EMAIL,
+    USER_FILTER_CATEGORY_LAST_ACTIVE,
+    USER_FILTER_CATEGORY_PERMISSION,
+    USER_FILTER_CATEGORY_PRODUCT,
+    USER_FILTER_CATEGORY_SIGNED_UP,
+    USER_FILTER_CATEGORY_SUBSCRIPTION,
+} from "@ui-config/strings";
+import Filter from "@ui-models/filter";
+
+const categoriesMap: Record<Filter["name"], string> = {
+    email: USER_FILTER_CATEGORY_EMAIL,
+    product: USER_FILTER_CATEGORY_PRODUCT,
+    lastActive: USER_FILTER_CATEGORY_LAST_ACTIVE,
+    signedUp: USER_FILTER_CATEGORY_SIGNED_UP,
+    subscription: USER_FILTER_CATEGORY_SUBSCRIPTION,
+    permission: USER_FILTER_CATEGORY_PERMISSION,
+};
+
+export default categoriesMap;