feat(rbac): removed owner role and changed member permissions

frontend/src/styles/globals.css

@@ -1,6 +1,10 @@
 @tailwind base;
 @tailwind components;
 
+html {
+  @apply overflow-hidden;
+}
+
 .rdp-day,
 .rdp-nav_button {
   @apply rounded-md hover:text-mineshaft-500;

frontend/src/views/Org/MembersPage/components/OrgRoleTabSection/OrgRoleModifySection/OrgRoleModifySection.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useForm } from "react-hook-form";
 import {
   faArrowLeft,
@@ -80,7 +79,6 @@ const SIMPLE_PERMISSION_OPTIONS = [
 ] as const;
 
 export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
-  const [searchPermission, setSearchPermission] = useState("");
   const { subscription } = useSubscription();
   const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
 
@@ -196,14 +194,6 @@ export const OrgRoleModifySection = ({ role, onGoBack }: Props) => {
             <div>
               <h2 className="text-xl font-medium">Add Permission</h2>
             </div>
-            <div className="flex-1 max-w-md">
-              <Input
-                value={searchPermission}
-                onChange={(e) => setSearchPermission(e.target.value)}
-                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-                placeholder="Search permissions..."
-              />
-            </div>
           </div>
           <div className="">
             <WorkspacePermission

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

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import Link from "next/link";
 import { faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -359,48 +360,57 @@ export const MemberListTab = ({ roles = [], isRolesLoading }: Props) => {
           title={t("section.members.add-dialog.add-member-to-project") as string}
           subTitle={t("section.members.add-dialog.user-will-email")}
         >
-          <form onSubmit={handleSubmit(onAddMember)}>
-            <Controller
-              control={control}
-              defaultValue={filteredOrgUsers?.[0]?.user?.email}
-              name="email"
-              render={({ field, fieldState: { error } }) => (
-                <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
-                  <Select
-                    position="popper"
-                    className="w-full"
-                    defaultValue={filteredOrgUsers?.[0]?.user?.email}
-                    value={field.value}
-                    onValueChange={field.onChange}
-                  >
-                    {filteredOrgUsers.map(({ _id: orgUserId, user: u }) => (
-                      <SelectItem value={u?.email} key={`org-membership-join-${orgUserId}`}>
-                        {u?.email}
-                      </SelectItem>
-                    ))}
-                  </Select>
-                </FormControl>
-              )}
-            />
-            <div className="mt-8 flex items-center">
-              <Button
-                className="mr-4"
-                size="sm"
-                type="submit"
-                isLoading={isSubmitting}
-                isDisabled={isSubmitting}
-              >
-                Add Member
-              </Button>
-              <Button
-                colorSchema="secondary"
-                variant="plain"
-                onClick={() => handlePopUpClose("addMember")}
-              >
-                Cancel
-              </Button>
+          {filteredOrgUsers.length ? (
+            <form onSubmit={handleSubmit(onAddMember)}>
+              <Controller
+                control={control}
+                defaultValue={filteredOrgUsers?.[0]?.user?.email}
+                name="email"
+                render={({ field, fieldState: { error } }) => (
+                  <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                    <Select
+                      position="popper"
+                      className="w-full"
+                      defaultValue={filteredOrgUsers?.[0]?.user?.email}
+                      value={field.value}
+                      onValueChange={field.onChange}
+                    >
+                      {filteredOrgUsers.map(({ _id: orgUserId, user: u }) => (
+                        <SelectItem value={u?.email} key={`org-membership-join-${orgUserId}`}>
+                          {u?.email}
+                        </SelectItem>
+                      ))}
+                    </Select>
+                  </FormControl>
+                )}
+              />
+              <div className="mt-8 flex items-center">
+                <Button
+                  className="mr-4"
+                  size="sm"
+                  type="submit"
+                  isLoading={isSubmitting}
+                  isDisabled={isSubmitting}
+                >
+                  Add Member
+                </Button>
+                <Button
+                  colorSchema="secondary"
+                  variant="plain"
+                  onClick={() => handlePopUpClose("addMember")}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </form>
+          ) : (
+            <div className="flex flex-col space-y-4">
+              <div>All the users in your organization are already invited.</div>
+              <Link href={`/org/${currentWorkspace?.organization}/members`}>
+                <Button variant="outline_bg">Add users to organization</Button>
+              </Link>
             </div>
-          </form>
+          )}
         </ModalContent>
       </Modal>
       <DeleteActionModal

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/ProjectRoleModifySection.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { faElementor } from "@fortawesome/free-brands-svg-icons";
 import {
@@ -8,7 +7,6 @@ import {
   faCog,
   faKey,
   faLock,
-  faMagnifyingGlass,
   faNetworkWired,
   faPuzzlePiece,
   faTags,
@@ -105,8 +103,6 @@ type Props = {
 };
 
 export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
-  const [searchPermission, setSearchPermission] = useState("");
-
   const { popUp, handlePopUpToggle, handlePopUpOpen } = usePopUp(["upgradePlan"] as const);
 
   const isNonEditable = ["admin", "member", "viewer"].includes(role?.slug || "");
@@ -226,14 +222,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
             <div>
               <h2 className="text-xl font-medium">Add Permission</h2>
             </div>
-            <div className="flex-1 max-w-md">
-              <Input
-                value={searchPermission}
-                onChange={(e) => setSearchPermission(e.target.value)}
-                leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-                placeholder="Search permissions..."
-              />
-            </div>
           </div>
           <div>
             <MultiEnvProjectPermission

frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleModifySection/SingleProjectPermission.tsx

@@ -44,6 +44,22 @@ const PERMISSIONS = [
   { action: "delete", label: "Remove" }
 ] as const;
 
+const MEMBERS_PERMISSIONS = [
+  { action: "read", label: "View all members" },
+  { action: "create", label: "Invite members" },
+  { action: "edit", label: "Edit members" },
+  { action: "delete", label: "Remove members" }
+] as const;
+
+const getPermissionList = (option: Props["formName"]) => {
+  switch (option) {
+    case "member":
+      return MEMBERS_PERMISSIONS;
+    default:
+      return PERMISSIONS;
+  }
+};
+
 export const SingleProjectPermission = ({
   isNonEditable,
   setValue,
@@ -148,7 +164,7 @@ export const SingleProjectPermission = ({
         className="overflow-hidden grid gap-8 grid-flow-col auto-cols-min"
       >
         {isCustom &&
-          PERMISSIONS.map(({ action, label }) => (
+          getPermissionList(formName).map(({ action, label }) => (
             <Controller
               name={`permissions.${formName}.${action}`}
               key={`permissions.${formName}.${action}`}