feat: Add SquareStack3D icon to IconProp enum and update SideMenu component

This commit adds the SquareStack3D icon to the IconProp enum in the IconProp.ts file. It also updates the SideMenu component in the SideMenu.tsx file to use the SquareStack3D icon instead of the SquareStack icon. This change ensures that the correct icon is displayed in the SideMenu for the specified modelId.

.github/workflows/reliability-copilot.yml

@@ -28,5 +28,5 @@ jobs:
           -e ONEUPTIME_REPOSITORY_SECRET_KEY="${{ secrets.COPILOT_ONEUPTIME_REPOSITORY_SECRET_KEY }}" \
           -e CODE_REPOSITORY_PASSWORD="${{ github.token }}" \
           -e CODE_REPOSITORY_USERNAME="simlarsen" \
-          -e ONEUPTIME_LLM_SERVER_URL="http://57.128.112.160:8547" \
+          -e OPENAI_API_KEY="${{ secrets.OPENAI_API_KEY }}" \
           --net=host oneuptime/copilot:test

Common/Types/Icon/IconProp.ts

@@ -123,6 +123,7 @@ enum IconProp {
   Template = "Template",
   NoSignal = "NoSignal",
   EyeSlash = "EyeSlash",
+  SquareStack3D = "SquareStack3D",
 }
 
 export default IconProp;

CommonServer/Services/ServiceCatalogDependencyService.ts

@@ -4,6 +4,7 @@ import CreateBy from "../Types/Database/CreateBy";
 import { OnCreate } from "../Types/Database/Hooks";
 import DatabaseService from "./DatabaseService";
 import Model from "Model/Models/ServiceCatalogDependency";
+import ObjectID from "Common/Types/ObjectID";
 
 export class Service extends DatabaseService<Model> {
   public constructor(postgresDatabase?: PostgresDatabase) {
@@ -15,23 +16,31 @@ export class Service extends DatabaseService<Model> {
   ): Promise<OnCreate<Model>> {
     // select a random color.
 
-    if (!createBy.data.serviceCatalogId) {
-      throw new Error("serviceCatalogId is required");
+    if (
+      !createBy.data.serviceCatalogId &&
+      !createBy.data.dependencyServiceCatalog
+    ) {
+      throw new BadDataException("serviceCatalog is required");
     }
 
-    if (!createBy.data.dependencyServiceCatalogId) {
-      throw new Error("dependencyServiceCatalogId is required");
+    if (
+      !createBy.data.dependencyServiceCatalogId &&
+      !createBy.data.dependencyServiceCatalog
+    ) {
+      throw new BadDataException("dependencyServiceCatalog is required");
     }
 
     // serviceCatalogId and dependencyServiceCatalogId should not be the same
+    const serviceCatalogId: string | ObjectID | undefined =
+      createBy.data.serviceCatalogId || createBy.data.serviceCatalog?._id;
+    const dependencyServiceCatalogId: string | ObjectID | undefined =
+      createBy.data.dependencyServiceCatalogId ||
+      createBy.data.dependencyServiceCatalog?._id;
 
     if (
-      createBy.data.serviceCatalogId ===
-      createBy.data.dependencyServiceCatalogId
+      serviceCatalogId?.toString() === dependencyServiceCatalogId?.toString()
     ) {
-      throw new BadDataException(
-        "serviceCatalogId and dependencyServiceCatalogId should not be the same",
-      );
+      throw new BadDataException("Service cannot depend on itself.");
     }
 
     return {

CommonUI/src/Components/Alerts/Alert.tsx

@@ -43,7 +43,7 @@ const Alert: FunctionComponent<ComponentProps> = (
 
   if (AlertType.DANGER === type) {
     className = "text-red";
-    bgClassName = "bg-gray";
+    bgClassName = "bg-red";
   } else if (AlertType.INFO === type) {
     className = "text-gray";
     bgClassName = "bg-gray";

CommonUI/src/Components/Icon/Icon.tsx

@@ -170,6 +170,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"
       />,
     );
+  } else if (icon === IconProp.SquareStack3D) {
+    return getSvgWrapper(
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"
+      />,
+    );
   } else if (icon === IconProp.Reload) {
     return getSvgWrapper(
       <path

CommonUI/src/Tests/Components/Alert.test.tsx

@@ -59,7 +59,7 @@ describe("alert tests", () => {
     const icon: HTMLElement = screen.getByRole("icon");
     expect(icon).toBeInTheDocument();
     const testId: HTMLElement = screen.getByTestId("test-id");
-    expect(testId).toHaveClass("rounded-md bg-gray-700 p-4");
+    expect(testId).toHaveClass("rounded-md bg-red-700 p-4");
   });
   test("it should have a title content displayed in document", () => {
     render(<Alert title="title" />);

Dashboard/src/Pages/ServiceCatalog/View/Dependencies.tsx

@@ -12,97 +12,100 @@ import React, { Fragment, FunctionComponent, ReactElement } from "react";
 import ServiceCatalogElement from "../../../Components/ServiceCatalog/ServiceElement";
 
 const ServiceCatalogDelete: FunctionComponent<
-    PageComponentProps
+  PageComponentProps
 > = (): ReactElement => {
-    const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
+  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);
 
-    return (
-        <Fragment>
-            <ModelTable<ServiceCatalogDependency>
-                modelType={ServiceCatalogDependency}
-                id="table-ServiceCatalog-dependency"
-                name="ServiceCatalog > Dependency"
-                singularName="Dependency"
-                isDeleteable={true}
-                createVerb={"Add"}
-                isCreateable={true}
-                isViewable={false}
-                showViewIdButton={true}
-                query={{
-                    serviceCatalogId: modelId,
-                    projectId: DashboardNavigation.getProjectId()?.toString(),
-                }}
-                onBeforeCreate={(
-                    item: ServiceCatalogDependency,
-                ): Promise<ServiceCatalogDependency> => {
-                    item.serviceCatalogId = modelId;
-                    item.projectId = DashboardNavigation.getProjectId()!;
-                    return Promise.resolve(item);
-                }}
-                cardProps={{
-                    title: "Dependencies",
-                    description:
-                        "Here is list of services that this service depends on.",
-                }}
-                noItemsMessage={"No dependencies associated with this service so far."}
-                formFields={[
-                    {
-                        field: {
-                            dependencyServiceCatalog: true,
-                        },
-                        title: "Dependency Service",
-                        fieldType: FormFieldSchemaType.Dropdown,
-                        required: true,
-                        placeholder: "Select Dependency Service",
-                        dropdownModal: {
-                            type: ServiceCatalog,
-                            labelField: "name",
-                            valueField: "_id",
-                        },
-                    },
-                ]}
-                showRefreshButton={true}
-                viewPageRoute={Navigation.getCurrentRoute()}
-                filters={[
-                    {
-                        field: {
-                            dependencyServiceCatalog: true,
-                        },
-                        type: FieldType.Entity,
-                        title: "Dependency Service",
-                        filterEntityType: ServiceCatalog,
-                        filterQuery: {
-                            projectId: DashboardNavigation.getProjectId()?.toString(),
-                        },
-                        filterDropdownField: {
-                            label: "name",
-                            value: "_id",
-                        },
-                    }
-                ]}
-                columns={[
-                    {
-                        field: {
-                            dependencyServiceCatalog: {
-                                name: true,
-                                serviceColor: true
-                            },
-                        },
-                        title: "Dependency Service",
-                        type: FieldType.Entity,
+  return (
+    <Fragment>
+      <ModelTable<ServiceCatalogDependency>
+        modelType={ServiceCatalogDependency}
+        id="table-ServiceCatalog-dependency"
+        name="ServiceCatalog > Dependency"
+        singularName="Dependency"
+        isDeleteable={true}
+        createVerb={"Add"}
+        isCreateable={true}
+        isViewable={false}
+        showViewIdButton={true}
+        query={{
+          serviceCatalogId: modelId,
+          projectId: DashboardNavigation.getProjectId()?.toString(),
+        }}
+        onBeforeCreate={(
+          item: ServiceCatalogDependency,
+        ): Promise<ServiceCatalogDependency> => {
+          item.serviceCatalogId = modelId;
+          item.projectId = DashboardNavigation.getProjectId()!;
+          return Promise.resolve(item);
+        }}
+        cardProps={{
+          title: "Dependencies",
+          description: "Here is list of services that this service depends on.",
+        }}
+        noItemsMessage={"No dependencies associated with this service so far."}
+        formFields={[
+          {
+            field: {
+              dependencyServiceCatalog: true,
+            },
+            title: "Dependency Service",
+            fieldType: FormFieldSchemaType.Dropdown,
+            required: true,
+            placeholder: "Select Dependency Service",
+            dropdownModal: {
+              type: ServiceCatalog,
+              labelField: "name",
+              valueField: "_id",
+            },
+          },
+        ]}
+        showRefreshButton={true}
+        viewPageRoute={Navigation.getCurrentRoute()}
+        filters={[
+          {
+            field: {
+              dependencyServiceCatalog: true,
+            },
+            type: FieldType.Entity,
+            title: "Dependency Service",
+            filterEntityType: ServiceCatalog,
+            filterQuery: {
+              projectId: DashboardNavigation.getProjectId()?.toString(),
+            },
+            filterDropdownField: {
+              label: "name",
+              value: "_id",
+            },
+          },
+        ]}
+        columns={[
+          {
+            field: {
+              dependencyServiceCatalog: {
+                name: true,
+                serviceColor: true,
+              },
+            },
+            title: "Dependency Service",
+            type: FieldType.Entity,
 
-                        getElement: (item: ServiceCatalogDependency): ReactElement => {
-                            if (!item["dependencyServiceCatalog"]) {
-                                throw new BadDataException("Dependency not found");
-                            }
+            getElement: (item: ServiceCatalogDependency): ReactElement => {
+              if (!item["dependencyServiceCatalog"]) {
+                throw new BadDataException("Dependency not found");
+              }
 
-                            return <ServiceCatalogElement serviceCatalog={item["dependencyServiceCatalog"]} />;
-                        },
-                    }
-                ]}
-            />
-        </Fragment>
-    );
+              return (
+                <ServiceCatalogElement
+                  serviceCatalog={item["dependencyServiceCatalog"]}
+                />
+              );
+            },
+          },
+        ]}
+      />
+    </Fragment>
+  );
 };
 
 export default ServiceCatalogDelete;

Dashboard/src/Pages/ServiceCatalog/View/SideMenu.tsx

@@ -48,7 +48,7 @@ const DashboardSideMenu: FunctionComponent<ComponentProps> = (
               { modelId: props.modelId },
             ),
           }}
-          icon={IconProp.SquareStack}
+          icon={IconProp.SquareStack3D}
         />
       </SideMenuSection>