From eaec6a94cc873be4d16b961fd21e782ef5e54f74 Mon Sep 17 00:00:00 2001
From: Rajat Saxena <hi@rajatsaxena.dev>
Date: Tue, 26 Sep 2023 12:39:44 +0530
Subject: [PATCH] Documenation fix; Select component fix

---
 apps/docs/src/pages/en/courses/add-content.md |  2 +-
 .../src/pages/en/self-hosting/self-host.md    |  2 +-
 apps/web/.gitignore                           |  3 +
 apps/web/components/admin/users/index.tsx     | 58 ++++++++++---------
 .../src/featured/admin-widget.tsx             |  1 +
 .../components-library/src/form-field.tsx     |  4 +-
 packages/components-library/src/select.tsx    | 12 ++--
 7 files changed, 48 insertions(+), 34 deletions(-)

diff --git a/apps/docs/src/pages/en/courses/add-content.md b/apps/docs/src/pages/en/courses/add-content.md
index d4033d654..4c4b8b5ef 100644
--- a/apps/docs/src/pages/en/courses/add-content.md
+++ b/apps/docs/src/pages/en/courses/add-content.md
@@ -38,7 +38,7 @@ CourseLit supports eight types of lessons, which are as follows.
 
 7. Quiz
 
-    For quizzing your students. You can create graded and non-graded quizzes. 
+    For quizzing your students. You can create graded and non-graded quizzes.
 
     See the [guide to add a quiz](/en/lessons/add-quiz).
 
diff --git a/apps/docs/src/pages/en/self-hosting/self-host.md b/apps/docs/src/pages/en/self-hosting/self-host.md
index 9b2d3aee6..9c25d638c 100644
--- a/apps/docs/src/pages/en/self-hosting/self-host.md
+++ b/apps/docs/src/pages/en/self-hosting/self-host.md
@@ -13,7 +13,7 @@ We offer two ways to self-host CourseLit, which are as follows.
 
 To quickly spin up an instance of CourseLit on Vercel, click the following button.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcodelitdev%2Fcourselit&env=DB_CONNECTION_STRING,JWT_SECRET,SUPER_ADMIN_EMAIL,EMAIL_USER,EMAIL_PASS,EMAIL_HOST,EMAIL_FROM&envDescription=Configuration%20for%20your%20app&project-name=courselit&root-directory=apps%2Fweb&build-command=cd+..%2F+%26%26+git+checkout+workspace-based-resolution+%26%26+NODE_OPTIONS%3D--openssl-legacy-provider+yarn+build)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcodelitdev%2Fcourselit&env=DB_CONNECTION_STRING,JWT_SECRET,SUPER_ADMIN_EMAIL,EMAIL_USER,EMAIL_PASS,EMAIL_HOST,EMAIL_FROM&envDescription=Configuration%20for%20your%20app&project-name=courselit&root-directory=apps%2Fweb&build-command=cd+..%2F+%26%26+NODE_OPTIONS%3D--openssl-legacy-provider+yarn+build)
 
 > Note: File uploads will not work if you choose this method as this functionality is provided by our other product [MediaLit](https://github.com/codelitdev/medialit) which cannot be hosted on a serverless platforms like Vercel.
 
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
index 7d093c39f..e77579ff4 100644
--- a/apps/web/.gitignore
+++ b/apps/web/.gitignore
@@ -36,3 +36,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# analyze
+/analyze
diff --git a/apps/web/components/admin/users/index.tsx b/apps/web/components/admin/users/index.tsx
index 572529540..64bae3600 100644
--- a/apps/web/components/admin/users/index.tsx
+++ b/apps/web/components/admin/users/index.tsx
@@ -27,7 +27,7 @@ import { ThunkDispatch } from "redux-thunk";
 import { AnyAction } from "redux";
 import {
     Tooltip,
-    Select as SingleSelect,
+    Select,
     IconButton,
     Table,
     TableHead,
@@ -40,7 +40,7 @@ import {
 } from "@courselit/components-library";
 import { setAppMessage } from "@courselit/state-management/dist/action-creators";
 //import { CSVLink } from "react-csv";
-import { Cancel } from "@courselit/icons";
+import { Cancel, Search } from "@courselit/icons";
 import { useRouter } from "next/router";
 import { UIConstants } from "@courselit/common-models";
 import { Mail } from "@courselit/icons";
@@ -338,11 +338,17 @@ const UsersManager = ({
                         required
                         endIcon={
                             searchEmail ? (
-                                <>
+                                <span className="flex gap-2">
                                     <IconButton
                                         type="submit"
-                                        className="hidden"
-                                    ></IconButton>
+                                        variant="soft"
+                                        onClick={(e) => {
+                                            e.preventDefault();
+                                            searchByEmail();
+                                        }}
+                                    >
+                                        <Search />
+                                    </IconButton>
                                     <IconButton
                                         aria-label="clear email search box"
                                         variant="soft"
@@ -354,31 +360,31 @@ const UsersManager = ({
                                     >
                                         <Cancel />
                                     </IconButton>
-                                </>
+                                </span>
                             ) : null
                         }
                     />
-                    <SingleSelect
-                        title={USER_FILTER_PERMISSION}
-                        onChange={handleUserTypeChange}
-                        value={type}
-                        options={[
-                            { label: USER_TYPE_ALL, value: "" },
-                            {
-                                label: USER_TYPE_CUSOMER,
-                                value: USER_TYPE_CUSOMER,
-                            },
-                            {
-                                label: USER_TYPE_TEAM,
-                                value: USER_TYPE_TEAM,
-                            },
-                            {
-                                label: USER_TYPE_SUBSCRIBER,
-                                value: USER_TYPE_SUBSCRIBER,
-                            },
-                        ]}
-                    />
                 </Form>
+                <Select
+                    title={USER_FILTER_PERMISSION}
+                    onChange={handleUserTypeChange}
+                    value={type}
+                    options={[
+                        { label: USER_TYPE_ALL, value: "" },
+                        {
+                            label: USER_TYPE_CUSOMER,
+                            value: USER_TYPE_CUSOMER,
+                        },
+                        {
+                            label: USER_TYPE_TEAM,
+                            value: USER_TYPE_TEAM,
+                        },
+                        {
+                            label: USER_TYPE_SUBSCRIBER,
+                            value: USER_TYPE_SUBSCRIBER,
+                        },
+                    ]}
+                />
                 {/*
                         <CSVLink
                             filename={"users-courselit.csv"}
diff --git a/packages/common-widgets/src/featured/admin-widget.tsx b/packages/common-widgets/src/featured/admin-widget.tsx
index 1fafc1184..e6c3630eb 100644
--- a/packages/common-widgets/src/featured/admin-widget.tsx
+++ b/packages/common-widgets/src/featured/admin-widget.tsx
@@ -167,6 +167,7 @@ export default function AdminWidget({
                                     sublabel: capitalize(product.type),
                                 }))}
                             onChange={addProduct}
+                            defaultMessage={"Select a product"}
                         />
                         <ul className="flex flex-col gap-4">
                             {products.map((product: string) => {
diff --git a/packages/components-library/src/form-field.tsx b/packages/components-library/src/form-field.tsx
index 6347871ab..9d9e4c970 100644
--- a/packages/components-library/src/form-field.tsx
+++ b/packages/components-library/src/form-field.tsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import {
     Control,
     CustomMatcher,
@@ -41,7 +41,7 @@ export interface FormFieldProps {
     [key: string]: any;
     name?: string;
     className?: string;
-    endIcon?: string;
+    endIcon?: React.ReactNode;
 }
 
 export default function FormField({
diff --git a/packages/components-library/src/select.tsx b/packages/components-library/src/select.tsx
index 796f806cd..eb730bf12 100644
--- a/packages/components-library/src/select.tsx
+++ b/packages/components-library/src/select.tsx
@@ -13,6 +13,7 @@ interface SelectProps {
     value: string | number;
     title: string;
     disabled?: boolean;
+    defaultMessage?: string;
 }
 
 export default function Select({
@@ -21,6 +22,7 @@ export default function Select({
     value,
     title,
     disabled,
+    defaultMessage,
 }: SelectProps) {
     const id = `${title.split(" ").join().toLowerCase()}`;
 
@@ -38,10 +40,12 @@ export default function Select({
                 disabled={disabled}
                 className="border border-slate-300 hover:border-slate-400 py-1 px-2 rounded"
             >
-                <option disabled selected value="">
-                    {" "}
-                    -- select an option --{" "}
-                </option>
+                {defaultMessage && (
+                    <option disabled selected value="">
+                        {" "}
+                        {defaultMessage}{" "}
+                    </option>
+                )}
                 {options.map((option: Option) => (
                     <option
                         value={option.value}