Merge branch 'main' into update-use-secret-path-across-app

frontend/src/views/IntegrationsPage/IntegrationsPage.tsx

@@ -51,17 +51,20 @@ export const IntegrationsPage = withProjectPermission(
     const { data: cloudIntegrations, isLoading: isCloudIntegrationsLoading } =
       useGetCloudIntegrations();
 
-    const { data: integrationAuths, isLoading: isIntegrationAuthLoading } =
-      useGetWorkspaceAuthorizations(
-        workspaceId,
-        useCallback((data: IntegrationAuth[]) => {
-          const groupBy: Record<string, IntegrationAuth> = {};
-          data.forEach((el) => {
-            groupBy[el.integration] = el;
-          });
-          return groupBy;
-        }, [])
-      );
+    const {
+      data: integrationAuths,
+      isLoading: isIntegrationAuthLoading,
+      isFetching: isIntegrationAuthFetching
+    } = useGetWorkspaceAuthorizations(
+      workspaceId,
+      useCallback((data: IntegrationAuth[]) => {
+        const groupBy: Record<string, IntegrationAuth> = {};
+        data.forEach((el) => {
+          groupBy[el.integration] = el;
+        });
+        return groupBy;
+      }, [])
+    );
     // mutation
     const {
       data: integrations,
@@ -77,15 +80,23 @@ export const IntegrationsPage = withProjectPermission(
     const { mutateAsync: deleteIntegration } = useDeleteIntegration();
     const {
       mutateAsync: deleteIntegrationAuth,
-      isLoading: isDeleteIntegrationAuthSuccess,
+      isSuccess: isDeleteIntegrationAuthSuccess,
       reset: resetDeleteIntegrationAuth
     } = useDeleteIntegrationAuth();
 
+    const isIntegrationsAuthorizedEmpty = !Object.keys(integrationAuths || {}).length;
+    const isIntegrationsEmpty = !integrations?.length;
     // summary: this use effect is trigger when all integration auths are removed thus deactivate bot
-    // details: so onsuccessfully deleting an integration auth, immediately integration list is refeteched
-    // After the refetch is completed check if its empty. Then set bot active and reset the submit hook
+    // details: so on successfully deleting an integration auth, immediately integration list is refeteched
+    // After the refetch is completed check if its empty. Then set bot active and reset the submit hook for isSuccess to go back to false
     useEffect(() => {
-      if (isDeleteIntegrationAuthSuccess && !isIntegrationFetching && !integrations?.length) {
+      if (
+        isDeleteIntegrationAuthSuccess &&
+        !isIntegrationFetching &&
+        !isIntegrationAuthFetching &&
+        isIntegrationsAuthorizedEmpty &&
+        isIntegrationsEmpty
+      ) {
         if (bot?._id)
           updateBotActiveStatusSync({
             isActive: false,
@@ -94,7 +105,13 @@ export const IntegrationsPage = withProjectPermission(
           });
         resetDeleteIntegrationAuth();
       }
-    }, [isIntegrationFetching, isDeleteIntegrationAuthSuccess, integrations?.length]);
+    }, [
+      isIntegrationFetching,
+      isDeleteIntegrationAuthSuccess,
+      isIntegrationAuthFetching,
+      isIntegrationsAuthorizedEmpty,
+      isIntegrationsEmpty
+    ]);
 
     const handleProviderIntegration = async (provider: string) => {
       const selectedCloudIntegration = cloudIntegrations?.find(({ slug }) => provider === slug);

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,14 +1,11 @@
-import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { faElementor } from "@fortawesome/free-brands-svg-icons";
 import {
   faAnchorLock,
   faArrowLeft,
-  faBook,
   faCog,
   faKey,
   faLock,
-  faMagnifyingGlass,
   faNetworkWired,
   faPuzzlePiece,
   faTags,
@@ -85,12 +82,6 @@ const SINGLE_PERMISSION_LIST = [
     icon: faTags,
     formName: "tags"
   },
-  {
-    title: "Audit Logs",
-    subtitle: "Audit log management control",
-    icon: faBook,
-    formName: "audit-logs"
-  },
   {
     title: "IP Allowlist",
     subtitle: "IP allowlist management control",
@@ -105,8 +96,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 +215,6 @@ export const ProjectRoleModifySection = ({ role, onGoBack }: Props) => {
             <div>
               <h2 className="text-xl font-medium">Add Permission</h2>
             </div>
-            <div className="max-w-md flex-1">
-              <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}`}

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

@@ -23,8 +23,8 @@ enum Permission {
 }
 
 const PERMISSIONS = [
-  { action: "edit", label: "Update workspace details" },
-  { action: "delete", label: "Delete workspace" }
+  { action: "edit", label: "Update project details" },
+  { action: "delete", label: "Delete projects" }
 ] as const;
 
 export const WsProjectPermission = ({ isNonEditable, setValue, control }: Props) => {