feat: Add support for displaying Open Source Friends

AdminDashboard/src/App.tsx

@@ -23,6 +23,10 @@ import {
   useNavigate,
   useParams,
 } from "react-router-dom";
+import UserView from "./Pages/Users/View/Index";
+import UserDelete from "./Pages/Users/View/Delete";
+import ProjectView from "./Pages/Projects/View/Index";
+import ProjectDelete from "./Pages/Projects/View/Delete";
 
 const App: () => JSX.Element = () => {
   Navigation.setNavigateHook(useNavigate());
@@ -61,6 +65,26 @@ const App: () => JSX.Element = () => {
           element={<Users />}
         />
 
+        <PageRoute
+          path={RouteMap[PageMap.USER_VIEW]?.toString() || ""}
+          element={<UserView />}
+        />
+
+        <PageRoute
+          path={RouteMap[PageMap.USER_DELETE]?.toString() || ""}
+          element={<UserDelete />}
+        />
+
+        <PageRoute
+          path={RouteMap[PageMap.PROJECT_VIEW]?.toString() || ""}
+          element={<ProjectView />}
+        />
+
+        <PageRoute
+          path={RouteMap[PageMap.PROJECT_DELETE]?.toString() || ""}
+          element={<ProjectDelete />}
+        />
+
         <PageRoute
           path={RouteMap[PageMap.LOGOUT]?.toString() || ""}
           element={<Logout />}

AdminDashboard/src/Pages/Projects/Index.tsx

@@ -187,7 +187,7 @@ const Projects: FunctionComponent = (): ReactElement => {
         isEditable={false}
         isCreateable={true}
         name="Projects"
-        isViewable={false}
+        isViewable={true}
         cardProps={{
           title: "Projects",
           description: "Here is a list of proejcts in OneUptime.",

AdminDashboard/src/Pages/Projects/View/Delete.tsx

@@ -0,0 +1,52 @@
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import ObjectID from "Common/Types/ObjectID";
+import ModelDelete from "CommonUI/src/Components/ModelDelete/ModelDelete";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import React, { FunctionComponent, ReactElement } from "react";
+import SideMenuComponent from "./SideMenu";
+import Project from "Model/Models/Project";
+import ModelPage from "CommonUI/src/Components/Page/ModelPage";
+
+const DeletePage: FunctionComponent = (): ReactElement => {
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
+
+  return (
+    <ModelPage<Project>
+      modelId={modelId}
+      modelNameField="name"
+      modelType={Project}
+      title={"Project"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Projects",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.PROJECTS] as Route,
+          ),
+        },
+        {
+          title: "Project",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.PROJECT_VIEW] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<SideMenuComponent modelId={modelId} />}
+    >
+      <ModelDelete
+        modelType={Project}
+        modelId={modelId}
+        onDeleteSuccess={() => {
+          Navigation.navigate(RouteMap[PageMap.PROJECTS] as Route);
+        }}
+      />
+    </ModelPage>
+  );
+};
+
+export default DeletePage;

AdminDashboard/src/Pages/Projects/View/Index.tsx

@@ -0,0 +1,90 @@
+import ObjectID from "Common/Types/ObjectID";
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import Navigation from "CommonUI/src/Utils/Navigation";
+import Project from "Model/Models/Project";
+import React, { FunctionComponent, ReactElement } from "react";
+import CardModelDetail from "CommonUI/src/Components/ModelDetail/CardModelDetail";
+import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
+import FieldType from "CommonUI/src/Components/Types/FieldType";
+import ModelPage from "CommonUI/src/Components/Page/ModelPage";
+import SideMenuComponent from "./SideMenu";
+
+const Projects: FunctionComponent = (): ReactElement => {
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID();
+
+  return (
+    <ModelPage
+      modelId={modelId}
+      modelNameField="name"
+      modelType={Project}
+      title={"Project"}
+      breadcrumbLinks={[
+        {
+          title: "Admin Dashboard",
+          to: RouteUtil.populateRouteParams(RouteMap[PageMap.HOME] as Route),
+        },
+        {
+          title: "Projects",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.PROJECTS] as Route,
+          ),
+        },
+        {
+          title: "Project",
+          to: RouteUtil.populateRouteParams(
+            RouteMap[PageMap.PROJECT_VIEW] as Route,
+          ),
+        },
+      ]}
+      sideMenu={<SideMenuComponent modelId={modelId} />}
+    >
+      <div>
+        <CardModelDetail<Project>
+          name="Project"
+          cardProps={{
+            title: "Project",
+            description: "Project details",
+          }}
+          isEditable={true}
+          editButtonText="Edit Project"
+          formFields={[
+            {
+              field: {
+                name: true,
+              },
+              title: "Name",
+              fieldType: FormFieldSchemaType.Text,
+              required: true,
+            },
+          ]}
+          modelDetailProps={{
+            modelType: Project,
+            id: "model-detail-user",
+            fields: [
+              {
+                field: {
+                  _id: true,
+                },
+                title: "Project ID",
+                fieldType: FieldType.Text,
+                placeholder: "-",
+              },
+              {
+                field: {
+                  name: true,
+                },
+                title: "Name",
+                fieldType: FieldType.Text,
+              },
+            ],
+            modelId: modelId,
+          }}
+        />
+      </div>
+    </ModelPage>
+  );
+};
+
+export default Projects;

AdminDashboard/src/Pages/Projects/View/SideMenu.tsx

@@ -0,0 +1,53 @@
+import PageMap from "../../../Utils/PageMap";
+import RouteMap, { RouteUtil } from "../../../Utils/RouteMap";
+import Route from "Common/Types/API/Route";
+import IconProp from "Common/Types/Icon/IconProp";
+import ObjectID from "Common/Types/ObjectID";
+import SideMenu from "CommonUI/src/Components/SideMenu/SideMenu";
+import SideMenuItem from "CommonUI/src/Components/SideMenu/SideMenuItem";
+import SideMenuSection from "CommonUI/src/Components/SideMenu/SideMenuSection";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface SideMenuProps {
+  modelId: ObjectID;
+}
+
+const SideMenuComponent: FunctionComponent<SideMenuProps> = (
+  props: SideMenuProps,
+): ReactElement => {
+  return (
+    <SideMenu>
+      <SideMenuSection title="Basic">
+        <SideMenuItem
+          link={{
+            title: "Overview",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.PROJECT_VIEW] as Route,
+              {
+                modelId: props.modelId,
+              },
+            ),
+          }}
+          icon={IconProp.Info}
+        />
+      </SideMenuSection>
+
+      <SideMenuSection title="Advanced">
+        <SideMenuItem
+          link={{
+            title: "Delete",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.PROJECT_DELETE] as Route,
+              {
+                modelId: props.modelId,
+              },
+            ),
+          }}
+          icon={IconProp.Trash}
+        />
+      </SideMenuSection>
+    </SideMenu>
+  );
+};
+
+export default SideMenuComponent;

AdminDashboard/src/Pages/Users/Index.tsx

@@ -1,31 +1,15 @@
 import PageMap from "../../Utils/PageMap";
 import RouteMap, { RouteUtil } from "../../Utils/RouteMap";
 import Route from "Common/Types/API/Route";
-import { ErrorFunction } from "Common/Types/FunctionTypes";
-import { ButtonStyleType } from "CommonUI/src/Components/Button/Button";
 import FormFieldSchemaType from "CommonUI/src/Components/Forms/Types/FormFieldSchemaType";
-import ConfirmModal from "CommonUI/src/Components/Modal/ConfirmModal";
 import ModelTable from "CommonUI/src/Components/ModelTable/ModelTable";
 import Page from "CommonUI/src/Components/Page/Page";
 import FieldType from "CommonUI/src/Components/Types/FieldType";
-import API from "CommonUI/src/Utils/API/API";
-import ModelAPI from "CommonUI/src/Utils/ModelAPI/ModelAPI";
 import Navigation from "CommonUI/src/Utils/Navigation";
 import User from "Model/Models/User";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, { FunctionComponent, ReactElement } from "react";
 
 const Users: FunctionComponent = (): ReactElement => {
-  const [showConfirmVerifyEmailModal, setShowConfirmVerifyEmailModal] =
-    useState<boolean>(false);
-  const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const [isConfimModalLoading, setIsConfirmModalLoading] =
-    useState<boolean>(false);
-
-  const [refreshItemsTrigger, setRefreshItemsTrigger] =
-    useState<boolean>(false);
-
   return (
     <Page
       title={"Users"}
@@ -46,38 +30,13 @@ const Users: FunctionComponent = (): ReactElement => {
         isDeleteable={false}
         isEditable={false}
         showViewIdButton={true}
-        refreshToggle={refreshItemsTrigger}
         isCreateable={true}
         name="Users"
-        isViewable={false}
+        isViewable={true}
         cardProps={{
           title: "Users",
           description: "Here is a list of users in OneUptime.",
         }}
-        actionButtons={[
-          {
-            title: "Verify Email",
-            buttonStyleType: ButtonStyleType.NORMAL,
-            isVisible: (item: User) => {
-              return !item.isEmailVerified;
-            },
-            onClick: async (
-              item: User,
-              onCompleteAction: VoidFunction,
-              onError: ErrorFunction,
-            ) => {
-              try {
-                setSelectedUser(item);
-                setShowConfirmVerifyEmailModal(true);
-
-                onCompleteAction();
-              } catch (err) {
-                onCompleteAction();
-                onError(err as Error);
-              }
-            },
-          },
-        ]}
         noItemsMessage={"No users found."}
         formFields={[
           {
@@ -164,53 +123,6 @@ const Users: FunctionComponent = (): ReactElement => {
           },
         ]}
       />
-
-      {error ? (
-        <ConfirmModal
-          title={`Error`}
-          description={error}
-          submitButtonText={"Close"}
-          onSubmit={async () => {
-            setError(null);
-          }}
-          submitButtonType={ButtonStyleType.NORMAL}
-        />
-      ) : (
-        <></>
-      )}
-
-      {showConfirmVerifyEmailModal && selectedUser ? (
-        <ConfirmModal
-          title={`Verify Email`}
-          description={`Are you sure you want to verify the email - ${selectedUser.email}?`}
-          isLoading={isConfimModalLoading}
-          submitButtonText={"Verify Email"}
-          onClose={async () => {
-            setShowConfirmVerifyEmailModal(false);
-            setSelectedUser(null);
-          }}
-          onSubmit={async () => {
-            try {
-              setIsConfirmModalLoading(true);
-              await ModelAPI.updateById<User>({
-                modelType: User,
-                id: selectedUser.id!,
-                data: {
-                  isEmailVerified: true,
-                },
-              });
-            } catch (err) {
-              setError(API.getFriendlyMessage(err as Error));
-            }
-
-            setRefreshItemsTrigger(!refreshItemsTrigger);
-            setIsConfirmModalLoading(false);
-            setShowConfirmVerifyEmailModal(false);
-          }}
-        />
-      ) : (
-        <></>
-      )}
     </Page>
   );
 };