misc: moved the rest of project group methods to IDs

2026-10-15 21:40:31 +00:00 · 2024-09-23 17:59:10 +08:00
parent 2352e29902
commit 839f0c7e1c
13 changed files with 175 additions and 192 deletions
@@ -16,7 +16,7 @@ import {
 import { UsePopUpState } from "@app/hooks/usePopUp";

 const schema = z.object({
-  slug: z.string(),
+  id: z.string(),
  role: z.string()
 });

@@ -35,7 +35,7 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
  const projectSlug = currentWorkspace?.slug || "";

  const { data: groups } = useGetOrganizationGroups(orgId);
-  const { data: groupMemberships } = useListWorkspaceGroups(currentWorkspace?.slug || "");
+  const { data: groupMemberships } = useListWorkspaceGroups(currentWorkspace?.id || "");

  const { data: roles } = useGetProjectRoles(projectSlug);

@@ -60,11 +60,11 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
    resolver: zodResolver(schema)
  });

-  const onFormSubmit = async ({ slug, role }: FormData) => {
+  const onFormSubmit = async ({ id, role }: FormData) => {
    try {
      await addGroupToWorkspaceMutateAsync({
-        projectSlug: currentWorkspace?.slug || "",
-        groupSlug: slug,
+        projectId: currentWorkspace?.id || "",
+        groupId: id,
        role: role || undefined
      });

@@ -96,7 +96,7 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
          <form onSubmit={handleSubmit(onFormSubmit)}>
            <Controller
              control={control}
-              name="slug"
+              name="id"
              defaultValue={filteredGroupMembershipOrgs?.[0]?.id}
              render={({ field: { onChange, ...field }, fieldState: { error } }) => (
                <FormControl label="Group" errorText={error?.message} isError={Boolean(error)}>
@@ -107,8 +107,8 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                    className="w-full border border-mineshaft-600"
                    placeholder="Select group..."
                  >
-                    {filteredGroupMembershipOrgs.map(({ name, slug, id }) => (
-                      <SelectItem value={slug} key={`org-group-${id}`} >
+                    {filteredGroupMembershipOrgs.map(({ name, id }) => (
+                      <SelectItem value={id} key={`org-group-${id}`}>
                        {name}
                      </SelectItem>
                    ))}
@@ -143,7 +143,7 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
                </FormControl>
              )}
            />
-            <div className="flex items-center mt-6">
+            <div className="mt-6 flex items-center">
              <Button
                className="mr-4"
                size="sm"
@@ -153,13 +153,13 @@ export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
              >
                {popUp?.group?.data ? "Update" : "Create"}
              </Button>
-            <Button
-              colorSchema="secondary"
-              variant="plain"
-              onClick={() => handlePopUpToggle("group", false)}
-            >
-              Cancel
-            </Button>
+              <Button
+                colorSchema="secondary"
+                variant="plain"
+                onClick={() => handlePopUpToggle("group", false)}
+              >
+                Cancel
+              </Button>
            </div>
          </form>
        ) : (
@@ -195,13 +195,13 @@ type TForm = z.infer<typeof formSchema>;

 export type TMemberRolesProp = {
  disableEdit?: boolean;
-  groupSlug: string;
+  groupId: string;
  roles: TGroupMembership["roles"];
 };

 const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;

-export const GroupRoles = ({ roles = [], disableEdit = false, groupSlug }: TMemberRolesProp) => {
+export const GroupRoles = ({ roles = [], disableEdit = false, groupId }: TMemberRolesProp) => {
  const { currentWorkspace } = useWorkspace();
  const { popUp, handlePopUpToggle } = usePopUp(["editRole"] as const);
  const [searchRoles, setSearchRoles] = useState("");
@@ -248,8 +248,8 @@ export const GroupRoles = ({ roles = [], disableEdit = false, groupSlug }: TMemb

    try {
      await updateGroupWorkspaceRole.mutateAsync({
-        projectSlug: currentWorkspace?.slug || "",
-        groupSlug,
+        projectId: currentWorkspace?.id || "",
+        groupId,
        roles: selectedRoles
      });
      createNotification({ text: "Successfully updated group role", type: "success" });
@@ -39,11 +39,11 @@ export const GroupsSection = () => {
    }
  };

-  const onRemoveGroupSubmit = async (groupSlug: string) => {
+  const onRemoveGroupSubmit = async (groupId: string) => {
    try {
      await deleteMutateAsync({
-        groupSlug,
-        projectSlug: currentWorkspace?.slug || ""
+        groupId,
+        projectId: currentWorkspace?.id || ""
      });

      createNotification({
@@ -92,7 +92,7 @@ export const GroupsSection = () => {
        onChange={(isOpen) => handlePopUpToggle("deleteGroup", isOpen)}
        deleteKey="confirm"
        onDeleteApproved={() =>
-          onRemoveGroupSubmit((popUp?.deleteGroup?.data as { slug: string })?.slug)
+          onRemoveGroupSubmit((popUp?.deleteGroup?.data as { id: string })?.id)
        }
      />
      <UpgradePlanModal
@@ -26,7 +26,7 @@ type Props = {
  handlePopUpOpen: (
    popUpName: keyof UsePopUpState<["deleteGroup", "group"]>,
    data?: {
-      slug?: string;
+      id?: string;
      name?: string;
    }
  ) => void;
@@ -34,7 +34,7 @@ type Props = {

 export const GroupTable = ({ handlePopUpOpen }: Props) => {
  const { currentWorkspace } = useWorkspace();
-  const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.slug || "");
+  const { data, isLoading } = useListWorkspaceGroups(currentWorkspace?.id || "");
  return (
    <TableContainer>
      <Table>
@@ -51,7 +51,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
          {!isLoading &&
            data &&
            data.length > 0 &&
-            data.map(({ group: { id, name, slug }, roles, createdAt }) => {
+            data.map(({ group: { id, name }, roles, createdAt }) => {
              return (
                <Tr className="group h-10" key={`st-v3-${id}`}>
                  <Td>{name}</Td>
@@ -61,7 +61,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                      a={ProjectPermissionSub.Groups}
                    >
                      {(isAllowed) => (
-                        <GroupRoles roles={roles} disableEdit={!isAllowed} groupSlug={slug} />
+                        <GroupRoles roles={roles} disableEdit={!isAllowed} groupId={id} />
                      )}
                    </ProjectPermissionCan>
                  </Td>
@@ -77,7 +77,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                            <IconButton
                              onClick={() => {
                                handlePopUpOpen("deleteGroup", {
-                                  slug,
+                                  id,
                                  name
                                });
                              }}