fix: frontend/package.json & frontend/package-lock.json to reduce vulnerabilities

The following vulnerabilities are fixed with an upgrade:
- https://snyk.io/vuln/SNYK-JS-SANITIZEHTML-6256334

frontend/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "npm-proj-1708142380787-0.9952765718063858vJAsWg",
+  "name": "npm-proj-1708687711895-0.8280111363176879xoEiUg",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -82,7 +82,7 @@
         "react-markdown": "^8.0.3",
         "react-redux": "^8.0.2",
         "react-table": "^7.8.0",
-        "sanitize-html": "^2.11.0",
+        "sanitize-html": "^2.12.1",
         "set-cookie-parser": "^2.5.1",
         "sharp": "^0.33.2",
         "styled-components": "^5.3.7",
@@ -21111,9 +21111,9 @@
       "dev": true
     },
     "node_modules/sanitize-html": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.11.0.tgz",
-      "integrity": "sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==",
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.12.1.tgz",
+      "integrity": "sha512-Plh+JAn0UVDpBRP/xEjsk+xDCoOvMBwQUf/K+/cBAVuTbtX8bj2VB7S1sL1dssVpykqp0/KPSesHrqXtokVBpA==",
       "dependencies": {
         "deepmerge": "^4.2.2",
         "escape-string-regexp": "^4.0.0",

frontend/package.json

@@ -90,7 +90,7 @@
     "react-markdown": "^8.0.3",
     "react-redux": "^8.0.2",
     "react-table": "^7.8.0",
-    "sanitize-html": "^2.11.0",
+    "sanitize-html": "^2.12.1",
     "set-cookie-parser": "^2.5.1",
     "sharp": "^0.33.2",
     "styled-components": "^5.3.7",

frontend/src/components/v2/UpgradeOverlay/UpgradeOverlay.tsx

@@ -33,9 +33,7 @@ export const UpgradeOverlay = () => {
     return null;
   }
 
-  // for non admin this would throw an error
-  // so no need to render
-  return !isUpgradeStatusLoading && isUpgrading ? ( // isUpgrading
+  return !isUpgradeStatusLoading && isUpgrading ? (
     <div className="absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
       <Spinner size="lg" className="text-primary" />
       <div className="ml-4 flex flex-col space-y-1">

frontend/src/components/v2/UpgradeProjectAlert/UpgradeProjectAlert.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { useProjectPermission } from "@app/context";
@@ -10,6 +11,7 @@ import { Workspace } from "@app/hooks/api/types";
 import { ProjectVersion } from "@app/hooks/api/workspace/types";
 
 import { Button } from "../Button";
+import { Tooltip } from "../Tooltip";
 
 export type UpgradeProjectAlertProps = {
   project: Workspace;
@@ -83,20 +85,44 @@ export const UpgradeProjectAlert = ({ project }: UpgradeProjectAlertProps): JSX.
       projectStatus?.status !== "FAILED");
 
   if (project.version !== ProjectVersion.V1) return null;
-  if (membership.role !== "admin") return null;
 
   return (
-    <div className="mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white">
+    <div
+      className={twMerge(
+        "mt-4 flex w-full flex-row items-center rounded-md border border-primary-600/70 bg-primary/[.07] p-4 text-base text-white",
+        membership.role !== "admin" && "opacity-80"
+      )}
+    >
       <FontAwesomeIcon icon={faWarning} className="pr-6 text-6xl text-white/80" />
       <div className="flex w-full flex-col text-sm">
         <span className="mb-2 text-lg font-semibold">Upgrade your project</span>
-        Upgrade your project version to continue receiving the latest improvements and patches.
+        {membership.role === "admin" ? (
+          <p>
+            Upgrade your project version to continue receiving the latest improvements and patches.
+          </p>
+        ) : (
+          <p>
+            <span className="font-bold">Please ask a project admin to upgrade the project.</span>
+            <br />
+            Upgrading the project version is required to continue receiving the latest improvements
+            and patches.
+          </p>
+        )}
         {currentStatus && <p className="mt-2 opacity-80">Status: {currentStatus}</p>}
       </div>
       <div className="my-2">
-        <Button isLoading={isLoading} isDisabled={isLoading} onClick={onUpgradeProject}>
-          Upgrade
-        </Button>
+        <Tooltip
+          className={twMerge(membership.role === "admin" && "hidden")}
+          content="You need to be an admin to upgrade the project."
+        >
+          <Button
+            isLoading={isLoading}
+            isDisabled={isLoading || membership.role !== "admin"}
+            onClick={onUpgradeProject}
+          >
+            Upgrade
+          </Button>
+        </Tooltip>
       </div>
     </div>
   );

frontend/src/views/Org/MembersPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx

@@ -141,10 +141,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLink }: Prop
     () =>
       members?.filter(
         ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
       ),
     [members, searchMemberFilter]
   );

frontend/src/views/Project/MembersPage/components/MemberListTab/MemberListTab.tsx

@@ -218,10 +218,10 @@ export const MemberListTab = () => {
     () =>
       members?.filter(
         ({ user: u, inviteEmail }) =>
-          u?.firstName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.lastName?.toLowerCase().includes(searchMemberFilter) ||
-          u?.email?.toLowerCase().includes(searchMemberFilter) ||
-          inviteEmail?.includes(searchMemberFilter)
+          u?.firstName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.lastName?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          u?.email?.toLowerCase().includes(searchMemberFilter.toLowerCase()) ||
+          inviteEmail?.includes(searchMemberFilter.toLowerCase())
       ),
     [members, searchMemberFilter]
   );