feat: add FetchTeams and FetchUsers components; implement label ID ha…

…ndling in IncidentCreate

Common/Models/DatabaseModels/MonitorTest.ts

@@ -442,6 +442,7 @@ export default class MonitorTest extends BaseModel {
   })
   public monitorStepProbeResponse?: MonitorStepProbeResponse = undefined;
 
+  @Index()
   @ColumnAccessControl({
     create: [
       Permission.ProjectOwner,

Common/Server/Infrastructure/Postgres/SchemaMigrations/1737997557974-MigrationName.ts

@@ -0,0 +1,14 @@
+import { MigrationInterface, QueryRunner } from "typeorm";
+
+export class MigrationName1737997557974 implements MigrationInterface {
+    public name = 'MigrationName1737997557974'
+
+    public async up(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`CREATE INDEX "IDX_4d5e62631b2b63aaecb00950ef" ON "MonitorTest" ("isInQueue") `);
+    }
+
+    public async down(queryRunner: QueryRunner): Promise<void> {
+        await queryRunner.query(`DROP INDEX "public"."IDX_4d5e62631b2b63aaecb00950ef"`);
+    }
+
+}

Common/Server/Infrastructure/Postgres/SchemaMigrations/Index.ts

@@ -98,6 +98,7 @@ import { MigrationName1736856662868 } from "./1736856662868-MigrationName";
 import { MigrationName1737141420441 } from "./1737141420441-MigrationName";
 import { MigrationName1737713529424 } from "./1737713529424-MigrationName";
 import { MigrationName1737715240684 } from "./1737715240684-MigrationName";
+import { MigrationName1737997557974 } from "./1737997557974-MigrationName";
 
 export default [
   InitialMigration,
@@ -200,4 +201,5 @@ export default [
   MigrationName1737141420441,
   MigrationName1737713529424,
   MigrationName1737715240684,
+  MigrationName1737997557974
 ];

Dashboard/src/Components/Label/FetchLabels.tsx

@@ -1,5 +1,3 @@
-import LabelElement from "./Label";
-import TableColumnListComponent from "Common/UI/Components/TableColumnList/TableColumnListComponent";
 import Label from "Common/Models/DatabaseModels/Label";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import ObjectID from "Common/Types/ObjectID";
@@ -11,6 +9,7 @@ import SortOrder from "Common/Types/BaseDatabase/SortOrder";
 import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
 import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
 import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import LabelsElement from "./Labels";
 
 export interface ComponentProps {
   labelIds: Array<ObjectID>;
@@ -52,6 +51,8 @@ const FetchLabels: FunctionComponent<ComponentProps> = (
         }catch(err){
             setError(API.getFriendlyMessage(err));
         }
+
+        setIsLoading(false);
     };
 
     useEffect(() => {
@@ -71,20 +72,7 @@ const FetchLabels: FunctionComponent<ComponentProps> = (
     }
 
   return (
-    // {/** >4 because 3 labels are shown by default and then the more text is shown */}
-    <TableColumnListComponent
-      items={labels}
-      moreText={labels.length > 4 ? "more labels" : "more label"}
-      className={labels.length > 0 ? "-mb-1 -mt-1" : ""}
-      getEachElement={(label: Label) => {
-        return (
-          <div className={labels.length > 0 ? "my-2" : ""}>
-            <LabelElement label={label} />
-          </div>
-        );
-      }}
-      noItemsMessage="No labels attached."
-    />
+    <LabelsElement labels={labels} />
   );
 };
 

Dashboard/src/Components/Team/FetchTeams.tsx

@@ -0,0 +1,78 @@
+import Team from "Common/Models/DatabaseModels/Team";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import TeamsElement from "./TeamsElement";
+
+export interface ComponentProps {
+  userIds: Array<ObjectID>;
+}
+
+const FetchTeam: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+
+    const [isLoading, setIsLoading] = React.useState<boolean>(true);
+    const [error, setError] = React.useState<string>("");
+    const [team, setTeam] = React.useState<Array<Team>>([]);
+
+
+    const fetchTeam = async () => {
+        setIsLoading(true);
+        setError("");
+
+        try{
+            const team: ListResult<Team> = await ModelAPI.getList({
+                modelType: Team,
+                query: {
+                    _id: new Includes(props.userIds),
+                },
+                skip: 0, 
+                limit: LIMIT_PER_PROJECT,
+                select: {
+                    name: true, 
+                    _id: true
+                },
+                sort: {
+                    name: SortOrder.Ascending
+                }
+            });
+
+            setTeam(team.data);
+
+        }catch(err){
+            setError(API.getFriendlyMessage(err));
+        }
+
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        fetchTeam().catch((err) => {
+            setError(API.getFriendlyMessage(err));
+        });
+
+    }, []);
+
+    if(error){
+        return <ErrorMessage message={error} />;
+    }
+
+
+    if(isLoading){
+        return <ComponentLoader />;
+    }
+
+  return (
+   <TeamsElement teams={team} />
+  );
+};
+
+export default FetchTeam;

Dashboard/src/Components/User/FetchUsers.tsx

@@ -0,0 +1,80 @@
+import User from "Common/Models/DatabaseModels/User";
+import React, { FunctionComponent, ReactElement, useEffect } from "react";
+import ObjectID from "Common/Types/ObjectID";
+import API from "Common/UI/Utils/API/API";
+import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
+import Includes from "Common/Types/BaseDatabase/Includes";
+import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
+import SortOrder from "Common/Types/BaseDatabase/SortOrder";
+import ListResult from "Common/UI/Utils/BaseDatabase/ListResult";
+import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
+import ComponentLoader from "Common/UI/Components/ComponentLoader/ComponentLoader";
+import UsersElement from "./Users";
+
+export interface ComponentProps {
+  userIds: Array<ObjectID>;
+}
+
+const FetchUsers: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+
+    const [isLoading, setIsLoading] = React.useState<boolean>(true);
+    const [error, setError] = React.useState<string>("");
+    const [users, setUsers] = React.useState<Array<User>>([]);
+
+
+    const fetchUsers = async () => {
+        setIsLoading(true);
+        setError("");
+
+        try{
+            const users: ListResult<User> = await ModelAPI.getList({
+                modelType: User,
+                query: {
+                    _id: new Includes(props.userIds),
+                },
+                skip: 0, 
+                limit: LIMIT_PER_PROJECT,
+                select: {
+                    name: true, 
+                    profilePictureId: true,
+                    email: true,
+                    _id: true
+                },
+                sort: {
+                    name: SortOrder.Ascending
+                }
+            });
+
+            setUsers(users.data);
+
+        }catch(err){
+            setError(API.getFriendlyMessage(err));
+        }
+
+        setIsLoading(false);
+    };
+
+    useEffect(() => {
+        fetchUsers().catch((err) => {
+            setError(API.getFriendlyMessage(err));
+        });
+
+    }, []);
+
+    if(error){
+        return <ErrorMessage message={error} />;
+    }
+
+
+    if(isLoading){
+        return <ComponentLoader />;
+    }
+
+  return (
+   <UsersElement users={users} />
+  );
+};
+
+export default FetchUsers;

Dashboard/src/Pages/Incidents/Create.tsx

@@ -316,13 +316,28 @@ const IncidentCreate: FunctionComponent<
                       return <p>No labels assigned.</p>
                     }
 
+                    const labelIds: Array<ObjectID> = []; 
+
+                    for(const label of item.labels){
+                      if(typeof label  === "string"){ 
+                        labelIds.push(new ObjectID(label));
+                        continue;
+                      }
+
+                      if(label instanceof ObjectID){
+                        labelIds.push(label);
+                        continue;
+                      }
+
+                      if(label instanceof Label){
+                        labelIds.push(new ObjectID(label._id?.toString() || ""));
+                        continue;
+                      }
+                    }
+
                     return (
                       <div>
-                        <FetchLabels labelIds={item.labels?.map(
-                          (label: Label) => {
-                            return new ObjectID(label._id?.toString() || "");
-                          },
-                        )} />
+                        <FetchLabels labelIds={labelIds} />
                       </div>
                     );
                   }