feat: add GitLab OAuth client (#4692)

found via:

- https://github.com/makeplane/docs/issues/48
- https://github.com/makeplane/plane/pull/3109

.github/workflows/build-aio-base.yml

@@ -45,7 +45,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [base_build_setup]
     env:
-      BASE_IMG_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-aio-base:${{ needs.base_build_setup.outputs.gh_branch_name }}
+      BASE_IMG_TAG: makeplane/plane-aio-base:${{ needs.base_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.base_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.base_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.base_build_setup.outputs.gh_buildx_version }}
@@ -58,7 +58,7 @@ jobs:
       - name: Set Docker Tag
         run: |
           if [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-aio-base:latest
+            TAG=makeplane/plane-aio-base:latest
           else
             TAG=${{ env.BASE_IMG_TAG }}
           fi

.github/workflows/build-branch.yml

@@ -14,7 +14,7 @@ env:
 
 jobs:
   branch_build_setup:
-    name: Build-Push Web/Space/API/Proxy Docker Image
+    name: Build Setup
     runs-on: ubuntu-latest
     outputs:
       gh_branch_name: ${{ steps.set_env_variables.outputs.TARGET_BRANCH }}
@@ -85,7 +85,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      FRONTEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      FRONTEND_TAG: makeplane/plane-frontend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -95,9 +95,9 @@ jobs:
       - name: Set Frontend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-frontend:stable,makeplane/plane-frontend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-frontend:latest
+            TAG=makeplane/plane-frontend:latest
           else
             TAG=${{ env.FRONTEND_TAG }}
           fi
@@ -137,7 +137,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      ADMIN_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      ADMIN_TAG: makeplane/plane-admin:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -147,9 +147,9 @@ jobs:
       - name: Set Admin Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-admin:stable,makeplane/plane-admin:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-admin:latest
+            TAG=makeplane/plane-admin:latest
           else
             TAG=${{ env.ADMIN_TAG }}
           fi
@@ -189,7 +189,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      SPACE_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      SPACE_TAG: makeplane/plane-space:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -199,9 +199,9 @@ jobs:
       - name: Set Space Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-space:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-space:stable,makeplane/plane-space:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-space:latest
+            TAG=makeplane/plane-space:latest
           else
             TAG=${{ env.SPACE_TAG }}
           fi
@@ -241,7 +241,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      BACKEND_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      BACKEND_TAG: makeplane/plane-backend:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -251,9 +251,9 @@ jobs:
       - name: Set Backend Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-backend:stable,makeplane/plane-backend:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-backend:latest
+            TAG=makeplane/plane-backend:latest
           else
             TAG=${{ env.BACKEND_TAG }}
           fi
@@ -293,7 +293,7 @@ jobs:
     runs-on: ubuntu-20.04
     needs: [branch_build_setup]
     env:
-      PROXY_TAG: ${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
+      PROXY_TAG: makeplane/plane-proxy:${{ needs.branch_build_setup.outputs.gh_branch_name }}
       TARGET_BRANCH: ${{ needs.branch_build_setup.outputs.gh_branch_name }}
       BUILDX_DRIVER: ${{ needs.branch_build_setup.outputs.gh_buildx_driver }}
       BUILDX_VERSION: ${{ needs.branch_build_setup.outputs.gh_buildx_version }}
@@ -303,9 +303,9 @@ jobs:
       - name: Set Proxy Docker Tag
         run: |
           if [ "${{ github.event_name }}" == "release" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:stable,${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:${{ github.event.release.tag_name }}
+            TAG=makeplane/plane-proxy:stable,makeplane/plane-proxy:${{ github.event.release.tag_name }}
           elif [ "${{ env.TARGET_BRANCH }}" == "master" ]; then
-            TAG=${{ secrets.DOCKERHUB_USERNAME }}/plane-proxy:latest
+            TAG=makeplane/plane-proxy:latest
           else
             TAG=${{ env.PROXY_TAG }}
           fi

.github/workflows/build-test-pull-request.yml

@@ -3,10 +3,11 @@ name: Build and Lint on Pull Request
 on:
   workflow_dispatch:
   pull_request:
-    types: ["opened", "synchronize"]
+    types: ["opened", "synchronize", "ready_for_review"]
 
 jobs:
   get-changed-files:
+    if: github.event.pull_request.draft == false
     runs-on: ubuntu-latest
     outputs:
       apiserver_changed: ${{ steps.changed-files.outputs.apiserver_any_changed }}

README.md

@@ -48,7 +48,7 @@ Meet [Plane](https://dub.sh/plane-website-readme), an open-source project manage
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account.
 
-If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/docker-compose).
+If you would like to self-host Plane, please see our [deployment guide](https://docs.plane.so/self-hosting/overview).
 
 | Installation methods | Docs link                                                                                                                                          |
 | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |

admin/app/authentication/components/gitlab-config.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+// icons
+import { Settings2 } from "lucide-react";
+// types
+import { TInstanceAuthenticationMethodKeys } from "@plane/types";
+// ui
+import { ToggleSwitch, getButtonStyling } from "@plane/ui";
+// helpers
+import { cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  disabled: boolean;
+  updateConfig: (key: TInstanceAuthenticationMethodKeys, value: string) => void;
+};
+
+export const GitlabConfiguration: React.FC<Props> = observer((props) => {
+  const { disabled, updateConfig } = props;
+  // store
+  const { formattedConfig } = useInstance();
+  // derived values
+  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
+  const isGitlabConfigured = !!formattedConfig?.GITLAB_CLIENT_ID && !!formattedConfig?.GITLAB_CLIENT_SECRET;
+
+  return (
+    <>
+      {isGitlabConfigured ? (
+        <div className="flex items-center gap-4">
+          <Link href="/authentication/gitlab" className={cn(getButtonStyling("link-primary", "md"), "font-medium")}>
+            Edit
+          </Link>
+          <ToggleSwitch
+            value={Boolean(parseInt(enableGitlabConfig))}
+            onChange={() => {
+              Boolean(parseInt(enableGitlabConfig)) === true
+                ? updateConfig("IS_GITLAB_ENABLED", "0")
+                : updateConfig("IS_GITLAB_ENABLED", "1");
+            }}
+            size="sm"
+            disabled={disabled}
+          />
+        </div>
+      ) : (
+        <Link
+          href="/authentication/gitlab"
+          className={cn(getButtonStyling("neutral-primary", "sm"), "text-custom-text-300")}
+        >
+          <Settings2 className="h-4 w-4 p-0.5 text-custom-text-300/80" />
+          Configure
+        </Link>
+      )}
+    </>
+  );
+});

admin/app/authentication/components/index.ts

@@ -1,5 +1,6 @@
 export * from "./email-config-switch";
 export * from "./password-config-switch";
 export * from "./authentication-method-card";
+export * from "./gitlab-config";
 export * from "./github-config";
 export * from "./google-config";

admin/app/authentication/gitlab/form.tsx

@@ -0,0 +1,212 @@
+import { FC, useState } from "react";
+import isEmpty from "lodash/isEmpty";
+import Link from "next/link";
+import { useForm } from "react-hook-form";
+// types
+import { IFormattedInstanceConfiguration, TInstanceGitlabAuthenticationConfigurationKeys } from "@plane/types";
+// ui
+import { Button, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
+// components
+import {
+  ConfirmDiscardModal,
+  ControllerInput,
+  CopyField,
+  TControllerInputFormField,
+  TCopyField,
+} from "@/components/common";
+// helpers
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
+// hooks
+import { useInstance } from "@/hooks/store";
+
+type Props = {
+  config: IFormattedInstanceConfiguration;
+};
+
+type GitlabConfigFormValues = Record<TInstanceGitlabAuthenticationConfigurationKeys, string>;
+
+export const InstanceGitlabConfigForm: FC<Props> = (props) => {
+  const { config } = props;
+  // states
+  const [isDiscardChangesModalOpen, setIsDiscardChangesModalOpen] = useState(false);
+  // store hooks
+  const { updateInstanceConfigurations } = useInstance();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isDirty, isSubmitting },
+  } = useForm<GitlabConfigFormValues>({
+    defaultValues: {
+      GITLAB_HOST: config["GITLAB_HOST"],
+      GITLAB_CLIENT_ID: config["GITLAB_CLIENT_ID"],
+      GITLAB_CLIENT_SECRET: config["GITLAB_CLIENT_SECRET"],
+    },
+  });
+
+  const originURL = !isEmpty(API_BASE_URL) ? API_BASE_URL : typeof window !== "undefined" ? window.location.origin : "";
+
+  const GITLAB_FORM_FIELDS: TControllerInputFormField[] = [
+    {
+      key: "GITLAB_HOST",
+      type: "text",
+      label: "Host",
+      description: (
+        <>
+          This is the <b>GitLab host</b> to use for login, <b>including scheme</b>.
+        </>
+      ),
+      placeholder: "https://gitlab.com",
+      error: Boolean(errors.GITLAB_HOST),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_ID",
+      type: "text",
+      label: "Application ID",
+      description: (
+        <>
+          Get this from your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "c2ef2e7fc4e9d15aa7630f5637d59e8e4a27ff01dceebdb26b0d267b9adcf3c3",
+      error: Boolean(errors.GITLAB_CLIENT_ID),
+      required: true,
+    },
+    {
+      key: "GITLAB_CLIENT_SECRET",
+      type: "password",
+      label: "Secret",
+      description: (
+        <>
+          The client secret is also found in your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application settings
+          </a>
+          .
+        </>
+      ),
+      placeholder: "gloas-f79cfa9a03c97f6ffab303177a5a6778a53c61e3914ba093412f68a9298a1b28",
+      error: Boolean(errors.GITLAB_CLIENT_SECRET),
+      required: true,
+    },
+  ];
+
+  const GITLAB_SERVICE_FIELD: TCopyField[] = [
+    {
+      key: "Callback_URL",
+      label: "Callback URL",
+      url: `${originURL}/auth/gitlab/callback/`,
+      description: (
+        <>
+          We will auto-generate this. Paste this into the <b>Redirect URI</b> field of your{" "}
+          <a
+            tabIndex={-1}
+            href="https://docs.gitlab.com/ee/integration/oauth_provider.html"
+            target="_blank"
+            className="text-custom-primary-100 hover:underline"
+            rel="noreferrer"
+          >
+            GitLab OAuth application
+          </a>
+          .
+        </>
+      ),
+    },
+  ];
+
+  const onSubmit = async (formData: GitlabConfigFormValues) => {
+    const payload: Partial<GitlabConfigFormValues> = { ...formData };
+
+    await updateInstanceConfigurations(payload)
+      .then((response = []) => {
+        setToast({
+          type: TOAST_TYPE.SUCCESS,
+          title: "Success",
+          message: "GitLab Configuration Settings updated successfully",
+        });
+        reset({
+          GITLAB_HOST: response.find((item) => item.key === "GITLAB_HOST")?.value,
+          GITLAB_CLIENT_ID: response.find((item) => item.key === "GITLAB_CLIENT_ID")?.value,
+          GITLAB_CLIENT_SECRET: response.find((item) => item.key === "GITLAB_CLIENT_SECRET")?.value,
+        });
+      })
+      .catch((err) => console.error(err));
+  };
+
+  const handleGoBack = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
+    if (isDirty) {
+      e.preventDefault();
+      setIsDiscardChangesModalOpen(true);
+    }
+  };
+
+  return (
+    <>
+      <ConfirmDiscardModal
+        isOpen={isDiscardChangesModalOpen}
+        onDiscardHref="/authentication"
+        handleClose={() => setIsDiscardChangesModalOpen(false)}
+      />
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-2 gap-x-12 gap-y-8 w-full">
+          <div className="flex flex-col gap-y-4 col-span-2 md:col-span-1">
+            <div className="pt-2 text-xl font-medium">Configuration</div>
+            {GITLAB_FORM_FIELDS.map((field) => (
+              <ControllerInput
+                key={field.key}
+                control={control}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
+              />
+            ))}
+            <div className="flex flex-col gap-1 pt-4">
+              <div className="flex items-center gap-4">
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                  {isSubmitting ? "Saving..." : "Save changes"}
+                </Button>
+                <Link
+                  href="/authentication"
+                  className={cn(getButtonStyling("link-neutral", "md"), "font-medium")}
+                  onClick={handleGoBack}
+                >
+                  Go back
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-span-2 md:col-span-1">
+            <div className="flex flex-col gap-y-4 px-6 py-4 my-2 bg-custom-background-80/60 rounded-lg">
+              <div className="pt-2 text-xl font-medium">Service provider details</div>
+              {GITLAB_SERVICE_FIELD.map((field) => (
+                <CopyField key={field.key} label={field.label} url={field.url} description={field.description} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

admin/app/authentication/gitlab/page.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import useSWR from "swr";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
+// components
+import { PageHeader } from "@/components/core";
+// hooks
+import { useInstance } from "@/hooks/store";
+// icons
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
+// local components
+import { AuthenticationMethodCard } from "../components";
+import { InstanceGitlabConfigForm } from "./form";
+
+const InstanceGitlabAuthenticationPage = observer(() => {
+  // store
+  const { fetchInstanceConfigurations, formattedConfig, updateInstanceConfigurations } = useInstance();
+  // state
+  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
+  // config
+  const enableGitlabConfig = formattedConfig?.IS_GITLAB_ENABLED ?? "";
+
+  useSWR("INSTANCE_CONFIGURATIONS", () => fetchInstanceConfigurations());
+
+  const updateConfig = async (key: "IS_GITLAB_ENABLED", value: string) => {
+    setIsSubmitting(true);
+
+    const payload = {
+      [key]: value,
+    };
+
+    const updateConfigPromise = updateInstanceConfigurations(payload);
+
+    setPromiseToast(updateConfigPromise, {
+      loading: "Saving Configuration...",
+      success: {
+        title: "Configuration saved",
+        message: () => `GitLab authentication is now ${value ? "active" : "disabled"}.`,
+      },
+      error: {
+        title: "Error",
+        message: () => "Failed to save configuration",
+      },
+    });
+
+    await updateConfigPromise
+      .then(() => {
+        setIsSubmitting(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSubmitting(false);
+      });
+  };
+  return (
+    <>
+      <PageHeader title="Authentication - God Mode" />
+      <div className="relative container mx-auto w-full h-full p-4 py-4 space-y-6 flex flex-col">
+        <div className="border-b border-custom-border-100 mx-4 py-4 space-y-1 flex-shrink-0">
+          <AuthenticationMethodCard
+            name="GitLab"
+            description="Allow members to login or sign up to plane with their GitLab accounts."
+            icon={<Image src={GitlabLogo} height={24} width={24} alt="GitLab Logo" />}
+            config={
+              <ToggleSwitch
+                value={Boolean(parseInt(enableGitlabConfig))}
+                onChange={() => {
+                  Boolean(parseInt(enableGitlabConfig)) === true
+                    ? updateConfig("IS_GITLAB_ENABLED", "0")
+                    : updateConfig("IS_GITLAB_ENABLED", "1");
+                }}
+                size="sm"
+                disabled={isSubmitting || !formattedConfig}
+              />
+            }
+            disabled={isSubmitting || !formattedConfig}
+            withBorder={false}
+          />
+        </div>
+        <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md p-4">
+          {formattedConfig ? (
+            <InstanceGitlabConfigForm config={formattedConfig} />
+          ) : (
+            <Loader className="space-y-8">
+              <Loader.Item height="50px" width="25%" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" width="50%" />
+            </Loader>
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default InstanceGitlabAuthenticationPage;

admin/app/authentication/page.tsx

@@ -7,22 +7,24 @@ import { useTheme } from "next-themes";
 import useSWR from "swr";
 import { Mails, KeyRound } from "lucide-react";
 import { TInstanceConfigurationKeys } from "@plane/types";
-import { Loader, setPromiseToast } from "@plane/ui";
+import { Loader, ToggleSwitch, setPromiseToast } from "@plane/ui";
 // components
 import { PageHeader } from "@/components/core";
 // hooks
 // helpers
-import { resolveGeneralTheme } from "@/helpers/common.helper";
+import { cn, resolveGeneralTheme } from "@/helpers/common.helper";
 import { useInstance } from "@/hooks/store";
 // images
 import githubLightModeImage from "@/public/logos/github-black.png";
 import githubDarkModeImage from "@/public/logos/github-white.png";
+import GitlabLogo from "@/public/logos/gitlab-logo.svg";
 import GoogleLogo from "@/public/logos/google-logo.svg";
 // local components
 import {
   AuthenticationMethodCard,
   EmailCodesConfiguration,
   PasswordLoginConfiguration,
+  GitlabConfiguration,
   GithubConfiguration,
   GoogleConfiguration,
 } from "./components";
@@ -45,6 +47,8 @@ const InstanceAuthenticationPage = observer(() => {
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
   // theme
   const { resolvedTheme } = useTheme();
+  // derived values
+  const enableSignUpConfig = formattedConfig?.ENABLE_SIGNUP ?? "";
 
   const updateConfig = async (key: TInstanceConfigurationKeys, value: string) => {
     setIsSubmitting(true);
@@ -114,6 +118,13 @@ const InstanceAuthenticationPage = observer(() => {
       ),
       config: <GithubConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
     },
+    {
+      key: "gitlab",
+      name: "GitLab",
+      description: "Allow members to login or sign up to plane with their GitLab accounts.",
+      icon: <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />,
+      config: <GitlabConfiguration disabled={isSubmitting} updateConfig={updateConfig} />,
+    },
   ];
 
   return (
@@ -129,7 +140,34 @@ const InstanceAuthenticationPage = observer(() => {
         <div className="flex-grow overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md px-4">
           {formattedConfig ? (
             <div className="space-y-3">
-              <div className="text-lg font-medium">Authentication modes</div>
+              <div className="text-lg font-medium pb-1">Sign-up configuration</div>
+              <div className={cn("w-full flex items-center gap-14 rounded")}>
+                <div className="flex grow items-center gap-4">
+                  <div className="grow">
+                    <div className={cn("font-medium leading-5 text-custom-text-100 text-sm")}>
+                      Allow anyone to sign up without invite
+                    </div>
+                    <div className={cn("font-normal leading-5 text-custom-text-300 text-xs")}>
+                      Toggling this off will disable self sign ups.
+                    </div>
+                  </div>
+                </div>
+                <div className={`shrink-0 pr-4 ${isSubmitting && "opacity-70"}`}>
+                  <div className="flex items-center gap-4">
+                    <ToggleSwitch
+                      value={Boolean(parseInt(enableSignUpConfig))}
+                      onChange={() => {
+                        Boolean(parseInt(enableSignUpConfig)) === true
+                          ? updateConfig("ENABLE_SIGNUP", "0")
+                          : updateConfig("ENABLE_SIGNUP", "1");
+                      }}
+                      size="sm"
+                      disabled={isSubmitting}
+                    />
+                  </div>
+                </div>
+              </div>
+              <div className="text-lg font-medium pt-6">Authentication modes</div>
               {authenticationMethodsCard.map((method) => (
                 <AuthenticationMethodCard
                   key={method.key}

admin/components/admin-sidebar/help-section.tsx

@@ -5,9 +5,11 @@ import { observer } from "mobx-react-lite";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
 import { Transition } from "@headlessui/react";
+// ui
 import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
+// helpers
+import { WEB_BASE_URL, cn } from "@/helpers/common.helper";
 // hooks
-import { WEB_BASE_URL } from "@/helpers/common.helper";
 import { useTheme } from "@/hooks/store";
 // assets
 import packageJson from "package.json";
@@ -42,9 +44,12 @@ export const HelpSection: FC = observer(() => {
 
   return (
     <div
-      className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-4 py-2 ${
-        isSidebarCollapsed ? "flex-col" : ""
-      }`}
+      className={cn(
+        "flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 px-4 h-14 flex-shrink-0",
+        {
+          "flex-col h-auto py-1.5": isSidebarCollapsed,
+        }
+      )}
     >
       <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
         <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>

admin/components/auth-header.tsx

@@ -31,6 +31,8 @@ export const InstanceHeader: FC = observer(() => {
         return "Google";
       case "github":
         return "Github";
+      case "gitlab":
+        return "GitLab";
       default:
         return pathName.toUpperCase();
     }

admin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "admin",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": true,
   "scripts": {
     "dev": "turbo run develop",

admin/public/logos/gitlab-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 80 220 220"><defs><style>.cls-1{fill:#e24329;}.cls-2{fill:#fc6d26;}.cls-3{fill:#fca326;}</style></defs><g id="LOGO"><path class="cls-1" d="M282.83,170.73l-.27-.69-26.14-68.22a6.81,6.81,0,0,0-2.69-3.24,7,7,0,0,0-8,.43,7,7,0,0,0-2.32,3.52l-17.65,54H154.29l-17.65-54A6.86,6.86,0,0,0,134.32,99a7,7,0,0,0-8-.43,6.87,6.87,0,0,0-2.69,3.24L97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82,19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91,40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-2" d="M282.83,170.73l-.27-.69a88.3,88.3,0,0,0-35.15,15.8L190,229.25c19.55,14.79,36.57,27.64,36.57,27.64l40.06-30,.1-.08A48.56,48.56,0,0,0,282.83,170.73Z"/><path class="cls-3" d="M153.43,256.89l19.7,14.91,12,9.06a8.07,8.07,0,0,0,9.76,0l12-9.06,19.7-14.91S209.55,244,190,229.25C170.45,244,153.43,256.89,153.43,256.89Z"/><path class="cls-2" d="M132.58,185.84A88.19,88.19,0,0,0,97.44,170l-.26.69a48.54,48.54,0,0,0,16.1,56.1l.09.07.24.17,39.82,29.82s17-12.85,36.57-27.64Z"/></g></svg>

apiserver/package.json

@@ -1,4 +1,4 @@
 {
   "name": "plane-api",
-  "version": "0.20.0"
+  "version": "0.21.0"
 }

apiserver/plane/api/views/issue.py

@@ -182,7 +182,6 @@ class IssueAPIEndpoint(BaseAPIView):
         issue_queryset = (
             self.get_queryset()
             .annotate(cycle_id=F("issue_cycle__cycle_id"))
-            .annotate(module_id=F("issue_module__module_id"))
             .annotate(
                 link_count=IssueLink.objects.filter(issue=OuterRef("id"))
                 .order_by()

apiserver/plane/app/serializers/cycle.py

@@ -66,6 +66,7 @@ class CycleSerializer(BaseSerializer):
             "external_source",
             "external_id",
             "progress_snapshot",
+            "logo_props",
             # meta fields
             "is_favorite",
             "total_issues",

apiserver/plane/app/serializers/module.py

@@ -199,6 +199,7 @@ class ModuleSerializer(DynamicBaseSerializer):
             "sort_order",
             "external_source",
             "external_id",
+            "logo_props",
             # computed fields
             "is_favorite",
             "total_issues",

apiserver/plane/app/serializers/page.py

@@ -39,6 +39,7 @@ class PageSerializer(BaseSerializer):
             "created_by",
             "updated_by",
             "view_props",
+            "logo_props",
         ]
         read_only_fields = [
             "workspace",

apiserver/plane/app/views/cycle/base.py

@@ -231,6 +231,7 @@ class CycleViewSet(BaseViewSet):
                 "external_source",
                 "external_id",
                 "progress_snapshot",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -356,6 +357,7 @@ class CycleViewSet(BaseViewSet):
             "external_source",
             "external_id",
             "progress_snapshot",
+            "logo_props",
             # meta fields
             "is_favorite",
             "total_issues",
@@ -403,6 +405,7 @@ class CycleViewSet(BaseViewSet):
                         "external_source",
                         "external_id",
                         "progress_snapshot",
+                        "logo_props",
                         # meta fields
                         "is_favorite",
                         "cancelled_issues",
@@ -496,6 +499,7 @@ class CycleViewSet(BaseViewSet):
                 "external_source",
                 "external_id",
                 "progress_snapshot",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",
@@ -556,6 +560,7 @@ class CycleViewSet(BaseViewSet):
                 "external_id",
                 "progress_snapshot",
                 "sub_issues",
+                "logo_props",
                 # meta fields
                 "is_favorite",
                 "total_issues",

apiserver/plane/app/views/module/base.py

@@ -225,6 +225,7 @@ class ModuleViewSet(BaseViewSet):
                     "sort_order",
                     "external_source",
                     "external_id",
+                    "logo_props",
                     # computed fields
                     "is_favorite",
                     "cancelled_issues",
@@ -281,6 +282,7 @@ class ModuleViewSet(BaseViewSet):
                 "sort_order",
                 "external_source",
                 "external_id",
+                "logo_props",
                 # computed fields
                 "total_issues",
                 "is_favorite",
@@ -465,6 +467,7 @@ class ModuleViewSet(BaseViewSet):
                 "sort_order",
                 "external_source",
                 "external_id",
+                "logo_props",
                 # computed fields
                 "is_favorite",
                 "cancelled_issues",

apiserver/plane/authentication/adapter/base.py

@@ -4,6 +4,8 @@ import uuid
 
 # Django imports
 from django.utils import timezone
+from django.core.validators import validate_email
+from django.core.exceptions import ValidationError
 
 # Third party imports
 from zxcvbn import zxcvbn
@@ -46,68 +48,71 @@ class Adapter:
     def authenticate(self):
         raise NotImplementedError
 
-    def complete_login_or_signup(self):
-        email = self.user_data.get("email")
-        user = User.objects.filter(email=email).first()
-        # Check if sign up case or login
-        is_signup = bool(user)
-        if not user:
-            # New user
-            (ENABLE_SIGNUP,) = get_configuration_value(
-                [
-                    {
-                        "key": "ENABLE_SIGNUP",
-                        "default": os.environ.get("ENABLE_SIGNUP", "1"),
-                    },
-                ]
-            )
-            if (
-                ENABLE_SIGNUP == "0"
-                and not WorkspaceMemberInvite.objects.filter(
-                    email=email,
-                ).exists()
-            ):
-                raise AuthenticationException(
-                    error_code=AUTHENTICATION_ERROR_CODES["SIGNUP_DISABLED"],
-                    error_message="SIGNUP_DISABLED",
-                    payload={"email": email},
-                )
-            user = User(email=email, username=uuid.uuid4().hex)
-
-            if self.user_data.get("user").get("is_password_autoset"):
-                user.set_password(uuid.uuid4().hex)
-                user.is_password_autoset = True
-                user.is_email_verified = True
-            else:
-                # Validate password
-                results = zxcvbn(self.code)
-                if results["score"] < 3:
-                    raise AuthenticationException(
-                        error_code=AUTHENTICATION_ERROR_CODES[
-                            "INVALID_PASSWORD"
-                        ],
-                        error_message="INVALID_PASSWORD",
-                        payload={"email": email},
-                    )
-
-                user.set_password(self.code)
-                user.is_password_autoset = False
-
-            avatar = self.user_data.get("user", {}).get("avatar", "")
-            first_name = self.user_data.get("user", {}).get("first_name", "")
-            last_name = self.user_data.get("user", {}).get("last_name", "")
-            user.avatar = avatar if avatar else ""
-            user.first_name = first_name if first_name else ""
-            user.last_name = last_name if last_name else ""
-            user.save()
-            Profile.objects.create(user=user)
-
-        if not user.is_active:
+    def sanitize_email(self, email):
+        # Check if email is present
+        if not email:
             raise AuthenticationException(
-                AUTHENTICATION_ERROR_CODES["USER_ACCOUNT_DEACTIVATED"],
-                error_message="USER_ACCOUNT_DEACTIVATED",
+                error_code=AUTHENTICATION_ERROR_CODES["INVALID_EMAIL"],
+                error_message="INVALID_EMAIL",
+                payload={"email": email},
             )
 
+        # Sanitize email
+        email = str(email).lower().strip()
+
+        # validate email
+        try:
+            validate_email(email)
+        except ValidationError:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["INVALID_EMAIL"],
+                error_message="INVALID_EMAIL",
+                payload={"email": email},
+            )
+        # Return email
+        return email
+
+    def validate_password(self, email):
+        """Validate password strength"""
+        results = zxcvbn(self.code)
+        if results["score"] < 3:
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["INVALID_PASSWORD"],
+                error_message="INVALID_PASSWORD",
+                payload={"email": email},
+            )
+        return
+
+    def __check_signup(self, email):
+        """Check if sign up is enabled or not and raise exception if not enabled"""
+
+        # Get configuration value
+        (ENABLE_SIGNUP,) = get_configuration_value(
+            [
+                {
+                    "key": "ENABLE_SIGNUP",
+                    "default": os.environ.get("ENABLE_SIGNUP", "1"),
+                },
+            ]
+        )
+
+        # Check if sign up is disabled and invite is present or not
+        if (
+            ENABLE_SIGNUP == "0"
+            and not WorkspaceMemberInvite.objects.filter(
+                email=email,
+            ).exists()
+        ):
+            # Raise exception
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["SIGNUP_DISABLED"],
+                error_message="SIGNUP_DISABLED",
+                payload={"email": email},
+            )
+
+        return True
+
+    def save_user_data(self, user):
         # Update user details
         user.last_login_medium = self.provider
         user.last_active = timezone.now()
@@ -116,7 +121,63 @@ class Adapter:
         user.last_login_uagent = self.request.META.get("HTTP_USER_AGENT")
         user.token_updated_at = timezone.now()
         user.save()
+        return user
 
+    def complete_login_or_signup(self):
+        # Get email
+        email = self.user_data.get("email")
+
+        # Sanitize email
+        email = self.sanitize_email(email)
+
+        # Check if the user is present
+        user = User.objects.filter(email=email).first()
+        # Check if sign up case or login
+        is_signup = bool(user)
+        # If user is not present, create a new user
+        if not user:
+            # New user
+            self.__check_signup(email)
+
+            # Initialize user
+            user = User(email=email, username=uuid.uuid4().hex)
+
+            # Check if password is autoset
+            if self.user_data.get("user").get("is_password_autoset"):
+                user.set_password(uuid.uuid4().hex)
+                user.is_password_autoset = True
+                user.is_email_verified = True
+
+            # Validate password
+            else:
+                # Validate password
+                self.validate_password(email)
+                # Set password
+                user.set_password(self.code)
+                user.is_password_autoset = False
+
+            # Set user details
+            avatar = self.user_data.get("user", {}).get("avatar", "")
+            first_name = self.user_data.get("user", {}).get("first_name", "")
+            last_name = self.user_data.get("user", {}).get("last_name", "")
+            user.avatar = avatar if avatar else ""
+            user.first_name = first_name if first_name else ""
+            user.last_name = last_name if last_name else ""
+            user.save()
+
+            # Create profile
+            Profile.objects.create(user=user)
+
+        if not user.is_active:
+            raise AuthenticationException(
+                AUTHENTICATION_ERROR_CODES["USER_ACCOUNT_DEACTIVATED"],
+                error_message="USER_ACCOUNT_DEACTIVATED",
+            )
+
+        # Save user data
+        user = self.save_user_data(user=user)
+
+        # Call callback if present
         if self.callback:
             self.callback(
                 user,
@@ -124,7 +185,9 @@ class Adapter:
                 self.request,
             )
 
+        # Create or update account if token data is present
         if self.token_data:
             self.create_update_account(user=user)
 
+        # Return user
         return user

apiserver/plane/authentication/adapter/error.py

@@ -33,10 +33,13 @@ AUTHENTICATION_ERROR_CODES = {
     "EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_IN": 5100,
     "EMAIL_CODE_ATTEMPT_EXHAUSTED_SIGN_UP": 5102,
     # Oauth
+    "OAUTH_NOT_CONFIGURED": 5104,
     "GOOGLE_NOT_CONFIGURED": 5105,
     "GITHUB_NOT_CONFIGURED": 5110,
+    "GITLAB_NOT_CONFIGURED": 5111,
     "GOOGLE_OAUTH_PROVIDER_ERROR": 5115,
     "GITHUB_OAUTH_PROVIDER_ERROR": 5120,
+    "GITLAB_OAUTH_PROVIDER_ERROR": 5121,
     # Reset Password
     "INVALID_PASSWORD_TOKEN": 5125,
     "EXPIRED_PASSWORD_TOKEN": 5130,
@@ -58,6 +61,8 @@ AUTHENTICATION_ERROR_CODES = {
     "ADMIN_USER_DEACTIVATED": 5190,
     # Rate limit
     "RATE_LIMIT_EXCEEDED": 5900,
+    # Unknown
+    "AUTHENTICATION_FAILED": 5999,
 }
 
 

apiserver/plane/authentication/adapter/oauth.py

@@ -62,11 +62,7 @@ class OauthAdapter(Adapter):
             response.raise_for_status()
             return response.json()
         except requests.RequestException:
-            code = (
-                "GOOGLE_OAUTH_PROVIDER_ERROR"
-                if self.provider == "google"
-                else "GITHUB_OAUTH_PROVIDER_ERROR"
-            )
+            code = self._provider_error_code()
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES[code],
                 error_message=str(code),
@@ -81,11 +77,15 @@ class OauthAdapter(Adapter):
             response.raise_for_status()
             return response.json()
         except requests.RequestException:
-            code = (
-                "GOOGLE_OAUTH_PROVIDER_ERROR"
-                if self.provider == "google"
-                else "GITHUB_OAUTH_PROVIDER_ERROR"
-            )
+            if self.provider == "google":
+                code = "GOOGLE_OAUTH_PROVIDER_ERROR"
+            elif self.provider == "github":
+                code = "GITHUB_OAUTH_PROVIDER_ERROR"
+            elif self.provider == "gitlab":
+                code = "GITLAB_OAUTH_PROVIDER_ERROR"
+            else:
+                code = "OAUTH_NOT_CONFIGURED"
+
             raise AuthenticationException(
                 error_code=AUTHENTICATION_ERROR_CODES[code],
                 error_message=str(code),

apiserver/plane/authentication/provider/oauth/gitlab.py

@@ -0,0 +1,145 @@
+# Python imports
+import os
+from datetime import datetime
+from urllib.parse import urlencode
+
+import pytz
+
+# Module imports
+from plane.authentication.adapter.oauth import OauthAdapter
+from plane.license.utils.instance_value import get_configuration_value
+from plane.authentication.adapter.error import (
+    AuthenticationException,
+    AUTHENTICATION_ERROR_CODES,
+)
+
+
+class GitLabOAuthProvider(OauthAdapter):
+
+    (GITLAB_HOST,) = get_configuration_value(
+        [
+                {
+                    "key": "GITLAB_HOST",
+                    "default": os.environ.get("GITLAB_HOST", "https://gitlab.com"),
+                },
+        ]
+    )
+
+    if not GITLAB_HOST:
+        raise AuthenticationException(
+            error_code=AUTHENTICATION_ERROR_CODES["GITLAB_NOT_CONFIGURED"],
+            error_message="GITLAB_NOT_CONFIGURED",
+        )
+
+    host = GITLAB_HOST
+
+    token_url = (
+        f"{host}/oauth/token"
+    )
+    userinfo_url = (
+        f"{host}/api/v4/user"
+    )
+
+    provider = "gitlab"
+    scope = "read_user"
+
+    def __init__(self, request, code=None, state=None, callback=None):
+
+        GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET = get_configuration_value(
+            [
+                {
+                    "key": "GITLAB_CLIENT_ID",
+                    "default": os.environ.get("GITLAB_CLIENT_ID"),
+                },
+                {
+                    "key": "GITLAB_CLIENT_SECRET",
+                    "default": os.environ.get("GITLAB_CLIENT_SECRET"),
+                },
+            ]
+        )
+
+        if not (GITLAB_CLIENT_ID and GITLAB_CLIENT_SECRET):
+            raise AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES["GITLAB_NOT_CONFIGURED"],
+                error_message="GITLAB_NOT_CONFIGURED",
+            )
+
+        client_id = GITLAB_CLIENT_ID
+        client_secret = GITLAB_CLIENT_SECRET
+
+        redirect_uri = f"""{"https" if request.is_secure() else "http"}://{request.get_host()}/auth/gitlab/callback/"""
+        url_params = {
+            "client_id": client_id,
+            "redirect_uri": redirect_uri,
+            "response_type": "code",
+            "scope": self.scope,
+            "state": state,
+        }
+        auth_url = (
+            f"{self.host}/oauth/authorize?{urlencode(url_params)}"
+        )
+        super().__init__(
+            request,
+            self.provider,
+            client_id,
+            self.scope,
+            redirect_uri,
+            auth_url,
+            self.token_url,
+            self.userinfo_url,
+            client_secret,
+            code,
+            callback=callback,
+        )
+
+    def set_token_data(self):
+        data = {
+            "client_id": self.client_id,
+            "client_secret": self.client_secret,
+            "code": self.code,
+            "redirect_uri": self.redirect_uri,
+            "grant_type": "authorization_code"
+        }
+        token_response = self.get_user_token(
+            data=data, headers={"Accept": "application/json"}
+        )
+        super().set_token_data(
+            {
+                "access_token": token_response.get("access_token"),
+                "refresh_token": token_response.get("refresh_token", None),
+                "access_token_expired_at": (
+                    datetime.fromtimestamp(
+                        token_response.get("created_at") + token_response.get("expires_in"),
+                        tz=pytz.utc,
+                    )
+                    if token_response.get("expires_in")
+                    else None
+                ),
+                "refresh_token_expired_at": (
+                    datetime.fromtimestamp(
+                        token_response.get("refresh_token_expired_at"),
+                        tz=pytz.utc,
+                    )
+                    if token_response.get("refresh_token_expired_at")
+                    else None
+                ),
+                "id_token": token_response.get("id_token", ""),
+            }
+        )
+
+    def set_user_data(self):
+        user_info_response = self.get_user_response()
+        email = user_info_response.get("email")
+        super().set_user_data(
+            {
+                "email": email,
+                "user": {
+                    "provider_id": user_info_response.get("id"),
+                    "email": email,
+                    "avatar": user_info_response.get("avatar_url"),
+                    "first_name": user_info_response.get("name"),
+                    "last_name": user_info_response.get("family_name"),
+                    "is_password_autoset": True,
+                },
+            }
+        )

apiserver/plane/authentication/urls.py

@@ -8,6 +8,8 @@ from .views import (
     ChangePasswordEndpoint,
     # App
     EmailCheckEndpoint,
+    GitLabCallbackEndpoint,
+    GitLabOauthInitiateEndpoint,
     GitHubCallbackEndpoint,
     GitHubOauthInitiateEndpoint,
     GoogleCallbackEndpoint,
@@ -22,6 +24,8 @@ from .views import (
     ResetPasswordSpaceEndpoint,
     # Space
     EmailCheckSpaceEndpoint,
+    GitLabCallbackSpaceEndpoint,
+    GitLabOauthInitiateSpaceEndpoint,
     GitHubCallbackSpaceEndpoint,
     GitHubOauthInitiateSpaceEndpoint,
     GoogleCallbackSpaceEndpoint,
@@ -151,6 +155,27 @@ urlpatterns = [
         GitHubCallbackSpaceEndpoint.as_view(),
         name="github-callback",
     ),
+    ## Gitlab Oauth
+    path(
+        "gitlab/",
+        GitLabOauthInitiateEndpoint.as_view(),
+        name="gitlab-initiate",
+    ),
+    path(
+        "gitlab/callback/",
+        GitLabCallbackEndpoint.as_view(),
+        name="gitlab-callback",
+    ),
+    path(
+        "spaces/gitlab/",
+        GitLabOauthInitiateSpaceEndpoint.as_view(),
+        name="gitlab-initiate",
+    ),
+    path(
+        "spaces/gitlab/callback/",
+        GitLabCallbackSpaceEndpoint.as_view(),
+        name="gitlab-callback",
+    ),
     # Email Check
     path(
         "email-check/",

apiserver/plane/authentication/utils/workspace_project_join.py

@@ -4,6 +4,7 @@ from plane.db.models import (
     WorkspaceMember,
     WorkspaceMemberInvite,
 )
+from plane.utils.cache import invalidate_cache_directly
 
 
 def process_workspace_project_invitations(user):
@@ -26,6 +27,16 @@ def process_workspace_project_invitations(user):
         ignore_conflicts=True,
     )
 
+    [
+        invalidate_cache_directly(
+            path=f"/api/workspaces/{str(workspace_member_invite.workspace.slug)}/members/",
+            url_params=False,
+            user=False,
+            multiple=True,
+        )
+        for workspace_member_invite in workspace_member_invites
+    ]
+
     # Check if user has any project invites
     project_member_invites = ProjectMemberInvite.objects.filter(
         email=user.email, accepted=True

apiserver/plane/authentication/views/__init__.py

@@ -14,6 +14,10 @@ from .app.github import (
     GitHubCallbackEndpoint,
     GitHubOauthInitiateEndpoint,
 )
+from .app.gitlab import (
+    GitLabCallbackEndpoint,
+    GitLabOauthInitiateEndpoint,
+)
 from .app.google import (
     GoogleCallbackEndpoint,
     GoogleOauthInitiateEndpoint,
@@ -34,6 +38,11 @@ from .space.github import (
     GitHubOauthInitiateSpaceEndpoint,
 )
 
+from .space.gitlab import (
+    GitLabCallbackSpaceEndpoint,
+    GitLabOauthInitiateSpaceEndpoint,
+)
+
 from .space.google import (
     GoogleCallbackSpaceEndpoint,
     GoogleOauthInitiateSpaceEndpoint,

apiserver/plane/authentication/views/app/gitlab.py

@@ -0,0 +1,131 @@
+import uuid
+from urllib.parse import urlencode, urljoin
+
+# Django import
+from django.http import HttpResponseRedirect
+from django.views import View
+
+# Module imports
+from plane.authentication.provider.oauth.gitlab import GitLabOAuthProvider
+from plane.authentication.utils.login import user_login
+from plane.authentication.utils.redirection_path import get_redirection_path
+from plane.authentication.utils.user_auth_workflow import (
+    post_user_auth_workflow,
+)
+from plane.license.models import Instance
+from plane.authentication.utils.host import base_host
+from plane.authentication.adapter.error import (
+    AuthenticationException,
+    AUTHENTICATION_ERROR_CODES,
+)
+
+
+class GitLabOauthInitiateEndpoint(View):
+
+    def get(self, request):
+        # Get host and next path
+        request.session["host"] = base_host(request=request, is_app=True)
+        next_path = request.GET.get("next_path")
+        if next_path:
+            request.session["next_path"] = str(next_path)
+
+        # Check instance configuration
+        instance = Instance.objects.first()
+        if instance is None or not instance.is_setup_done:
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "INSTANCE_NOT_CONFIGURED"
+                ],
+                error_message="INSTANCE_NOT_CONFIGURED",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = urljoin(
+                base_host(request=request, is_app=True),
+                "?" + urlencode(params),
+            )
+            return HttpResponseRedirect(url)
+        try:
+            state = uuid.uuid4().hex
+            provider = GitLabOAuthProvider(request=request, state=state)
+            request.session["state"] = state
+            auth_url = provider.get_auth_url()
+            return HttpResponseRedirect(auth_url)
+        except AuthenticationException as e:
+            params = e.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = urljoin(
+                base_host(request=request, is_app=True),
+                "?" + urlencode(params),
+            )
+            return HttpResponseRedirect(url)
+
+
+class GitLabCallbackEndpoint(View):
+
+    def get(self, request):
+        code = request.GET.get("code")
+        state = request.GET.get("state")
+        base_host = request.session.get("host")
+        next_path = request.session.get("next_path")
+
+        if state != request.session.get("state", ""):
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITLAB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITLAB_OAUTH_PROVIDER_ERROR",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = urljoin(
+                base_host,
+                "?" + urlencode(params),
+            )
+            return HttpResponseRedirect(url)
+
+        if not code:
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITLAB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITLAB_OAUTH_PROVIDER_ERROR",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = urljoin(
+                base_host,
+                "?" + urlencode(params),
+            )
+            return HttpResponseRedirect(url)
+
+        try:
+            provider = GitLabOAuthProvider(
+                request=request,
+                code=code,
+                callback=post_user_auth_workflow,
+            )
+            user = provider.authenticate()
+            # Login the user and record his device info
+            user_login(request=request, user=user, is_app=True)
+            # Get the redirection path
+            if next_path:
+                path = next_path
+            else:
+                path = get_redirection_path(user=user)
+            # redirect to referer path
+            url = urljoin(base_host, path)
+            return HttpResponseRedirect(url)
+        except AuthenticationException as e:
+            params = e.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = urljoin(
+                base_host,
+                "?" + urlencode(params),
+            )
+            return HttpResponseRedirect(url)

apiserver/plane/authentication/views/space/gitlab.py

@@ -0,0 +1,109 @@
+# Python imports
+import uuid
+from urllib.parse import urlencode
+
+# Django import
+from django.http import HttpResponseRedirect
+from django.views import View
+
+# Module imports
+from plane.authentication.provider.oauth.gitlab import GitLabOAuthProvider
+from plane.authentication.utils.login import user_login
+from plane.license.models import Instance
+from plane.authentication.utils.host import base_host
+from plane.authentication.adapter.error import (
+    AUTHENTICATION_ERROR_CODES,
+    AuthenticationException,
+)
+
+
+class GitLabOauthInitiateSpaceEndpoint(View):
+
+    def get(self, request):
+        # Get host and next path
+        request.session["host"] = base_host(request=request, is_space=True)
+        next_path = request.GET.get("next_path")
+        if next_path:
+            request.session["next_path"] = str(next_path)
+
+        # Check instance configuration
+        instance = Instance.objects.first()
+        if instance is None or not instance.is_setup_done:
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "INSTANCE_NOT_CONFIGURED"
+                ],
+                error_message="INSTANCE_NOT_CONFIGURED",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = f"{base_host(request=request, is_space=True)}?{urlencode(params)}"
+            return HttpResponseRedirect(url)
+
+        try:
+            state = uuid.uuid4().hex
+            provider = GitLabOAuthProvider(request=request, state=state)
+            request.session["state"] = state
+            auth_url = provider.get_auth_url()
+            return HttpResponseRedirect(auth_url)
+        except AuthenticationException as e:
+            params = e.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = f"{base_host(request=request, is_space=True)}?{urlencode(params)}"
+            return HttpResponseRedirect(url)
+
+
+class GitLabCallbackSpaceEndpoint(View):
+
+    def get(self, request):
+        code = request.GET.get("code")
+        state = request.GET.get("state")
+        base_host = request.session.get("host")
+        next_path = request.session.get("next_path")
+
+        if state != request.session.get("state", ""):
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITLAB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITLAB_OAUTH_PROVIDER_ERROR",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = f"{base_host(request=request, is_space=True)}?{urlencode(params)}"
+            return HttpResponseRedirect(url)
+
+        if not code:
+            exc = AuthenticationException(
+                error_code=AUTHENTICATION_ERROR_CODES[
+                    "GITLAB_OAUTH_PROVIDER_ERROR"
+                ],
+                error_message="GITLAB_OAUTH_PROVIDER_ERROR",
+            )
+            params = exc.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = f"{base_host(request=request, is_space=True)}?{urlencode(params)}"
+            return HttpResponseRedirect(url)
+
+        try:
+            provider = GitLabOAuthProvider(
+                request=request,
+                code=code,
+            )
+            user = provider.authenticate()
+            # Login the user and record his device info
+            user_login(request=request, user=user, is_space=True)
+            # Process workspace and project invitations
+            # redirect to referer path
+            url = f"{base_host(request=request, is_space=True)}{str(next_path) if next_path else ''}"
+            return HttpResponseRedirect(url)
+        except AuthenticationException as e:
+            params = e.get_error_dict()
+            if next_path:
+                params["next_path"] = str(next_path)
+            url = f"{base_host(request=request, is_space=True)}?{urlencode(params)}"
+            return HttpResponseRedirect(url)

apiserver/plane/db/migrations/0067_alter_account_provider_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 4.2.11 on 2024-06-03 17:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('db', '0066_account_id_token_cycle_logo_props_module_logo_props'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='account',
+            name='provider',
+            field=models.CharField(choices=[('google', 'Google'), ('github', 'Github'), ('gitlab', 'GitLab')]),
+        ),
+        migrations.AlterField(
+            model_name='socialloginconnection',
+            name='medium',
+            field=models.CharField(choices=[('Google', 'google'), ('Github', 'github'), ('GitLab', 'gitlab'), ('Jira', 'jira')], default=None, max_length=20),
+        ),
+    ]

apiserver/plane/db/models/asset.py

@@ -12,6 +12,7 @@ from .base import BaseModel
 
 
 def get_upload_path(instance, filename):
+    filename = filename[:50]
     if instance.workspace_id is not None:
         return f"{instance.workspace.id}/{uuid4().hex}-{filename}"
     return f"user-{uuid4().hex}-{filename}"

apiserver/plane/db/models/social_connection.py

@@ -10,7 +10,7 @@ from .base import BaseModel
 class SocialLoginConnection(BaseModel):
     medium = models.CharField(
         max_length=20,
-        choices=(("Google", "google"), ("Github", "github"), ("Jira", "jira")),
+        choices=(("Google", "google"), ("Github", "github"), ("GitLab", "gitlab"), ("Jira", "jira")),
         default=None,
     )
     last_login_at = models.DateTimeField(default=timezone.now, null=True)

apiserver/plane/db/models/user.py

@@ -182,7 +182,7 @@ class Account(TimeAuditModel):
     )
     provider_account_id = models.CharField(max_length=255)
     provider = models.CharField(
-        choices=(("google", "Google"), ("github", "Github")),
+        choices=(("google", "Google"), ("github", "Github"), ("gitlab", "GitLab")),
     )
     access_token = models.TextField()
     access_token_expired_at = models.DateTimeField(null=True)

apiserver/plane/license/api/serializers/instance.py

@@ -13,12 +13,9 @@ class InstanceSerializer(BaseSerializer):
         model = Instance
         exclude = [
             "license_key",
-            "api_key",
-            "version",
         ]
         read_only_fields = [
             "id",
-            "instance_id",
             "email",
             "last_checked_at",
             "is_setup_done",

apiserver/plane/license/api/views/instance.py

@@ -54,6 +54,7 @@ class InstanceEndpoint(BaseAPIView):
             IS_GOOGLE_ENABLED,
             IS_GITHUB_ENABLED,
             GITHUB_APP_NAME,
+            IS_GITLAB_ENABLED,
             EMAIL_HOST,
             ENABLE_MAGIC_LINK_LOGIN,
             ENABLE_EMAIL_PASSWORD,
@@ -76,6 +77,10 @@ class InstanceEndpoint(BaseAPIView):
                     "key": "GITHUB_APP_NAME",
                     "default": os.environ.get("GITHUB_APP_NAME", ""),
                 },
+                {
+                    "key": "IS_GITLAB_ENABLED",
+                    "default": os.environ.get("IS_GITLAB_ENABLED", "0"),
+                },
                 {
                     "key": "EMAIL_HOST",
                     "default": os.environ.get("EMAIL_HOST", ""),
@@ -115,6 +120,7 @@ class InstanceEndpoint(BaseAPIView):
         # Authentication
         data["is_google_enabled"] = IS_GOOGLE_ENABLED == "1"
         data["is_github_enabled"] = IS_GITHUB_ENABLED == "1"
+        data["is_gitlab_enabled"] = IS_GITLAB_ENABLED == "1"
         data["is_magic_login_enabled"] = ENABLE_MAGIC_LINK_LOGIN == "1"
         data["is_email_password_enabled"] = ENABLE_EMAIL_PASSWORD == "1"
 

apiserver/plane/license/management/commands/configure_instance.py

@@ -59,6 +59,24 @@ class Command(BaseCommand):
                 "category": "GITHUB",
                 "is_encrypted": True,
             },
+            {
+                "key": "GITLAB_HOST",
+                "value": os.environ.get("GITLAB_HOST"),
+                "category": "GITLAB",
+                "is_encrypted": False,
+            },
+            {
+                "key": "GITLAB_CLIENT_ID",
+                "value": os.environ.get("GITLAB_CLIENT_ID"),
+                "category": "GITLAB",
+                "is_encrypted": False,
+            },
+            {
+                "key": "GITLAB_CLIENT_SECRET",
+                "value": os.environ.get("GITLAB_CLIENT_SECRET"),
+                "category": "GITLAB",
+                "is_encrypted": True,
+            },
             {
                 "key": "EMAIL_HOST",
                 "value": os.environ.get("EMAIL_HOST", ""),
@@ -145,7 +163,7 @@ class Command(BaseCommand):
                     )
                 )
 
-        keys = ["IS_GOOGLE_ENABLED", "IS_GITHUB_ENABLED"]
+        keys = ["IS_GOOGLE_ENABLED", "IS_GITHUB_ENABLED", "IS_GITLAB_ENABLED"]
         if not InstanceConfiguration.objects.filter(key__in=keys).exists():
             for key in keys:
                 if key == "IS_GOOGLE_ENABLED":
@@ -216,6 +234,46 @@ class Command(BaseCommand):
                             f"{key} loaded with value from environment variable."
                         )
                     )
+                if key == "IS_GITLAB_ENABLED":
+                    GITLAB_HOST, GITLAB_CLIENT_ID, GITLAB_CLIENT_SECRET = (
+                        get_configuration_value(
+                            [
+                                {
+                                    "key": "GITLAB_HOST",
+                                    "default": os.environ.get(
+                                        "GITLAB_HOST", "https://gitlab.com"
+                                    ),
+                                },
+                                {
+                                    "key": "GITLAB_CLIENT_ID",
+                                    "default": os.environ.get(
+                                        "GITLAB_CLIENT_ID", ""
+                                    ),
+                                },
+                                {
+                                    "key": "GITLAB_CLIENT_SECRET",
+                                    "default": os.environ.get(
+                                        "GITLAB_CLIENT_SECRET", ""
+                                    ),
+                                },
+                            ]
+                        )
+                    )
+                    if bool(GITLAB_HOST) and bool(GITLAB_CLIENT_ID) and bool(GITLAB_CLIENT_SECRET):
+                        value = "1"
+                    else:
+                        value = "0"
+                    InstanceConfiguration.objects.create(
+                        key="IS_GITLAB_ENABLED",
+                        value=value,
+                        category="AUTHENTICATION",
+                        is_encrypted=False,
+                    )
+                    self.stdout.write(
+                        self.style.SUCCESS(
+                            f"{key} loaded with value from environment variable."
+                        )
+                    )
         else:
             for key in keys:
                 self.stdout.write(

apiserver/plane/license/management/commands/register_instance.py

@@ -49,8 +49,8 @@ class Command(BaseCommand):
                 instance_name="Plane Community Edition",
                 instance_id=secrets.token_hex(12),
                 license_key=None,
-                api_key=secrets.token_hex(8),
-                version=payload.get("version"),
+                current_version=payload.get("version"),
+                latest_version=payload.get("version"),
                 last_checked_at=timezone.now(),
                 user_count=payload.get("user_count", 0),
             )

apiserver/plane/license/migrations/0002_rename_version_instance_current_version_and_more.py

@@ -0,0 +1,106 @@
+# Generated by Django 4.2.11 on 2024-05-31 10:46
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import uuid
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ("license", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="instance",
+            name="instance_id",
+            field=models.CharField(max_length=255, unique=True),
+        ),
+        migrations.RenameField(
+            model_name="instance",
+            old_name="version",
+            new_name="current_version",
+        ),
+        migrations.RemoveField(
+            model_name="instance",
+            name="api_key",
+        ),
+        migrations.AddField(
+            model_name="instance",
+            name="domain",
+            field=models.TextField(blank=True),
+        ),
+        migrations.AddField(
+            model_name="instance",
+            name="latest_version",
+            field=models.CharField(blank=True, max_length=10, null=True),
+        ),
+        migrations.AddField(
+            model_name="instance",
+            name="product",
+            field=models.CharField(default="plane-ce", max_length=50),
+        ),
+        migrations.CreateModel(
+            name="ChangeLog",
+            fields=[
+                (
+                    "created_at",
+                    models.DateTimeField(
+                        auto_now_add=True, verbose_name="Created At"
+                    ),
+                ),
+                (
+                    "updated_at",
+                    models.DateTimeField(
+                        auto_now=True, verbose_name="Last Modified At"
+                    ),
+                ),
+                (
+                    "id",
+                    models.UUIDField(
+                        db_index=True,
+                        default=uuid.uuid4,
+                        editable=False,
+                        primary_key=True,
+                        serialize=False,
+                        unique=True,
+                    ),
+                ),
+                ("title", models.CharField(max_length=100)),
+                ("description", models.TextField(blank=True)),
+                ("version", models.CharField(max_length=100)),
+                ("tags", models.JSONField(default=list)),
+                ("release_date", models.DateTimeField(null=True)),
+                ("is_release_candidate", models.BooleanField(default=False)),
+                (
+                    "created_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_created_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Created By",
+                    ),
+                ),
+                (
+                    "updated_by",
+                    models.ForeignKey(
+                        null=True,
+                        on_delete=django.db.models.deletion.SET_NULL,
+                        related_name="%(class)s_updated_by",
+                        to=settings.AUTH_USER_MODEL,
+                        verbose_name="Last Modified By",
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Change Log",
+                "verbose_name_plural": "Change Logs",
+                "db_table": "changelogs",
+                "ordering": ("-created_at",),
+            },
+        ),
+    ]

apiserver/plane/license/migrations/0003_alter_changelog_title_alter_changelog_version_and_more.py

@@ -0,0 +1,43 @@
+# Generated by Django 4.2.11 on 2024-06-05 13:41
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("license", "0002_rename_version_instance_current_version_and_more"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="changelog",
+            name="title",
+            field=models.CharField(max_length=255),
+        ),
+        migrations.AlterField(
+            model_name="changelog",
+            name="version",
+            field=models.CharField(max_length=255),
+        ),
+        migrations.AlterField(
+            model_name="instance",
+            name="current_version",
+            field=models.CharField(max_length=255),
+        ),
+        migrations.AlterField(
+            model_name="instance",
+            name="latest_version",
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+        migrations.AlterField(
+            model_name="instance",
+            name="namespace",
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+        migrations.AlterField(
+            model_name="instance",
+            name="product",
+            field=models.CharField(default="plane-ce", max_length=255),
+        ),
+    ]

apiserver/plane/license/models/instance.py

@@ -1,3 +1,6 @@
+# Python imports
+from enum import Enum
+
 # Django imports
 from django.db import models
 from django.conf import settings
@@ -8,17 +11,25 @@ from plane.db.models import BaseModel
 ROLE_CHOICES = ((20, "Admin"),)
 
 
+class ProductTypes(Enum):
+    PLANE_CE = "plane-ce"
+
+
 class Instance(BaseModel):
-    # General informations
+    # General information
     instance_name = models.CharField(max_length=255)
     whitelist_emails = models.TextField(blank=True, null=True)
-    instance_id = models.CharField(max_length=25, unique=True)
+    instance_id = models.CharField(max_length=255, unique=True)
     license_key = models.CharField(max_length=256, null=True, blank=True)
-    api_key = models.CharField(max_length=16)
-    version = models.CharField(max_length=10)
-    # Instnace specifics
+    current_version = models.CharField(max_length=255)
+    latest_version = models.CharField(max_length=255, null=True, blank=True)
+    product = models.CharField(
+        max_length=255, default=ProductTypes.PLANE_CE.value
+    )
+    domain = models.TextField(blank=True)
+    # Instance specifics
     last_checked_at = models.DateTimeField()
-    namespace = models.CharField(max_length=50, blank=True, null=True)
+    namespace = models.CharField(max_length=255, blank=True, null=True)
     # telemetry and support
     is_telemetry_enabled = models.BooleanField(default=True)
     is_support_required = models.BooleanField(default=True)
@@ -70,3 +81,20 @@ class InstanceConfiguration(BaseModel):
         verbose_name_plural = "Instance Configurations"
         db_table = "instance_configurations"
         ordering = ("-created_at",)
+
+
+class ChangeLog(BaseModel):
+    """Change Log model to store the release changelogs made in the application."""
+
+    title = models.CharField(max_length=255)
+    description = models.TextField(blank=True)
+    version = models.CharField(max_length=255)
+    tags = models.JSONField(default=list)
+    release_date = models.DateTimeField(null=True)
+    is_release_candidate = models.BooleanField(default=False)
+
+    class Meta:
+        verbose_name = "Change Log"
+        verbose_name_plural = "Change Logs"
+        db_table = "changelogs"
+        ordering = ("-created_at",)

apiserver/plane/settings/common.py

@@ -225,6 +225,9 @@ DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
 EMAIL_BACKEND = "django.core.mail.backends.smtp.EmailBackend"
 
 # Storage Settings
+# Use Minio settings
+USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
+
 STORAGES = {
     "staticfiles": {
         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
@@ -243,7 +246,7 @@ AWS_S3_FILE_OVERWRITE = False
 AWS_S3_ENDPOINT_URL = os.environ.get(
     "AWS_S3_ENDPOINT_URL", None
 ) or os.environ.get("MINIO_ENDPOINT_URL", None)
-if AWS_S3_ENDPOINT_URL:
+if AWS_S3_ENDPOINT_URL and USE_MINIO:
     parsed_url = urlparse(os.environ.get("WEB_URL", "http://localhost"))
     AWS_S3_CUSTOM_DOMAIN = f"{parsed_url.netloc}/{AWS_STORAGE_BUCKET_NAME}"
     AWS_S3_URL_PROTOCOL = f"{parsed_url.scheme}:"
@@ -307,8 +310,6 @@ GITHUB_ACCESS_TOKEN = os.environ.get("GITHUB_ACCESS_TOKEN", False)
 ANALYTICS_SECRET_KEY = os.environ.get("ANALYTICS_SECRET_KEY", False)
 ANALYTICS_BASE_API = os.environ.get("ANALYTICS_BASE_API", False)
 
-# Use Minio settings
-USE_MINIO = int(os.environ.get("USE_MINIO", 0)) == 1
 
 # Posthog settings
 POSTHOG_API_KEY = os.environ.get("POSTHOG_API_KEY", False)
@@ -350,4 +351,4 @@ CSRF_FAILURE_VIEW = "plane.authentication.views.common.csrf_failure"
 # Base URLs
 ADMIN_BASE_URL = os.environ.get("ADMIN_BASE_URL", None)
 SPACE_BASE_URL = os.environ.get("SPACE_BASE_URL", None)
-APP_BASE_URL = os.environ.get("APP_BASE_URL") or os.environ.get("WEB_URL")
+APP_BASE_URL = os.environ.get("APP_BASE_URL")

apiserver/plane/utils/cache.py

@@ -66,7 +66,7 @@ def invalidate_cache_directly(
         custom_path = path if path is not None else request.get_full_path()
     auth_header = (
         None
-        if request.user.is_anonymous
+        if request and request.user.is_anonymous
         else str(request.user.id) if user else None
     )
     key = generate_cache_key(custom_path, auth_header)

package.json

@@ -1,6 +1,6 @@
 {
   "repository": "https://github.com/makeplane/plane.git",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "license": "AGPL-3.0",
   "private": true,
   "workspaces": [

packages/constants/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/constants",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": true,
   "main": "./src/index.ts",
   "exports": {

packages/constants/src/auth.ts

@@ -60,10 +60,13 @@ export enum EAuthErrorCodes {
   EXPIRED_MAGIC_CODE = "5095",
   EMAIL_CODE_ATTEMPT_EXHAUSTED = "5100",
   // Oauth
+  OAUTH_NOT_CONFIGURED = "5104",
   GOOGLE_NOT_CONFIGURED = "5105",
   GITHUB_NOT_CONFIGURED = "5110",
+  GITLAB_NOT_CONFIGURED = "5111",
   GOOGLE_OAUTH_PROVIDER_ERROR = "5115",
   GITHUB_OAUTH_PROVIDER_ERROR = "5120",
+  GITLAB_OAUTH_PROVIDER_ERROR = "5121",
   // Reset Password
   INVALID_PASSWORD_TOKEN = "5125",
   EXPIRED_PASSWORD_TOKEN = "5130",
@@ -215,6 +218,10 @@ const errorCodeMessages: {
   },
 
   // Oauth
+  [EAuthenticationErrorCodes.OAUTH_NOT_CONFIGURED]: {
+    title: `OAuth not configured`,
+    message: () => `OAuth not configured. Please contact your administrator.`,
+  },
   [EAuthenticationErrorCodes.GOOGLE_NOT_CONFIGURED]: {
     title: `Google not configured`,
     message: () => `Google not configured. Please contact your administrator.`,
@@ -223,6 +230,10 @@ const errorCodeMessages: {
     title: `GitHub not configured`,
     message: () => `GitHub not configured. Please contact your administrator.`,
   },
+  [EAuthenticationErrorCodes.GITLAB_NOT_CONFIGURED]: {
+    title: `GitLab not configured`,
+    message: () => `GitLab not configured. Please contact your administrator.`,
+  },
   [EAuthenticationErrorCodes.GOOGLE_OAUTH_PROVIDER_ERROR]: {
     title: `Google OAuth provider error`,
     message: () => `Google OAuth provider error. Please try again.`,
@@ -231,6 +242,10 @@ const errorCodeMessages: {
     title: `GitHub OAuth provider error`,
     message: () => `GitHub OAuth provider error. Please try again.`,
   },
+  [EAuthenticationErrorCodes.GITLAB_OAUTH_PROVIDER_ERROR]: {
+    title: `GitLab OAuth provider error`,
+    message: () => `GitLab OAuth provider error. Please try again.`,
+  },
 
   // Reset Password
   [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {

packages/editor/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-core",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Core Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/core/src/hooks/use-editor.tsx

@@ -112,7 +112,7 @@ export const useEditor = ({
     if (value === null || value === undefined) return;
     if (editor && !editor.isDestroyed && !editor.storage.image.uploadInProgress) {
       try {
-        editor.commands.setContent(value);
+        editor.commands.setContent(value, false, { preserveWhitespace: "full" });
         const currentSavedSelection = savedSelectionRef.current;
         if (currentSavedSelection) {
           const docLength = editor.state.doc.content.size;
@@ -147,7 +147,7 @@ export const useEditor = ({
         const item = getEditorMenuItem(itemName);
         if (item) {
           if (item.key === "image") {
-            item.command(savedSelection);
+            item.command(savedSelectionRef.current);
           } else {
             item.command();
           }
@@ -186,6 +186,7 @@ export const useEditor = ({
         if (!editorRef.current) return;
         scrollSummary(editorRef.current, marking);
       },
+      isEditorReadyToDiscard: () => editorRef.current?.storage.image.uploadInProgress === false,
       setFocusAtPosition: (position: number) => {
         if (!editorRef.current || editorRef.current.isDestroyed) {
           console.error("Editor reference is not available or has been destroyed.");

packages/editor/core/src/index.ts

@@ -9,7 +9,7 @@ export { isCellSelection } from "src/ui/extensions/table/table/utilities/is-cell
 // utils
 export * from "src/lib/utils";
 export * from "src/ui/extensions/table/table";
-export { startImageUpload } from "src/ui/plugins/upload-image";
+export { startImageUpload } from "src/ui/plugins/image/image-upload-handler";
 
 // components
 export { EditorContainer } from "src/ui/components/editor-container";

packages/editor/core/src/lib/editor-commands.ts

@@ -1,8 +1,9 @@
 import { Editor, Range } from "@tiptap/core";
-import { startImageUpload } from "src/ui/plugins/upload-image";
+import { startImageUpload } from "src/ui/plugins/image/image-upload-handler";
 import { findTableAncestor } from "src/lib/utils";
 import { Selection } from "@tiptap/pm/state";
 import { UploadImage } from "src/types/upload-image";
+import { replaceCodeWithText } from "src/ui/extensions/code/utils/replace-code-block-with-text";
 
 export const setText = (editor: Editor, range?: Range) => {
   if (range) editor.chain().focus().deleteRange(range).clearNodes().run();
@@ -54,69 +55,11 @@ export const toggleUnderline = (editor: Editor, range?: Range) => {
   else editor.chain().focus().toggleUnderline().run();
 };
 
-const replaceCodeBlockWithContent = (editor: Editor) => {
-  try {
-    const { schema } = editor.state;
-    const { paragraph } = schema.nodes;
-    let replaced = false;
-
-    const replaceCodeBlock = (from: number, to: number, textContent: string) => {
-      const docSize = editor.state.doc.content.size;
-
-      if (from < 0 || to > docSize || from > to) {
-        console.error("Invalid range for replacement: ", from, to, "in a document of size", docSize);
-        return;
-      }
-
-      // split the textContent by new lines to handle each line as a separate paragraph
-      const lines = textContent.split(/\r?\n/);
-
-      const tr = editor.state.tr;
-
-      // Calculate the position for inserting the first paragraph
-      let insertPos = from;
-
-      // Remove the code block first
-      tr.delete(from, to);
-
-      // For each line, create a paragraph node and insert it
-      lines.forEach((line) => {
-        const paragraphNode = paragraph.create({}, schema.text(line));
-        tr.insert(insertPos, paragraphNode);
-        // Update insertPos for the next insertion
-        insertPos += paragraphNode.nodeSize;
-      });
-
-      // Dispatch the transaction
-      editor.view.dispatch(tr);
-      replaced = true;
-    };
-
-    editor.state.doc.nodesBetween(editor.state.selection.from, editor.state.selection.to, (node, pos) => {
-      if (node.type === schema.nodes.codeBlock) {
-        const startPos = pos;
-        const endPos = pos + node.nodeSize;
-        const textContent = node.textContent;
-        if (textContent.length === 0) {
-          editor.chain().focus().toggleCodeBlock().run();
-        }
-        replaceCodeBlock(startPos, endPos, textContent);
-        return false;
-      }
-    });
-
-    if (!replaced) {
-      console.log("No code block to replace.");
-    }
-  } catch (error) {
-    console.error("An error occurred while replacing code block content:", error);
-  }
-};
-
 export const toggleCodeBlock = (editor: Editor, range?: Range) => {
   try {
+    // if it's a code block, replace it with the code with paragraphs
     if (editor.isActive("codeBlock")) {
-      replaceCodeBlockWithContent(editor);
+      replaceCodeWithText(editor);
       return;
     }
 
@@ -124,11 +67,16 @@ export const toggleCodeBlock = (editor: Editor, range?: Range) => {
     const text = editor.state.doc.textBetween(from, to, "\n");
     const isMultiline = text.includes("\n");
 
+    // if the selection is not a range i.e. empty, then simply convert it into a code block
     if (editor.state.selection.empty) {
       editor.chain().focus().toggleCodeBlock().run();
     } else if (isMultiline) {
+      // if the selection is multiline, then also replace the text content with
+      // a code block
       editor.chain().focus().deleteRange({ from, to }).insertContentAt(from, `\`\`\`\n${text}\n\`\`\``).run();
     } else {
+      // if the selection is single line, then simply convert it into inline
+      // code
       editor.chain().focus().toggleCode().run();
     }
   } catch (error) {
@@ -194,7 +142,7 @@ export const insertImageCommand = (
   if (range) editor.chain().focus().deleteRange(range).run();
   const input = document.createElement("input");
   input.type = "file";
-  input.accept = "image/*";
+  input.accept = ".jpeg, .jpg, .png, .webp, .svg";
   input.onchange = async () => {
     if (input.files?.length) {
       const file = input.files[0];

packages/editor/core/src/styles/editor.css

@@ -110,6 +110,11 @@ ul[data-type="taskList"] li > label input[type="checkbox"]:checked:hover {
   }
 }
 
+/* the p tag just after the ul tag */
+ul[data-type="taskList"] + p {
+  margin-top: 0.4rem !important;
+}
+
 ul[data-type="taskList"] li > label input[type="checkbox"] {
   position: relative;
   -webkit-appearance: none;
@@ -152,6 +157,10 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   }
 }
 
+ul[data-type="taskList"] li > div > p {
+  margin-top: 10px;
+}
+
 ul[data-type="taskList"] li[data-checked="true"] > div > p {
   color: rgb(var(--color-text-400));
   text-decoration: line-through;

packages/editor/core/src/types/editor-ref-api.ts

@@ -15,4 +15,5 @@ export interface EditorRefApi extends EditorReadOnlyRefApi {
   isMenuItemActive: (itemName: EditorMenuItemNames) => boolean;
   onStateChange: (callback: () => void) => () => void;
   setFocusAtPosition: (position: number) => void;
+  isEditorReadyToDiscard: () => boolean;
 }

packages/editor/core/src/ui/extensions/code-inline/index.tsx

@@ -33,7 +33,7 @@ export const CustomCodeInlineExtension = Mark.create<CodeOptions>({
     return {
       HTMLAttributes: {
         class:
-          "rounded bg-custom-background-80 px-1 py-[2px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200 text-sm",
+          "rounded bg-custom-background-80 px-1 py-[2px] font-mono font-medium text-orange-500 border-[0.5px] border-custom-border-200",
         spellcheck: "false",
       },
     };

packages/editor/core/src/ui/extensions/code/utils/replace-code-block-with-text.ts

@@ -0,0 +1,124 @@
+import { Editor, findParentNode } from "@tiptap/core";
+
+type ReplaceCodeBlockParams = {
+  editor: Editor;
+  from: number;
+  to: number;
+  textContent: string;
+  cursorPosInsideCodeblock: number;
+};
+
+export function replaceCodeWithText(editor: Editor): void {
+  try {
+    const { from, to } = editor.state.selection;
+    const cursorPosInsideCodeblock = from;
+    let replaced = false;
+
+    editor.state.doc.nodesBetween(from, to, (node, pos) => {
+      if (node.type === editor.state.schema.nodes.codeBlock) {
+        const startPos = pos;
+        const endPos = pos + node.nodeSize;
+        const textContent = node.textContent;
+
+        if (textContent.length === 0) {
+          editor.chain().focus().toggleCodeBlock().run();
+        } else {
+          transformCodeBlockToParagraphs({
+            editor,
+            from: startPos,
+            to: endPos,
+            textContent,
+            cursorPosInsideCodeblock,
+          });
+        }
+
+        replaced = true;
+        return false;
+      }
+    });
+
+    if (!replaced) {
+      console.log("No code block to replace.");
+    }
+  } catch (error) {
+    console.error("An error occurred while replacing code block content:", error);
+  }
+}
+
+function transformCodeBlockToParagraphs({
+  editor,
+  from,
+  to,
+  textContent,
+  cursorPosInsideCodeblock,
+}: ReplaceCodeBlockParams): void {
+  const { schema } = editor.state;
+  const { paragraph } = schema.nodes;
+  const docSize = editor.state.doc.content.size;
+
+  if (from < 0 || to > docSize || from > to) {
+    console.error("Invalid range for replacement: ", from, to, "in a document of size", docSize);
+    return;
+  }
+
+  // Split the textContent by new lines to handle each line as a separate paragraph for Windows (\r\n) and Unix (\n)
+  const lines = textContent.split(/\r?\n/);
+  const tr = editor.state.tr;
+  let insertPos = from;
+
+  // Remove the code block first
+  tr.delete(from, to);
+
+  // For each line, create a paragraph node and insert it
+  lines.forEach((line) => {
+    // if the line is empty, create a paragraph node with no content
+    const paragraphNode = line.length === 0 ? paragraph.create({}) : paragraph.create({}, schema.text(line));
+    tr.insert(insertPos, paragraphNode);
+    insertPos += paragraphNode.nodeSize;
+  });
+
+  // Now persist the focus to the converted paragraph
+  const parentNodeOffset = findParentNode((node) => node.type === schema.nodes.codeBlock)(editor.state.selection)?.pos;
+
+  if (parentNodeOffset === undefined) throw new Error("Invalid code block offset");
+
+  const lineNumber = getLineNumber(textContent, cursorPosInsideCodeblock, parentNodeOffset);
+  const cursorPosOutsideCodeblock = cursorPosInsideCodeblock + (lineNumber - 1);
+
+  editor.view.dispatch(tr);
+  editor.chain().focus(cursorPosOutsideCodeblock).run();
+}
+
+/**
+ * Calculates the line number where the cursor is located inside the code block.
+ * Assumes the indexing of the content inside the code block is like ProseMirror's indexing.
+ *
+ * @param {string} textContent - The content of the code block.
+ * @param {number} cursorPosition - The absolute cursor position in the document.
+ * @param {number} codeBlockNodePos - The starting position of the code block node in the document.
+ * @returns {number} The 1-based line number where the cursor is located.
+ */
+function getLineNumber(textContent: string, cursorPosition: number, codeBlockNodePos: number): number {
+  // Split the text content into lines, handling both Unix and Windows newlines
+  const lines = textContent.split(/\r?\n/);
+  const cursorPosInsideCodeblockRelative = cursorPosition - codeBlockNodePos;
+
+  let startPosition = 0;
+  let lineNumber = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    // Calculate the end position of the current line
+    const endPosition = startPosition + lines[i].length + 1; // +1 for the newline character
+
+    // Check if the cursor position is within the current line
+    if (cursorPosInsideCodeblockRelative >= startPosition && cursorPosInsideCodeblockRelative <= endPosition) {
+      lineNumber = i + 1; // Line numbers are 1-based
+      break;
+    }
+
+    // Update the start position for the next line
+    startPosition = endPosition;
+  }
+
+  return lineNumber;
+}

packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers.ts

@@ -72,7 +72,7 @@ const getPrevListDepth = (typeOrName: string, state: EditorState) => {
   // Traverse up the document structure from the adjusted position
   for (let d = resolvedPos.depth; d > 0; d--) {
     const node = resolvedPos.node(d);
-    if (node.type.name === "bulletList" || node.type.name === "orderedList") {
+    if (node.type.name === "bulletList" || node.type.name === "orderedList" || node.type.name === "taskList") {
       // Increment depth for each list ancestor found
       depth++;
     }
@@ -146,6 +146,8 @@ export const handleBackspace = (editor: Editor, name: string, parentListTypes: s
   if (!isAtStartOfNode(editor.state)) {
     return false;
   }
+
+  // is the paragraph node inside of the current list item (maybe with a hard break)
   const isParaSibling = isCurrentParagraphASibling(editor.state);
   const isCurrentListItemSublist = prevListIsHigher(name, editor.state);
   const listItemPos = findListItemPos(name, editor.state);
@@ -306,7 +308,10 @@ const isCurrentParagraphASibling = (state: EditorState): boolean => {
   const currentParagraphNode = $from.parent; // Get the current node where the selection is.
 
   // Ensure we're in a paragraph and the parent is a list item.
-  if (currentParagraphNode.type.name === "paragraph" && listItemNode.type.name === "listItem") {
+  if (
+    currentParagraphNode.type.name === "paragraph" &&
+    (listItemNode.type.name === "listItem" || listItemNode.type.name === "taskItem")
+  ) {
     let paragraphNodesCount = 0;
     listItemNode.forEach((child) => {
       if (child.type.name === "paragraph") {
@@ -327,16 +332,19 @@ export function isCursorInSubList(editor: Editor) {
 
   // Check if the current node is a list item
   const listItem = editor.schema.nodes.listItem;
+  const taskItem = editor.schema.nodes.taskItem;
 
   // Traverse up the document tree from the current position
   for (let depth = $from.depth; depth > 0; depth--) {
     const node = $from.node(depth);
-    if (node.type === listItem) {
+    if (node.type === listItem || node.type === taskItem) {
       // If the parent of the list item is also a list, it's a sub-list
       const parent = $from.node(depth - 1);
       if (
         parent &&
-        (parent.type === editor.schema.nodes.bulletList || parent.type === editor.schema.nodes.orderedList)
+        (parent.type === editor.schema.nodes.bulletList ||
+          parent.type === editor.schema.nodes.orderedList ||
+          parent.type === editor.schema.nodes.taskList)
       ) {
         return true;
       }

packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts

@@ -69,7 +69,7 @@ export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
 
             return handled;
           } catch (e) {
-            console.log("error in handling Backspac:", e);
+            console.log("Error in handling Delete:", e);
             return false;
           }
         },
@@ -104,7 +104,7 @@ export const ListKeymap = ({ tabIndex }: { tabIndex?: number }) =>
 
             return handled;
           } catch (e) {
-            console.log("error in handling Backspac:", e);
+            console.log("Error in handling Backspace:", e);
             return false;
           }
         },

packages/editor/core/src/ui/extensions/drop.tsx

@@ -1,7 +1,7 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "prosemirror-state";
 import { UploadImage } from "src/types/upload-image";
-import { startImageUpload } from "../plugins/upload-image";
+import { startImageUpload } from "src/ui/plugins/image/image-upload-handler";
 
 export const DropHandlerExtension = (uploadFile: UploadImage) =>
   Extension.create({

packages/editor/core/src/ui/extensions/image/index.tsx

@@ -1,25 +1,16 @@
-import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { UploadImagesPlugin } from "src/ui/plugins/upload-image";
+import { UploadImagesPlugin } from "src/ui/plugins/image/upload-image";
 import ImageExt from "@tiptap/extension-image";
-import { onNodeDeleted, onNodeRestored } from "src/ui/plugins/delete-image";
+import { TrackImageDeletionPlugin } from "src/ui/plugins/image/delete-image";
 import { DeleteImage } from "src/types/delete-image";
 import { RestoreImage } from "src/types/restore-image";
 import { insertLineBelowImageAction } from "./utilities/insert-line-below-image";
 import { insertLineAboveImageAction } from "./utilities/insert-line-above-image";
+import { TrackImageRestorationPlugin } from "src/ui/plugins/image/restore-image";
+import { IMAGE_NODE_TYPE } from "src/ui/plugins/image/constants";
+import { ImageExtensionStorage } from "src/ui/plugins/image/types/image-node";
 
-interface ImageNode extends ProseMirrorNode {
-  attrs: {
-    src: string;
-    id: string;
-  };
-}
-
-const deleteKey = new PluginKey("delete-image");
-const IMAGE_NODE_TYPE = "image";
-
-export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreImage, cancelUploadImage?: () => void) =>
-  ImageExt.extend({
+export const ImageExtension = (deleteImage: DeleteImage, restoreImage: RestoreImage, cancelUploadImage?: () => void) =>
+  ImageExt.extend<any, ImageExtensionStorage>({
     addKeyboardShortcuts() {
       return {
         ArrowDown: insertLineBelowImageAction,
@@ -29,77 +20,8 @@ export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreIma
     addProseMirrorPlugins() {
       return [
         UploadImagesPlugin(this.editor, cancelUploadImage),
-        new Plugin({
-          key: deleteKey,
-          appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-            const newImageSources = new Set<string>();
-            newState.doc.descendants((node) => {
-              if (node.type.name === IMAGE_NODE_TYPE) {
-                newImageSources.add(node.attrs.src);
-              }
-            });
-
-            transactions.forEach((transaction) => {
-              // transaction could be a selection
-              if (!transaction.docChanged) return;
-
-              const removedImages: ImageNode[] = [];
-
-              // iterate through all the nodes in the old state
-              oldState.doc.descendants((oldNode, oldPos) => {
-                // if the node is not an image, then return as no point in checking
-                if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
-
-                // Check if the node has been deleted or replaced
-                if (!newImageSources.has(oldNode.attrs.src)) {
-                  removedImages.push(oldNode as ImageNode);
-                }
-              });
-
-              removedImages.forEach(async (node) => {
-                const src = node.attrs.src;
-                this.storage.images.set(src, true);
-                await onNodeDeleted(src, deleteImage);
-              });
-            });
-
-            return null;
-          },
-        }),
-        new Plugin({
-          key: new PluginKey("imageRestoration"),
-          appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-            const oldImageSources = new Set<string>();
-            oldState.doc.descendants((node) => {
-              if (node.type.name === IMAGE_NODE_TYPE) {
-                oldImageSources.add(node.attrs.src);
-              }
-            });
-
-            transactions.forEach((transaction) => {
-              if (!transaction.docChanged) return;
-
-              const addedImages: ImageNode[] = [];
-
-              newState.doc.descendants((node, pos) => {
-                if (node.type.name !== IMAGE_NODE_TYPE) return;
-                if (pos < 0 || pos > newState.doc.content.size) return;
-                if (oldImageSources.has(node.attrs.src)) return;
-                addedImages.push(node as ImageNode);
-              });
-
-              addedImages.forEach(async (image) => {
-                const wasDeleted = this.storage.images.get(image.attrs.src);
-                if (wasDeleted === undefined) {
-                  this.storage.images.set(image.attrs.src, false);
-                } else if (wasDeleted === true) {
-                  await onNodeRestored(image.attrs.src, restoreFile);
-                }
-              });
-            });
-            return null;
-          },
-        }),
+        TrackImageDeletionPlugin(this.editor, deleteImage),
+        TrackImageRestorationPlugin(this.editor, restoreImage),
       ];
     },
 
@@ -113,7 +35,7 @@ export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreIma
       imageSources.forEach(async (src) => {
         try {
           const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-          await restoreFile(assetUrlWithWorkspaceId);
+          await restoreImage(assetUrlWithWorkspaceId);
         } catch (error) {
           console.error("Error restoring image: ", error);
         }
@@ -123,7 +45,7 @@ export const ImageExtension = (deleteImage: DeleteImage, restoreFile: RestoreIma
     // storage to keep track of image states Map<src, isDeleted>
     addStorage() {
       return {
-        images: new Map<string, boolean>(),
+        deletedImageSet: new Map<string, boolean>(),
         uploadInProgress: false,
       };
     },

packages/editor/core/src/ui/extensions/index.tsx

@@ -141,8 +141,11 @@ export const CoreEditorExtensions = ({
     placeholder: ({ editor, node }) => {
       if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 
+      if (editor.storage.image.uploadInProgress) return "";
+
       const shouldHidePlaceholder =
         editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+
       if (shouldHidePlaceholder) return "";
 
       if (placeholder) {

packages/editor/core/src/ui/extensions/keymap.tsx

@@ -15,9 +15,7 @@ declare module "@tiptap/core" {
   }
 }
 
-function autoJoin(tr: Transaction, newTr: Transaction, nodeType: NodeType) {
-  if (!tr.isGeneric) return false;
-
+function autoJoin(tr: Transaction, newTr: Transaction, nodeTypes: NodeType[]) {
   // Find all ranges where we might want to join.
   const ranges: Array<number> = [];
   for (let i = 0; i < tr.mapping.maps.length; i++) {
@@ -28,7 +26,7 @@ function autoJoin(tr: Transaction, newTr: Transaction, nodeType: NodeType) {
 
   // Figure out which joinable points exist inside those ranges,
   // by checking all node boundaries in their parent nodes.
-  const joinable = [];
+  const joinable: number[] = [];
   for (let i = 0; i < ranges.length; i += 2) {
     const from = ranges[i],
       to = ranges[i + 1];
@@ -40,7 +38,7 @@ function autoJoin(tr: Transaction, newTr: Transaction, nodeType: NodeType) {
       if (!after) break;
       if (index && joinable.indexOf(pos) == -1) {
         const before = parent.child(index - 1);
-        if (before.type == after.type && before.type === nodeType) joinable.push(pos);
+        if (before.type == after.type && nodeTypes.includes(before.type)) joinable.push(pos);
       }
       pos += after.nodeSize;
     }
@@ -88,25 +86,15 @@ export const CustomKeymap = Extension.create({
           // Create a new transaction.
           const newTr = newState.tr;
 
-          let joined = false;
-          for (const transaction of transactions) {
-            const anotherJoin = autoJoin(transaction, newTr, newState.schema.nodes["orderedList"]);
-            joined = anotherJoin || joined;
-          }
-          if (joined) {
-            return newTr;
-          }
-        },
-      }),
-      new Plugin({
-        key: new PluginKey("unordered-list-merging"),
-        appendTransaction(transactions, oldState, newState) {
-          // Create a new transaction.
-          const newTr = newState.tr;
+          const joinableNodes = [
+            newState.schema.nodes["orderedList"],
+            newState.schema.nodes["taskList"],
+            newState.schema.nodes["bulletList"],
+          ];
 
           let joined = false;
           for (const transaction of transactions) {
-            const anotherJoin = autoJoin(transaction, newTr, newState.schema.nodes["bulletList"]);
+            const anotherJoin = autoJoin(transaction, newTr, joinableNodes);
             joined = anotherJoin || joined;
           }
           if (joined) {

packages/editor/core/src/ui/menus/menu-items/index.ts

@@ -239,8 +239,5 @@ export function getEditorMenuItems(editor: Editor | null, uploadFile: UploadImag
   ];
 }
 
-export type EditorMenuItemNames = ReturnType<typeof getEditorMenuItems> extends (infer U)[]
-  ? U extends { key: infer N }
-    ? N
-    : never
-  : never;
+export type EditorMenuItemNames =
+  ReturnType<typeof getEditorMenuItems> extends (infer U)[] ? (U extends { key: infer N } ? N : never) : never;

packages/editor/core/src/ui/plugins/delete-image.tsx

@@ -1,73 +0,0 @@
-import { EditorState, Plugin, PluginKey, Transaction } from "@tiptap/pm/state";
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { DeleteImage } from "src/types/delete-image";
-import { RestoreImage } from "src/types/restore-image";
-
-const deleteKey = new PluginKey("delete-image");
-const IMAGE_NODE_TYPE = "image";
-
-interface ImageNode extends ProseMirrorNode {
-  attrs: {
-    src: string;
-    id: string;
-  };
-}
-
-export const TrackImageDeletionPlugin = (deleteImage: DeleteImage): Plugin =>
-  new Plugin({
-    key: deleteKey,
-    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
-      const newImageSources = new Set<string>();
-      newState.doc.descendants((node) => {
-        if (node.type.name === IMAGE_NODE_TYPE) {
-          newImageSources.add(node.attrs.src);
-        }
-      });
-
-      transactions.forEach((transaction) => {
-        if (!transaction.docChanged) return;
-
-        const removedImages: ImageNode[] = [];
-
-        oldState.doc.descendants((oldNode, oldPos) => {
-          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
-          if (oldPos < 0 || oldPos > newState.doc.content.size) return;
-          if (!newState.doc.resolve(oldPos).parent) return;
-
-          const newNode = newState.doc.nodeAt(oldPos);
-
-          // Check if the node has been deleted or replaced
-          if (!newNode || newNode.type.name !== IMAGE_NODE_TYPE) {
-            if (!newImageSources.has(oldNode.attrs.src)) {
-              removedImages.push(oldNode as ImageNode);
-            }
-          }
-        });
-
-        removedImages.forEach(async (node) => {
-          const src = node.attrs.src;
-          await onNodeDeleted(src, deleteImage);
-        });
-      });
-
-      return null;
-    },
-  });
-
-export async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
-  try {
-    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-    await deleteImage(assetUrlWithWorkspaceId);
-  } catch (error) {
-    console.error("Error deleting image: ", error);
-  }
-}
-
-export async function onNodeRestored(src: string, restoreImage: RestoreImage): Promise<void> {
-  try {
-    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
-    await restoreImage(assetUrlWithWorkspaceId);
-  } catch (error) {
-    console.error("Error restoring image: ", error);
-  }
-}

packages/editor/core/src/ui/plugins/image/constants.ts

@@ -0,0 +1,7 @@
+import { PluginKey } from "@tiptap/pm/state";
+
+export const uploadKey = new PluginKey("upload-image");
+export const deleteKey = new PluginKey("delete-image");
+export const restoreKey = new PluginKey("restore-image");
+
+export const IMAGE_NODE_TYPE = "image";

packages/editor/core/src/ui/plugins/image/delete-image.ts

@@ -0,0 +1,54 @@
+import { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
+import { DeleteImage } from "src/types/delete-image";
+import { Editor } from "@tiptap/core";
+
+import { type ImageNode } from "src/ui/plugins/image/types/image-node";
+import { deleteKey, IMAGE_NODE_TYPE } from "src/ui/plugins/image/constants";
+
+export const TrackImageDeletionPlugin = (editor: Editor, deleteImage: DeleteImage): Plugin =>
+  new Plugin({
+    key: deleteKey,
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+      const newImageSources = new Set<string>();
+      newState.doc.descendants((node) => {
+        if (node.type.name === IMAGE_NODE_TYPE) {
+          newImageSources.add(node.attrs.src);
+        }
+      });
+
+      transactions.forEach((transaction) => {
+        // transaction could be a selection
+        if (!transaction.docChanged) return;
+
+        const removedImages: ImageNode[] = [];
+
+        // iterate through all the nodes in the old state
+        oldState.doc.descendants((oldNode) => {
+          // if the node is not an image, then return as no point in checking
+          if (oldNode.type.name !== IMAGE_NODE_TYPE) return;
+
+          // Check if the node has been deleted or replaced
+          if (!newImageSources.has(oldNode.attrs.src)) {
+            removedImages.push(oldNode as ImageNode);
+          }
+        });
+
+        removedImages.forEach(async (node) => {
+          const src = node.attrs.src;
+          editor.storage.image.deletedImageSet.set(src, true);
+          await onNodeDeleted(src, deleteImage);
+        });
+      });
+
+      return null;
+    },
+  });
+
+async function onNodeDeleted(src: string, deleteImage: DeleteImage): Promise<void> {
+  try {
+    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+    await deleteImage(assetUrlWithWorkspaceId);
+  } catch (error) {
+    console.error("Error deleting image: ", error);
+  }
+}

packages/editor/core/src/ui/plugins/image/image-upload-handler.ts

@@ -0,0 +1,141 @@
+import { type UploadImage } from "src/types/upload-image";
+
+// utilities
+import { v4 as uuidv4 } from "uuid";
+
+// types
+import { isFileValid } from "src/ui/plugins/image/utils/validate-file";
+import { Editor } from "@tiptap/core";
+import { EditorView } from "@tiptap/pm/view";
+import { uploadKey } from "./constants";
+import { removePlaceholder, findPlaceholder } from "./utils/placeholder";
+
+export async function startImageUpload(
+  editor: Editor,
+  file: File,
+  view: EditorView,
+  pos: number | null,
+  uploadFile: UploadImage
+) {
+  editor.storage.image.uploadInProgress = true;
+
+  if (!isFileValid(file)) {
+    editor.storage.image.uploadInProgress = false;
+    return;
+  }
+
+  const id = uuidv4();
+
+  const tr = view.state.tr;
+  if (!tr.selection.empty) tr.deleteSelection();
+
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    tr.setMeta(uploadKey, {
+      add: {
+        id,
+        pos,
+        src: reader.result,
+      },
+    });
+    view.dispatch(tr);
+  };
+
+  // Handle FileReader errors
+  reader.onerror = (error) => {
+    console.error("FileReader error: ", error);
+    removePlaceholder(editor, view, id);
+    return;
+  };
+
+  try {
+    const fileNameTrimmed = trimFileName(file.name);
+    const fileWithTrimmedName = new File([file], fileNameTrimmed, { type: file.type });
+
+    const resolvedPos = view.state.doc.resolve(pos ?? 0);
+    const nodeBefore = resolvedPos.nodeBefore;
+
+    // if the image is at the start of the line i.e. when nodeBefore is null
+    if (nodeBefore === null) {
+      if (pos) {
+        // so that the image is not inserted at the next line, else incase the
+        // image is inserted at any line where there's some content, the
+        // position is kept as it is to be inserted at the next line
+        pos -= 1;
+      }
+    }
+
+    view.focus();
+
+    const src = await uploadAndValidateImage(fileWithTrimmedName, uploadFile);
+
+    if (src == null) {
+      throw new Error("Resolved image URL is undefined.");
+    }
+
+    const { schema } = view.state;
+    pos = findPlaceholder(view.state, id);
+
+    if (pos == null) {
+      editor.storage.image.uploadInProgress = false;
+      return;
+    }
+    const imageSrc = typeof src === "object" ? reader.result : src;
+
+    const node = schema.nodes.image.create({ src: imageSrc });
+
+    if (pos < 0 || pos > view.state.doc.content.size) {
+      throw new Error("Invalid position to insert the image node.");
+    }
+
+    // insert the image node at the position of the placeholder and remove the placeholder
+    const transaction = view.state.tr.insert(pos, node).setMeta(uploadKey, { remove: { id } });
+
+    view.dispatch(transaction);
+
+    editor.storage.image.uploadInProgress = false;
+  } catch (error) {
+    console.error("Error in uploading and inserting image: ", error);
+    removePlaceholder(editor, view, id);
+  }
+}
+
+async function uploadAndValidateImage(file: File, uploadFile: UploadImage): Promise<string | undefined> {
+  try {
+    const imageUrl = await uploadFile(file);
+
+    if (imageUrl == null) {
+      throw new Error("Image URL is undefined.");
+    }
+
+    await new Promise<void>((resolve, reject) => {
+      const image = new Image();
+      image.src = imageUrl;
+      image.onload = () => {
+        resolve();
+      };
+      image.onerror = (error) => {
+        console.error("Error in loading image: ", error);
+        reject(error);
+      };
+    });
+
+    return imageUrl;
+  } catch (error) {
+    console.error("Error in uploading image: ", error);
+    // throw error to remove the placeholder
+    throw error;
+  }
+}
+
+function trimFileName(fileName: string, maxLength = 100) {
+  if (fileName.length > maxLength) {
+    const extension = fileName.split(".").pop();
+    const nameWithoutExtension = fileName.slice(0, -(extension?.length ?? 0 + 1));
+    const allowedNameLength = maxLength - (extension?.length ?? 0) - 1; // -1 for the dot
+    return `${nameWithoutExtension.slice(0, allowedNameLength)}.${extension}`;
+  }
+
+  return fileName;
+}

packages/editor/core/src/ui/plugins/image/restore-image.ts

@@ -0,0 +1,57 @@
+import { Editor } from "@tiptap/core";
+import { EditorState, Plugin, Transaction } from "@tiptap/pm/state";
+import { RestoreImage } from "src/types/restore-image";
+
+import { restoreKey, IMAGE_NODE_TYPE } from "./constants";
+import { type ImageNode } from "./types/image-node";
+
+export const TrackImageRestorationPlugin = (editor: Editor, restoreImage: RestoreImage): Plugin =>
+  new Plugin({
+    key: restoreKey,
+    appendTransaction: (transactions: readonly Transaction[], oldState: EditorState, newState: EditorState) => {
+      const oldImageSources = new Set<string>();
+      oldState.doc.descendants((node) => {
+        if (node.type.name === IMAGE_NODE_TYPE) {
+          oldImageSources.add(node.attrs.src);
+        }
+      });
+
+      transactions.forEach((transaction) => {
+        if (!transaction.docChanged) return;
+
+        const addedImages: ImageNode[] = [];
+
+        newState.doc.descendants((node, pos) => {
+          if (node.type.name !== IMAGE_NODE_TYPE) return;
+          if (pos < 0 || pos > newState.doc.content.size) return;
+          if (oldImageSources.has(node.attrs.src)) return;
+          addedImages.push(node as ImageNode);
+        });
+
+        addedImages.forEach(async (image) => {
+          const wasDeleted = editor.storage.image.deletedImageSet.get(image.attrs.src);
+          if (wasDeleted === undefined) {
+            editor.storage.image.deletedImageSet.set(image.attrs.src, false);
+          } else if (wasDeleted === true) {
+            try {
+              await onNodeRestored(image.attrs.src, restoreImage);
+              editor.storage.image.deletedImageSet.set(image.attrs.src, false);
+            } catch (error) {
+              console.error("Error restoring image: ", error);
+            }
+          }
+        });
+      });
+      return null;
+    },
+  });
+
+async function onNodeRestored(src: string, restoreImage: RestoreImage): Promise<void> {
+  try {
+    const assetUrlWithWorkspaceId = new URL(src).pathname.substring(1);
+    await restoreImage(assetUrlWithWorkspaceId);
+  } catch (error) {
+    console.error("Error restoring image: ", error);
+    throw error;
+  }
+}

packages/editor/core/src/ui/plugins/image/types/image-node.ts

@@ -0,0 +1,13 @@
+import { Node as ProseMirrorNode } from "@tiptap/pm/model";
+
+export interface ImageNode extends ProseMirrorNode {
+  attrs: {
+    src: string;
+    id: string;
+  };
+}
+
+export type ImageExtensionStorage = {
+  deletedImageSet: Map<string, boolean>;
+  uploadInProgress: boolean;
+};

packages/editor/core/src/ui/plugins/image/upload-image.ts

@@ -0,0 +1,91 @@
+import { Editor } from "@tiptap/core";
+import { Plugin } from "@tiptap/pm/state";
+import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
+
+// utils
+import { removePlaceholder } from "src/ui/plugins/image/utils/placeholder";
+
+// constants
+import { uploadKey } from "src/ui/plugins/image/constants";
+
+export const UploadImagesPlugin = (editor: Editor, cancelUploadImage?: () => void) => {
+  let currentView: EditorView | null = null;
+
+  const createPlaceholder = (src: string): HTMLElement => {
+    const placeholder = document.createElement("div");
+    placeholder.setAttribute("class", "img-placeholder");
+    const image = document.createElement("img");
+    image.setAttribute("class", "opacity-60 rounded-lg border border-custom-border-300");
+    image.src = src;
+    placeholder.appendChild(image);
+
+    return placeholder;
+  };
+
+  const createCancelButton = (id: string): HTMLButtonElement => {
+    const cancelButton = document.createElement("button");
+    cancelButton.type = "button";
+    cancelButton.style.position = "absolute";
+    cancelButton.style.right = "3px";
+    cancelButton.style.top = "3px";
+    cancelButton.setAttribute("class", "opacity-90 rounded-lg");
+
+    cancelButton.onclick = () => {
+      if (currentView) {
+        cancelUploadImage?.();
+        removePlaceholder(editor, currentView, id);
+      }
+    };
+
+    // Create an SVG element from the SVG string
+    const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
+    const parser = new DOMParser();
+    const svgElement = parser.parseFromString(svgString, "image/svg+xml").documentElement;
+
+    cancelButton.appendChild(svgElement);
+
+    return cancelButton;
+  };
+
+  return new Plugin({
+    key: uploadKey,
+    view(editorView) {
+      currentView = editorView;
+      return {
+        destroy() {
+          currentView = null;
+        },
+      };
+    },
+    state: {
+      init() {
+        return DecorationSet.empty;
+      },
+      apply(tr, set) {
+        set = set.map(tr.mapping, tr.doc);
+        const action = tr.getMeta(uploadKey);
+        if (action && action.add) {
+          const { id, pos, src } = action.add;
+
+          const placeholder = createPlaceholder(src);
+          const cancelButton = createCancelButton(id);
+
+          placeholder.appendChild(cancelButton);
+
+          const deco = Decoration.widget(pos, placeholder, {
+            id,
+          });
+          set = set.add(tr.doc, [deco]);
+        } else if (action && action.remove) {
+          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
+        }
+        return set;
+      },
+    },
+    props: {
+      decorations(state) {
+        return this.getState(state);
+      },
+    },
+  });
+};

packages/editor/core/src/ui/plugins/image/utils/placeholder.ts

@@ -0,0 +1,16 @@
+import { Editor } from "@tiptap/core";
+import { EditorState } from "@tiptap/pm/state";
+import { DecorationSet, EditorView } from "@tiptap/pm/view";
+import { uploadKey } from "src/ui/plugins/image/constants";
+
+export function findPlaceholder(state: EditorState, id: string): number | null {
+  const decos = uploadKey.getState(state) as DecorationSet;
+  const found = decos.find(undefined, undefined, (spec: { id: string }) => spec.id === id);
+  return found.length ? found[0].from : null;
+}
+
+export function removePlaceholder(editor: Editor, view: EditorView, id: string) {
+  const removePlaceholderTr = view.state.tr.setMeta(uploadKey, { remove: { id } });
+  view.dispatch(removePlaceholderTr);
+  editor.storage.image.uploadInProgress = false;
+}

packages/editor/core/src/ui/plugins/image/utils/validate-file.ts

@@ -0,0 +1,19 @@
+export function isFileValid(file: File): boolean {
+  if (!file) {
+    alert("No file selected. Please select a file to upload.");
+    return false;
+  }
+
+  const allowedTypes = ["image/jpeg", "image/jpg", "image/png", "image/webp", "image/svg+xml"];
+  if (!allowedTypes.includes(file.type)) {
+    alert("Invalid file type. Please select a JPEG, JPG, PNG, WEBP, or SVG image file.");
+    return false;
+  }
+
+  if (file.size > 5 * 1024 * 1024) {
+    alert("File size too large. Please select a file smaller than 5MB.");
+    return false;
+  }
+
+  return true;
+}

packages/editor/core/src/ui/plugins/upload-image.tsx

@@ -1,189 +0,0 @@
-import { Editor } from "@tiptap/core";
-import { EditorState, Plugin, PluginKey } from "@tiptap/pm/state";
-import { Decoration, DecorationSet, EditorView } from "@tiptap/pm/view";
-import { UploadImage } from "src/types/upload-image";
-
-const uploadKey = new PluginKey("upload-image");
-
-export const UploadImagesPlugin = (editor: Editor, cancelUploadImage?: () => void) => {
-  let currentView: EditorView | null = null;
-  return new Plugin({
-    key: uploadKey,
-    view(editorView) {
-      currentView = editorView;
-      return {
-        destroy() {
-          currentView = null;
-        },
-      };
-    },
-    state: {
-      init() {
-        return DecorationSet.empty;
-      },
-      apply(tr, set) {
-        set = set.map(tr.mapping, tr.doc);
-        // See if the transaction adds or removes any placeholders
-        const action = tr.getMeta(uploadKey);
-        if (action && action.add) {
-          const { id, pos, src } = action.add;
-
-          const placeholder = document.createElement("div");
-          placeholder.setAttribute("class", "img-placeholder");
-          const image = document.createElement("img");
-          image.setAttribute("class", "opacity-60 rounded-lg border border-custom-border-300");
-          image.src = src;
-          placeholder.appendChild(image);
-
-          // Create cancel button
-          const cancelButton = document.createElement("button");
-          cancelButton.type = "button";
-          cancelButton.style.position = "absolute";
-          cancelButton.style.right = "3px";
-          cancelButton.style.top = "3px";
-          cancelButton.setAttribute("class", "opacity-90 rounded-lg");
-
-          cancelButton.onclick = () => {
-            if (currentView) {
-              cancelUploadImage?.();
-              removePlaceholder(editor, currentView, id);
-            }
-          };
-
-          // Create an SVG element from the SVG string
-          const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-circle"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>`;
-          const parser = new DOMParser();
-          const svgElement = parser.parseFromString(svgString, "image/svg+xml").documentElement;
-
-          cancelButton.appendChild(svgElement);
-          placeholder.appendChild(cancelButton);
-          const deco = Decoration.widget(pos, placeholder, {
-            id,
-          });
-          set = set.add(tr.doc, [deco]);
-        } else if (action && action.remove) {
-          set = set.remove(set.find(undefined, undefined, (spec) => spec.id == action.remove.id));
-        }
-        return set;
-      },
-    },
-    props: {
-      decorations(state) {
-        return this.getState(state);
-      },
-    },
-  });
-};
-
-function findPlaceholder(state: EditorState, id: {}) {
-  const decos = uploadKey.getState(state);
-  const found = decos.find(undefined, undefined, (spec: { id: number | undefined }) => spec.id == id);
-  return found.length ? found[0].from : null;
-}
-
-const removePlaceholder = (editor: Editor, view: EditorView, id: {}) => {
-  const removePlaceholderTr = view.state.tr.setMeta(uploadKey, {
-    remove: { id },
-  });
-  view.dispatch(removePlaceholderTr);
-  editor.storage.image.uploadInProgress = false;
-};
-
-export async function startImageUpload(
-  editor: Editor,
-  file: File,
-  view: EditorView,
-  pos: number,
-  uploadFile: UploadImage
-) {
-  editor.storage.image.uploadInProgress = true;
-
-  if (!file) {
-    alert("No file selected. Please select a file to upload.");
-    editor.storage.image.uploadInProgress = false;
-    return;
-  }
-
-  if (!file.type.includes("image/")) {
-    alert("Invalid file type. Please select an image file.");
-    editor.storage.image.uploadInProgress = false;
-    return;
-  }
-
-  if (file.size > 5 * 1024 * 1024) {
-    alert("File size too large. Please select a file smaller than 5MB.");
-    editor.storage.image.uploadInProgress = false;
-    return;
-  }
-
-  const id = {};
-
-  const tr = view.state.tr;
-  if (!tr.selection.empty) tr.deleteSelection();
-
-  const reader = new FileReader();
-  reader.readAsDataURL(file);
-  reader.onload = () => {
-    tr.setMeta(uploadKey, {
-      add: {
-        id,
-        pos,
-        src: reader.result,
-      },
-    });
-    view.dispatch(tr);
-  };
-
-  // Handle FileReader errors
-  reader.onerror = (error) => {
-    console.error("FileReader error: ", error);
-    removePlaceholder(editor, view, id);
-    return;
-  };
-
-  // setIsSubmitting?.("submitting");
-
-  try {
-    const src = await UploadImageHandler(file, uploadFile);
-    const { schema } = view.state;
-    pos = findPlaceholder(view.state, id);
-
-    if (pos == null) {
-      editor.storage.image.uploadInProgress = false;
-      return;
-    }
-    const imageSrc = typeof src === "object" ? reader.result : src;
-
-    const node = schema.nodes.image.create({ src: imageSrc });
-    const transaction = view.state.tr.insert(pos - 1, node).setMeta(uploadKey, { remove: { id } });
-
-    view.dispatch(transaction);
-    if (view.hasFocus()) view.focus();
-    editor.storage.image.uploadInProgress = false;
-  } catch (error) {
-    removePlaceholder(editor, view, id);
-  }
-}
-
-const UploadImageHandler = (file: File, uploadFile: UploadImage): Promise<string> => {
-  try {
-    return new Promise(async (resolve, reject) => {
-      try {
-        const imageUrl = await uploadFile(file);
-
-        const image = new Image();
-        image.src = imageUrl;
-        image.onload = () => {
-          resolve(imageUrl);
-        };
-      } catch (error) {
-        if (error instanceof Error) {
-          console.log(error.message);
-        }
-        reject(error);
-      }
-    });
-  } catch (error) {
-    return Promise.reject(error);
-  }
-};

packages/editor/document-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/document-editor",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Package that powers Plane's Pages Editor",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

packages/editor/extensions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/editor-extensions",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Package that powers Plane's Editor with extensions",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/extensions/src/extensions/slash-commands.tsx

@@ -69,7 +69,6 @@ const Command = Extension.create<SlashCommandOptions>({
 
           return true;
         },
-        allowSpaces: true,
       },
     };
   },

packages/editor/lite-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/lite-text-editor",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Package that powers Plane's Comment Editor",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/rich-text-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/rich-text-editor",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Rich Text Editor that powers Plane",
   "private": true,
   "main": "./dist/index.mjs",

packages/editor/rich-text-editor/src/ui/extensions/index.tsx

@@ -17,5 +17,6 @@ export const RichTextEditorExtensions = ({
 }: TArguments) => [
   SlashCommand(uploadFile),
   dragDropEnabled === true && DragAndDrop(setHideDragHandle),
-  EnterKeyExtension(onEnterKeyPress),
+  // TODO; add the extension conditionally for forms that don't require it
+  // EnterKeyExtension(onEnterKeyPress),
 ];

packages/eslint-config-custom/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-custom",
   "private": true,
-  "version": "0.20.0",
+  "version": "0.21.0",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {},

packages/tailwind-config-custom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-config-custom",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "common tailwind configuration across monorepo",
   "main": "index.js",
   "private": true,

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsconfig",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": true,
   "files": [
     "base.json",

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plane/types",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "private": true,
   "main": "./src/index.d.ts"
 }

packages/types/src/common.d.ts

@@ -9,3 +9,15 @@ export type TPaginationInfo = {
   per_page?: number;
   total_results: number;
 };
+
+export type TLogoProps = {
+  in_use: "emoji" | "icon";
+  emoji?: {
+    value?: string;
+    url?: string;
+  };
+  icon?: {
+    name?: string;
+    color?: string;
+  };
+};

packages/types/src/current-user/accounts.d.ts

@@ -4,7 +4,7 @@ export type TCurrentUserAccount = {
   user: string | undefined;
 
   provider_account_id: string | undefined;
-  provider: "google" | "github" | string | undefined;
+  provider: "google" | "github" | "gitlab" | string | undefined;
   access_token: string | undefined;
   access_token_expired_at: Date | undefined;
   refresh_token: string | undefined;

packages/types/src/instance/auth.d.ts

@@ -3,7 +3,8 @@ export type TInstanceAuthenticationMethodKeys =
   | "ENABLE_MAGIC_LINK_LOGIN"
   | "ENABLE_EMAIL_PASSWORD"
   | "IS_GOOGLE_ENABLED"
-  | "IS_GITHUB_ENABLED";
+  | "IS_GITHUB_ENABLED"
+  | "IS_GITLAB_ENABLED";
 
 export type TInstanceGoogleAuthenticationConfigurationKeys =
   | "GOOGLE_CLIENT_ID"
@@ -13,9 +14,15 @@ export type TInstanceGithubAuthenticationConfigurationKeys =
   | "GITHUB_CLIENT_ID"
   | "GITHUB_CLIENT_SECRET";
 
+export type TInstanceGitlabAuthenticationConfigurationKeys =
+  | "GITLAB_HOST"
+  | "GITLAB_CLIENT_ID"
+  | "GITLAB_CLIENT_SECRET";
+
 type TInstanceAuthenticationConfigurationKeys =
   | TInstanceGoogleAuthenticationConfigurationKeys
-  | TInstanceGithubAuthenticationConfigurationKeys;
+  | TInstanceGithubAuthenticationConfigurationKeys
+  | TInstanceGitlabAuthenticationConfigurationKeys;
 
 export type TInstanceAuthenticationKeys =
   | TInstanceAuthenticationMethodKeys

packages/types/src/instance/base.d.ts

@@ -19,8 +19,8 @@ export interface IInstance {
   whitelist_emails: string | undefined;
   instance_id: string | undefined;
   license_key: string | undefined;
-  api_key: string | undefined;
-  version: string | undefined;
+  current_version: string | undefined;
+  latest_version: string | undefined;
   last_checked_at: string | undefined;
   namespace: string | undefined;
   is_telemetry_enabled: boolean;
@@ -38,6 +38,7 @@ export interface IInstance {
 export interface IInstanceConfig {
   is_google_enabled: boolean;
   is_github_enabled: boolean;
+  is_gitlab_enabled: boolean;
   is_magic_login_enabled: boolean;
   is_email_password_enabled: boolean;
   github_app_name: string | undefined;

packages/types/src/notifications.d.ts

@@ -57,7 +57,7 @@ export interface INotificationIssueLite {
   state_group: string;
 }
 
-export type NotificationType = "created" | "assigned" | "watching" | null;
+export type NotificationType = "created" | "assigned" | "watching" | "all";
 
 export interface INotificationParams {
   snoozed?: boolean;

packages/types/src/pages.d.ts

@@ -1,3 +1,4 @@
+import { TLogoProps } from "./common";
 import { EPageAccess } from "./enums";
 
 export type TPage = {
@@ -17,6 +18,7 @@ export type TPage = {
   updated_at: Date | undefined;
   updated_by: string | undefined;
   workspace: string | undefined;
+  logo_props: TLogoProps | undefined;
 };
 
 // page filters

packages/types/src/project/projects.d.ts

@@ -6,21 +6,10 @@ import type {
   IUserMemberLite,
   IWorkspace,
   IWorkspaceLite,
+  TLogoProps,
   TStateGroups,
 } from "..";
 
-export type TProjectLogoProps = {
-  in_use: "emoji" | "icon";
-  emoji?: {
-    value?: string;
-    url?: string;
-  };
-  icon?: {
-    name?: string;
-    color?: string;
-  };
-};
-
 export interface IProject {
   archive_in: number;
   archived_at: string | null;
@@ -46,7 +35,7 @@ export interface IProject {
   is_deployed: boolean;
   is_favorite: boolean;
   is_member: boolean;
-  logo_props: TProjectLogoProps;
+  logo_props: TLogoProps;
   member_role: EUserProjectRoles | null;
   members: IProjectMemberLite[];
   name: string;

packages/types/src/users.d.ts

@@ -5,7 +5,7 @@ import {
   TStateGroups,
 } from ".";
 
-type TLoginMediums = "email" | "magic-code" | "github" | "google";
+type TLoginMediums = "email" | "magic-code" | "github" | "gitlab" | "google";
 
 export interface IUser {
   id: string;
@@ -128,6 +128,7 @@ export interface IUserActivityResponse {
   prev_page_results: boolean;
   results: IIssueActivity[];
   total_pages: number;
+  total_results: number;
 }
 
 export type UserAuth = {

packages/types/src/views.d.ts

@@ -1,3 +1,4 @@
+import { TLogoProps } from "./common";
 import {
   IIssueDisplayFilterOptions,
   IIssueDisplayProperties,
@@ -21,4 +22,5 @@ export interface IProjectView {
   query_data: IIssueFilterOptions;
   project: string;
   workspace: string;
+  logo_props: TLogoProps | undefined;
 }

packages/ui/package.json

@@ -2,7 +2,7 @@
   "name": "@plane/ui",
   "description": "UI components shared across multiple apps internally",
   "private": true,
-  "version": "0.20.0",
+  "version": "0.21.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,12 +20,16 @@
     "postcss": "postcss styles/globals.css -o styles/output.css --watch"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.1.10",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@blueprintjs/core": "^4.16.3",
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.17",
     "@popperjs/core": "^2.11.8",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.379.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-popper": "^2.3.0",

packages/ui/src/control-link/control-link.tsx

@@ -2,22 +2,23 @@ import * as React from "react";
 
 export type TControlLink = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   href: string;
-  onClick: () => void;
+  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
   children: React.ReactNode;
   target?: string;
   disabled?: boolean;
   className?: string;
+  draggable?: boolean;
 };
 
 export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((props, ref) => {
-  const { href, onClick, children, target = "_self", disabled = false, className, ...rest } = props;
+  const { href, onClick, children, target = "_self", disabled = false, className, draggable = false, ...rest } = props;
   const LEFT_CLICK_EVENT_CODE = 0;
 
   const handleOnClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
     const clickCondition = (event.metaKey || event.ctrlKey) && event.button === LEFT_CLICK_EVENT_CODE;
     if (!clickCondition) {
       event.preventDefault();
-      onClick();
+      onClick(event);
     }
   };
 
@@ -33,7 +34,15 @@ export const ControlLink = React.forwardRef<HTMLAnchorElement, TControlLink>((pr
   if (disabled) return <>{children}</>;
 
   return (
-    <a href={href} target={target} onClick={handleOnClick} {...rest} ref={ref} className={className}>
+    <a
+      href={href}
+      target={target}
+      onClick={handleOnClick}
+      {...rest}
+      ref={ref}
+      className={className}
+      draggable={draggable}
+    >
       {children}
     </a>
   );

packages/ui/src/drag-handle.tsx

@@ -1,14 +1,15 @@
-import React from "react";
-import { forwardRef } from "react";
+import React, { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
+// helpers
+import { cn } from "../helpers";
 
 interface IDragHandle {
-  isDragging: boolean;
+  className?: string;
   disabled?: boolean;
 }
 
 export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((props, ref) => {
-  const { isDragging, disabled = false } = props;
+  const { className, disabled = false } = props;
 
   if (disabled) {
     return <div className="w-[14px] h-[18px]" />;
@@ -17,9 +18,10 @@ export const DragHandle = forwardRef<HTMLButtonElement | null, IDragHandle>((pro
   return (
     <button
       type="button"
-      className={` p-[2px] flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 group-hover:opacity-100 cursor-grab ${
-        isDragging ? "opacity-100" : "opacity-0"
-      }`}
+      className={cn(
+        "p-0.5 flex flex-shrink-0 rounded bg-custom-background-90 text-custom-sidebar-text-200 cursor-grab",
+        className
+      )}
       onContextMenu={(e) => {
         e.preventDefault();
         e.stopPropagation();

packages/ui/src/dropdown/Readme.md

@@ -0,0 +1,44 @@
+Below is a detailed list of the props included:
+
+### Root Props
+- value: string | string[]; - Current selected value.
+- onChange: (value: string | string []) => void; - Callback function for handling value changes.
+- options: TDropdownOption[] | undefined; - Array of options.
+- onOpen?: () => void; - Callback function triggered when the dropdown opens.
+- onClose?: () => void; - Callback function triggered when the dropdown closes.
+- containerClassName?: (isOpen: boolean) => string; - Function to return the class name for the container based on the open state.
+- tabIndex?: number; - Sets the tab index for the dropdown.
+- placement?: Placement; - Determines the placement of the dropdown (e.g., top, bottom, left, right).
+- disabled?: boolean; - Disables the dropdown if set to true.
+
+---
+
+### Button Props
+- buttonContent?: (isOpen: boolean) => React.ReactNode; - Function to render the content of the button based on the open state.
+- buttonContainerClassName?: string; - Class name for the button container.
+- buttonClassName?: string; - Class name for the button itself.
+
+---
+
+### Input Props
+- disableSearch?: boolean; - Disables the search input if set to true.
+- inputPlaceholder?: string; - Placeholder text for the search input.
+- inputClassName?: string; - Class name for the search input.
+- inputIcon?: React.ReactNode; - Icon to be displayed in the search input.
+- inputContainerClassName?: string; - Class name for the search input container.
+
+---
+
+### Options Props
+- keyExtractor: (option: TDropdownOption) => string; - Function to extract the key from each option.
+- optionsContainerClassName?: string; - Class name for the options container.
+- queryArray: string[]; - Array of strings to be used for querying the options.
+- sortByKey: string; - Key to sort the options by.
+- firstItem?: (optionValue: string) => boolean; - Function to determine if an option should be the first item.
+- renderItem?: ({ value, selected }: { value: string; selected: boolean }) => React.ReactNode; - Function to render each option.
+- loader?: React.ReactNode; - Loader element to be displayed while options are being loaded.
+- disableSorting?: boolean; - Disables sorting of the options if set to true.
+
+---
+
+These properties offer extensive control over the dropdown's behavior and presentation, making it a highly versatile component suitable for various scenarios.

packages/ui/src/dropdown/common/button.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment } from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// helper
+import { cn } from "../../../helpers";
+import { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
+
+export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelectDropdownButton> = (props) => {
+  const {
+    isOpen,
+    buttonContent,
+    buttonClassName,
+    buttonContainerClassName,
+    handleOnClick,
+    value,
+    setReferenceElement,
+    disabled,
+  } = props;
+  return (
+    <Combobox.Button as={Fragment}>
+      <button
+        ref={setReferenceElement}
+        type="button"
+        className={cn(
+          "clickable block h-full max-w-full outline-none",
+          {
+            "cursor-not-allowed text-custom-text-200": disabled,
+            "cursor-pointer": !disabled,
+          },
+          buttonContainerClassName
+        )}
+        onClick={handleOnClick}
+      >
+        {buttonContent ? <>{buttonContent(isOpen)}</> : <span className={cn("", buttonClassName)}>{value}</span>}
+      </button>
+    </Combobox.Button>
+  );
+};

packages/ui/src/dropdown/common/index.ts

@@ -0,0 +1,4 @@
+export * from "./input-search";
+export * from "./button";
+export * from "./options";
+export * from "./loader";

packages/ui/src/dropdown/common/input-search.tsx

@@ -0,0 +1,58 @@
+import React, { FC, useEffect, useRef } from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Search } from "lucide-react";
+// helpers
+import { cn } from "../../../helpers";
+
+interface IInputSearch {
+  isOpen: boolean;
+  query: string;
+  updateQuery: (query: string) => void;
+  inputIcon?: React.ReactNode;
+  inputContainerClassName?: string;
+  inputClassName?: string;
+  inputPlaceholder?: string;
+}
+
+export const InputSearch: FC<IInputSearch> = (props) => {
+  const { isOpen, query, updateQuery, inputIcon, inputContainerClassName, inputClassName, inputPlaceholder } = props;
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  const searchInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (query !== "" && e.key === "Escape") {
+      e.stopPropagation();
+      updateQuery("");
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      inputRef.current && inputRef.current.focus();
+    }
+  }, [isOpen]);
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1.5 rounded border border-custom-border-100 bg-custom-background-90 px-2",
+        inputContainerClassName
+      )}
+    >
+      {inputIcon ? <>{inputIcon}</> : <Search className="h-4 w-4 text-custom-text-300" aria-hidden="true" />}
+      <Combobox.Input
+        as="input"
+        ref={inputRef}
+        className={cn(
+          "w-full bg-transparent py-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none",
+          inputClassName
+        )}
+        value={query}
+        onChange={(e) => updateQuery(e.target.value)}
+        placeholder={inputPlaceholder ?? "Search"}
+        onKeyDown={searchInputKeyDown}
+      />
+    </div>
+  );
+};

packages/ui/src/dropdown/common/loader.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const DropdownOptionsLoader = () => (
+  <div className="flex flex-col gap-1 animate-pulse">
+    {Array.from({ length: 6 }, (_, i) => (
+      <div key={i} className="flex h-[1.925rem] w-full rounded px-1 py-1.5 bg-custom-background-90" />
+    ))}
+  </div>
+);

packages/ui/src/dropdown/common/options.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// icons
+import { Check } from "lucide-react";
+// components
+import { DropdownOptionsLoader, InputSearch } from ".";
+// helpers
+import { cn } from "../../../helpers";
+// types
+import { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
+
+export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSelectDropdownOptions> = (props) => {
+  const {
+    isOpen,
+    query,
+    setQuery,
+    inputIcon,
+    inputPlaceholder,
+    inputClassName,
+    inputContainerClassName,
+    disableSearch,
+    keyExtractor,
+    options,
+    value,
+    renderItem,
+    loader,
+  } = props;
+  return (
+    <>
+      {!disableSearch && (
+        <InputSearch
+          isOpen={isOpen}
+          query={query}
+          updateQuery={(query) => setQuery(query)}
+          inputIcon={inputIcon}
+          inputPlaceholder={inputPlaceholder}
+          inputClassName={inputClassName}
+          inputContainerClassName={inputContainerClassName}
+        />
+      )}
+      <div className="mt-2 max-h-48 space-y-1 overflow-y-scroll">
+        <>
+          {options ? (
+            options.length > 0 ? (
+              options?.map((option) => (
+                <Combobox.Option
+                  key={keyExtractor(option)}
+                  value={option.data[option.value]}
+                  className={({ active, selected }) =>
+                    cn(
+                      "flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5",
+                      {
+                        "bg-custom-background-80": active,
+                        "text-custom-text-100": selected,
+                        "text-custom-text-200": !selected,
+                      },
+                      option.className && option.className({ active, selected })
+                    )
+                  }
+                >
+                  {({ selected }) => (
+                    <>
+                      {renderItem ? (
+                        <>{renderItem({ value: option.data[option.value], selected })}</>
+                      ) : (
+                        <>
+                          <span className="flex-grow truncate">{value}</span>
+                          {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
+                        </>
+                      )}
+                    </>
+                  )}
+                </Combobox.Option>
+              ))
+            ) : (
+              <p className="px-1.5 py-1 italic text-custom-text-400">No matching results</p>
+            )
+          ) : loader ? (
+            <> {loader} </>
+          ) : (
+            <DropdownOptionsLoader />
+          )}
+        </>
+      </div>
+    </>
+  );
+};