feat(infisical-pg): changed frontend api types _id to normal id

2026-10-16 19:28:35 +00:00 · 2024-01-27 12:38:22 +05:30
parent f3b37de3f3
commit aaba4a0895
161 changed files with 5358 additions and 4510 deletions
@@ -71,7 +71,7 @@ export const PreviewSection = () => {
      console.error(err);
    }
  };
-  
+
  return (
    <div>
      {subscription &&
@@ -79,10 +79,15 @@ export const PreviewSection = () => {
        subscription?.slug !== "pro" &&
        subscription?.slug !== "pro-annual" && (
          <div className="flex flex-row space-x-6">
-            <div className="p-4 rounded-lg flex-1 border border-primary/40 mb-6 flex items-center bg-primary/10">
+            <div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
              <div className="flex-1">
-                <h2 className="text-xl font-medium text-mineshaft-100">Unleash the full power of <span className="text-transparent font-semibold bg-clip-text bg-gradient-to-r from-primary-500 to-yellow">Infisical</span></h2>
-                <p className="text-gray-400 mt-4">
+                <h2 className="text-xl font-medium text-mineshaft-100">
+                  Unleash the full power of{" "}
+                  <span className="bg-gradient-to-r from-primary-500 to-yellow bg-clip-text font-semibold text-transparent">
+                    Infisical
+                  </span>
+                </h2>
+                <p className="mt-4 text-gray-400">
                  Get unlimited members, projects, RBAC, smart alerts, and so much more.
                </p>
              </div>
@@ -98,23 +103,29 @@ export const PreviewSection = () => {
                )}
              </OrgPermissionCan>
            </div>
-            <div className="flex flex-col max-w-[12rem] w-full items-start border border-mineshaft-600 mb-6 flex items-center bg-mineshaft-800 p-4 rounded-lg">
-              <div className="mb-4 flex justify-center w-full font-semibold text-mineshaft-200">Want to learn more? </div>
-              <div className="flex justify-center w-full">
+            <div className="mb-6 flex flex w-full max-w-[12rem] flex-col items-start items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
+              <div className="mb-4 flex w-full justify-center font-semibold text-mineshaft-200">
+                Want to learn more?{" "}
+              </div>
+              <div className="flex w-full justify-center">
                <Link href="https://infisical.com/schedule-demo">
-                  <span className="rounded-full px-4 py-2 bg-mineshaft-600 border border-mineshaft-500 hover:bg-primary/10 hover:border-primary/40 duration-200 cursor-pointer">
-                    Book a demo <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs mb-[0.06rem] ml-1"/>
+                  <span className="cursor-pointer rounded-full border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 duration-200 hover:border-primary/40 hover:bg-primary/10">
+                    Book a demo{" "}
+                    <FontAwesomeIcon
+                      icon={faArrowUpRightFromSquare}
+                      className="mb-[0.06rem] ml-1 text-xs"
+                    />
                  </span>
-                </Link> 
+                </Link>
              </div>
            </div>
          </div>
        )}
      {!isLoading && subscription && data && (
-        <div className="flex mb-6">
-          <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 mr-4 border border-mineshaft-600">
+        <div className="mb-6 flex">
+          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
            <p className="mb-2 text-gray-400">Current plan</p>
-            <p className="text-2xl text-mineshaft-50 font-semibold mb-8">
+            <p className="mb-8 text-2xl font-semibold text-mineshaft-50">
              {`${formatPlanSlug(subscription.slug)} ${
                subscription.status === "trialing" ? "(Trial)" : ""
              }`}
@@ -136,17 +147,17 @@ export const PreviewSection = () => {
              )}
            </OrgPermissionCan>
          </div>
-          <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600 mr-4">
+          <div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
            <p className="mb-2 text-gray-400">Price</p>
-            <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+            <p className="mb-8 text-2xl font-semibold text-mineshaft-50">
              {subscription.status === "trialing"
                ? "$0.00 / month"
                : `${formatAmount(data.amount)} / ${data.interval}`}
            </p>
          </div>
-          <div className="p-4 bg-mineshaft-900 rounded-lg flex-1 border border-mineshaft-600">
+          <div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
            <p className="mb-2 text-gray-400">Subscription renews on</p>
-            <p className="text-2xl mb-8 text-mineshaft-50 font-semibold">
+            <p className="mb-8 text-2xl font-semibold text-mineshaft-50">
              {formatDate(data.currentPeriodEnd)}
            </p>
          </div>
@@ -24,7 +24,7 @@ export const CompanyNameSection = () => {
    },
    resolver: yupResolver(schema)
  });
-  const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
+  const { data } = useGetOrgBillingDetails(currentOrg?.id ?? "");
  const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();

  useEffect(() => {
@@ -37,11 +37,11 @@ export const CompanyNameSection = () => {

  const onFormSubmit = async ({ name }: { name: string }) => {
    try {
-      if (!currentOrg?._id) return;
+      if (!currentOrg?.id) return;
      if (name === "") return;
      await mutateAsync({
        name,
-        organizationId: currentOrg._id
+        organizationId: currentOrg.id
      });

      createNotification({
@@ -60,9 +60,9 @@ export const CompanyNameSection = () => {
  return (
    <form
      onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
    >
-      <h2 className="text-xl font-semibold flex-1 text-mineshaft-100 mb-8">Business name</h2>
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-mineshaft-100">Business name</h2>
      <div className="max-w-md">
        <Controller
          defaultValue=""
@@ -24,7 +24,7 @@ export const InvoiceEmailSection = () => {
    },
    resolver: yupResolver(schema)
  });
-  const { data } = useGetOrgBillingDetails(currentOrg?._id ?? "");
+  const { data } = useGetOrgBillingDetails(currentOrg?.id ?? "");
  const { mutateAsync, isLoading } = useUpdateOrgBillingDetails();

  useEffect(() => {
@@ -37,12 +37,12 @@ export const InvoiceEmailSection = () => {

  const onFormSubmit = async ({ email }: { email: string }) => {
    try {
-      if (!currentOrg?._id) return;
+      if (!currentOrg?.id) return;
      if (email === "") return;

      await mutateAsync({
        email,
-        organizationId: currentOrg._id
+        organizationId: currentOrg.id
      });

      createNotification({
@@ -61,9 +61,9 @@ export const InvoiceEmailSection = () => {
  return (
    <form
      onSubmit={handleSubmit(onFormSubmit)}
-      className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600"
+      className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
    >
-      <h2 className="text-xl font-semibold flex-1 text-white mb-8">Invoice email recipient</h2>
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Invoice email recipient</h2>
      <div className="max-w-md">
        <Controller
          defaultValue=""
@@ -13,9 +13,9 @@ export const PmtMethodsSection = () => {
  const { mutateAsync, isLoading } = useAddOrgPmtMethod();

  const handleAddPmtMethodBtnClick = async () => {
-    if (!currentOrg?._id) return;
+    if (!currentOrg?.id) return;
    const url = await mutateAsync({
-      organizationId: currentOrg._id,
+      organizationId: currentOrg.id,
      success_url: window.location.href,
      cancel_url: window.location.href
    });
@@ -24,9 +24,9 @@ export const PmtMethodsSection = () => {
  };

  return (
-    <div className="p-4 bg-mineshaft-900 mb-6 rounded-lg border border-mineshaft-600">
-      <div className="flex items-center mb-8">
-        <h2 className="text-xl font-semibold flex-1 text-white">Payment methods</h2>
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-8 flex items-center">
+        <h2 className="flex-1 text-xl font-semibold text-white">Payment methods</h2>
        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Billing}>
          {(isAllowed) => (
            <Button
@@ -19,13 +19,13 @@ import { useDeleteOrgPmtMethod, useGetOrgPmtMethods } from "@app/hooks/api";

 export const PmtMethodsTable = () => {
  const { currentOrg } = useOrganization();
-  const { data, isLoading } = useGetOrgPmtMethods(currentOrg?._id ?? "");
+  const { data, isLoading } = useGetOrgPmtMethods(currentOrg?.id ?? "");
  const deleteOrgPmtMethod = useDeleteOrgPmtMethod();

  const handleDeletePmtMethodBtnClick = async (pmtMethodId: string) => {
-    if (!currentOrg?._id) return;
+    if (!currentOrg?.id) return;
    await deleteOrgPmtMethod.mutateAsync({
-      organizationId: currentOrg._id,
+      organizationId: currentOrg.id,
      pmtMethodId
    });
  };
@@ -46,8 +46,8 @@ export const PmtMethodsTable = () => {
          {!isLoading &&
            data &&
            data?.length > 0 &&
-            data.map(({ _id, brand, exp_month, exp_year, funding, last4 }) => (
-              <Tr key={`pmt-method-${_id}`} className="h-10">
+            data.map(({ id, brand, exp_month, exp_year, funding, last4 }) => (
+              <Tr key={`pmt-method-${id}`} className="h-10">
                <Td>{brand.charAt(0).toUpperCase() + brand.slice(1)}</Td>
                <Td>{funding.charAt(0).toUpperCase() + funding.slice(1)}</Td>
                <Td>{last4}</Td>
@@ -60,7 +60,7 @@ export const PmtMethodsTable = () => {
                    {(isAllowed) => (
                      <IconButton
                        onClick={async () => {
-                          await handleDeletePmtMethodBtnClick(_id);
+                          await handleDeletePmtMethodBtnClick(id);
                        }}
                        size="lg"
                        isDisabled={!isAllowed}
@@ -1,4 +1,4 @@
-import { Controller, useForm } from "react-hook-form"; 
+import { Controller, useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import * as yup from "yup";

@@ -69,10 +69,12 @@ const taxIDTypes = [
  { label: "South Africa VAT", value: "za_vat" }
 ];

-const schema = yup.object({
+const schema = yup
+  .object({
    type: yup.string().required("Tax ID type is required"),
    value: yup.string().required("Tax ID value is required")
-}).required();
+  })
+  .required();

 export type AddTaxIDFormData = yup.InferType<typeof schema>;

@@ -82,115 +84,100 @@ type Props = {
  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addTaxID"]>, state?: boolean) => void;
 };

-export const TaxIDModal = ({
-    popUp,
-    handlePopUpClose,
-    handlePopUpToggle
-}: Props) => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
-    const addOrgTaxId = useAddOrgTaxId();
+export const TaxIDModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) => {
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
+  const addOrgTaxId = useAddOrgTaxId();

-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { isSubmitting }
-    } = useForm<AddTaxIDFormData>({
-        resolver: yupResolver(schema)
-    });
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm<AddTaxIDFormData>({
+    resolver: yupResolver(schema)
+  });

-    const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
-        try {
-            if (!currentOrg?._id) return;
-            await addOrgTaxId.mutateAsync({
-                organizationId: currentOrg._id,
-                type,
-                value
-            });
+  const onTaxIDModalSubmit = async ({ type, value }: AddTaxIDFormData) => {
+    try {
+      if (!currentOrg?.id) return;
+      await addOrgTaxId.mutateAsync({
+        organizationId: currentOrg.id,
+        type,
+        value
+      });

-            createNotification({
-                text: "Successfully added Tax ID",
-                type: "success"
-            });
-            handlePopUpClose("addTaxID");
-        } catch (err) {
-            console.error(err);
-            createNotification({
-                text: "Failed to add Tax ID",
-                type: "error"
-            });
-        }
+      createNotification({
+        text: "Successfully added Tax ID",
+        type: "success"
+      });
+      handlePopUpClose("addTaxID");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to add Tax ID",
+        type: "error"
+      });
    }
+  };

-    return (
-        <Modal
-            isOpen={popUp?.addTaxID?.isOpen}
-                onOpenChange={(isOpen) => {
-                handlePopUpToggle("addTaxID", isOpen);
-                reset();
-            }}
-        >
-            <ModalContent title="Add Tax ID">
-            <form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
-                <Controller
-                    control={control}
-                    name="type"
-                    defaultValue="eu_vat"
-                    render={({ field: { onChange, ...field }, fieldState: { error } }) => (
-                        <FormControl
-                            label="Type"
-                            errorText={error?.message}
-                            isError={Boolean(error)}
-                        >
-                            <Select
-                                defaultValue={field.value}
-                                {...field}
-                                onValueChange={(e) => onChange(e)}
-                                className="w-full"
-                            >
-                                {taxIDTypes.map(({ label, value }) => (
-                                    <SelectItem value={String(value || "")} key={label}>
-                                        {label}
-                                    </SelectItem>
-                                ))}
-                            </Select>
-                        </FormControl>
-                    )}
-                />
-                <Controller
-                    control={control}
-                    defaultValue=""
-                    name="value"
-                    render={({ field, fieldState: { error } }) => (
-                        <FormControl
-                            label="Value"
-                            isError={Boolean(error)}
-                            errorText={error?.message}
-                        >
-                        <Input 
-                            {...field} 
-                            placeholder="DE000000000"
-                        />
-                        </FormControl>
-                    )}
-                />
-                <div className="mt-8 flex items-center">
-                <Button
-                    className="mr-4"
-                    size="sm"
-                    type="submit"
-                    isLoading={isSubmitting}
-                    isDisabled={isSubmitting}
+  return (
+    <Modal
+      isOpen={popUp?.addTaxID?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addTaxID", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent title="Add Tax ID">
+        <form onSubmit={handleSubmit(onTaxIDModalSubmit)}>
+          <Controller
+            control={control}
+            name="type"
+            defaultValue="eu_vat"
+            render={({ field: { onChange, ...field }, fieldState: { error } }) => (
+              <FormControl label="Type" errorText={error?.message} isError={Boolean(error)}>
+                <Select
+                  defaultValue={field.value}
+                  {...field}
+                  onValueChange={(e) => onChange(e)}
+                  className="w-full"
                >
-                    Add
-                </Button>
-                <Button colorSchema="secondary" variant="plain">
-                    Cancel
-                </Button>
-                </div>
-            </form>
-            </ModalContent>
-        </Modal>
-    );
-}
+                  {taxIDTypes.map(({ label, value }) => (
+                    <SelectItem value={String(value || "")} key={label}>
+                      {label}
+                    </SelectItem>
+                  ))}
+                </Select>
+              </FormControl>
+            )}
+          />
+          <Controller
+            control={control}
+            defaultValue=""
+            name="value"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Value" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} placeholder="DE000000000" />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center">
+            <Button
+              className="mr-4"
+              size="sm"
+              type="submit"
+              isLoading={isSubmitting}
+              isDisabled={isSubmitting}
+            >
+              Add
+            </Button>
+            <Button colorSchema="secondary" variant="plain">
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};
@@ -72,13 +72,13 @@ const taxIDTypeLabelMap: { [key: string]: string } = {

 export const TaxIDTable = () => {
  const { currentOrg } = useOrganization();
-  const { data, isLoading } = useGetOrgTaxIds(currentOrg?._id ?? "");
+  const { data, isLoading } = useGetOrgTaxIds(currentOrg?.id ?? "");
  const deleteOrgTaxId = useDeleteOrgTaxId();

  const handleDeleteTaxIdBtnClick = async (taxId: string) => {
-    if (!currentOrg?._id) return;
+    if (!currentOrg?.id) return;
    await deleteOrgTaxId.mutateAsync({
-      organizationId: currentOrg._id,
+      organizationId: currentOrg.id,
      taxId
    });
  };
@@ -97,8 +97,8 @@ export const TaxIDTable = () => {
          {!isLoading &&
            data &&
            data?.length > 0 &&
-            data.map(({ _id, type, value }) => (
-              <Tr key={`tax-id-${_id}`} className="h-10">
+            data.map(({ id, type, value }) => (
+              <Tr key={`tax-id-${id}`} className="h-10">
                <Td>{taxIDTypeLabelMap[type]}</Td>
                <Td>{value}</Td>
                <Td>
@@ -109,7 +109,7 @@ export const TaxIDTable = () => {
                    {(isAllowed) => (
                      <IconButton
                        onClick={async () => {
-                          await handleDeleteTaxIdBtnClick(_id);
+                          await handleDeleteTaxIdBtnClick(id);
                        }}
                        size="lg"
                        colorSchema="danger"
@@ -18,7 +18,7 @@ import { useGetOrgInvoices } from "@app/hooks/api";

 export const InvoicesTable = () => {
  const { currentOrg } = useOrganization();
-  const { data, isLoading } = useGetOrgInvoices(currentOrg?._id ?? "");
+  const { data, isLoading } = useGetOrgInvoices(currentOrg?.id ?? "");
  return (
    <TableContainer className="mt-8">
      <Table>
@@ -35,7 +35,7 @@ export const InvoicesTable = () => {
          {!isLoading &&
            data &&
            data?.length > 0 &&
-            data.map(({ _id, created, paid, number, total, invoice_pdf }) => {
+            data.map(({ id, created, paid, number, total, invoice_pdf }) => {
              const formattedTotal = (Math.floor(total) / 100).toLocaleString("en-US", {
                style: "currency",
                currency: "USD"
@@ -47,7 +47,7 @@ export const InvoicesTable = () => {
              const formattedDate: string = `${day}/${month}/${year}`;

              return (
-                <Tr key={`invoice-${_id}`} className="h-10">
+                <Tr key={`invoice-${id}`} className="h-10">
                  <Td>{number}</Td>
                  <Td>{formattedDate}</Td>
                  <Td>{paid ? "Paid" : "Not Paid"}</Td>
@@ -12,57 +12,52 @@ import {
  Tr
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
-import {
-    useGetOrgLicenses
-} from "@app/hooks/api";
+import { useGetOrgLicenses } from "@app/hooks/api";

 export const LicensesSection = () => {
-    const { currentOrg } = useOrganization();
-    const { data, isLoading } = useGetOrgLicenses(currentOrg?.id ?? "");
-    
-    return (
-        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Enterprise licenses</h2>
-            <TableContainer className="mt-4">
-                <Table>
-                    <THead>
-                        <Tr>
-                            <Th>License Key</Th>
-                            <Th>Status</Th>
-                            <Th>Issued Date</Th>
-                            <Th>Expiry Date</Th>
-                        </Tr>
-                    </THead>
-                    <TBody>
-                        {!isLoading && data && data?.length > 0 && data.map(({
-                            id,
-                            licenseKey,
-                            isActivated,
-                            createdAt,
-                            expiresAt
-                        }) => {
-                            const formattedCreatedAt = new Date(createdAt).toISOString().split("T")[0];
-                            const formattedExpiresAt = new Date(expiresAt).toISOString().split("T")[0];
-                            return (
-                                <Tr key={`license-${id}`} className="h-10">
-                                    <Td>{licenseKey}</Td>
-                                    <Td>{isActivated ? "Active" : "Inactive"}</Td>
-                                    <Td>{formattedCreatedAt}</Td>
-                                    <Td>{formattedExpiresAt}</Td>
-                                </Tr>
-                            );
-                        })}
-                        {isLoading && <TableSkeleton columns={4} innerKey="licenses" />}
-                        {!isLoading && data && data?.length === 0 && (
-                            <Tr>
-                                <Td colSpan={4}>
-                                    <EmptyState title="No enterprise licenses on file" icon={faFileContract} />
-                                </Td>
-                            </Tr>
-                        )}
-                    </TBody>
-                </Table>
-            </TableContainer>
-        </div>
-    );
-}
+  const { currentOrg } = useOrganization();
+  const { data, isLoading } = useGetOrgLicenses(currentOrg?.id ?? "");
+
+  return (
+    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <h2 className="mb-8 flex-1 text-xl font-semibold text-white">Enterprise licenses</h2>
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>License Key</Th>
+              <Th>Status</Th>
+              <Th>Issued Date</Th>
+              <Th>Expiry Date</Th>
+            </Tr>
+          </THead>
+          <TBody>
+            {!isLoading &&
+              data &&
+              data?.length > 0 &&
+              data.map(({ id, licenseKey, isActivated, createdAt, expiresAt }) => {
+                const formattedCreatedAt = new Date(createdAt).toISOString().split("T")[0];
+                const formattedExpiresAt = new Date(expiresAt).toISOString().split("T")[0];
+                return (
+                  <Tr key={`license-${id}`} className="h-10">
+                    <Td>{licenseKey}</Td>
+                    <Td>{isActivated ? "Active" : "Inactive"}</Td>
+                    <Td>{formattedCreatedAt}</Td>
+                    <Td>{formattedExpiresAt}</Td>
+                  </Tr>
+                );
+              })}
+            {isLoading && <TableSkeleton columns={4} innerKey="licenses" />}
+            {!isLoading && data && data?.length === 0 && (
+              <Tr>
+                <Td colSpan={4}>
+                  <EmptyState title="No enterprise licenses on file" icon={faFileContract} />
+                </Td>
+              </Tr>
+            )}
+          </TBody>
+        </Table>
+      </TableContainer>
+    </div>
+  );
+};