feat(dataconnectors): support confluence personal access token (#3206)

* feat(dataconnectors): support confluence personal access token

* fix: change select option

* linting
change name on accesstype field

---------

Co-authored-by: timothycarambat <rambat1010@gmail.com>

collector/utils/extensions/Confluence/index.js

@@ -19,18 +19,19 @@ async function loadConfluence(
     username = null,
     accessToken = null,
     cloud = true,
+    personalAccessToken = null,
   },
   response
 ) {
-  if (!baseUrl || !spaceKey || !username || !accessToken) {
+  if (!personalAccessToken && (!username || !accessToken)) {
     return {
       success: false,
       reason:
-        "You need either a username and access token, or a personal access token (PAT), to use the Confluence connector.",
+        "You need either a personal access token (PAT), or a username and access token to use the Confluence connector.",
     };
   }
 
-  if (!validBaseUrl(baseUrl)) {
+  if (!baseUrl || !validBaseUrl(baseUrl)) {
     return {
       success: false,
       reason: "Provided base URL is not a valid URL.",
@@ -52,6 +53,7 @@ async function loadConfluence(
     username,
     accessToken,
     cloud,
+    personalAccessToken,
   });
 
   const { docs, error } = await loader

frontend/src/components/Modals/ManageWorkspace/DataConnectors/Connectors/Confluence/index.jsx

@@ -6,6 +6,7 @@ import { Tooltip } from "react-tooltip";
 
 export default function ConfluenceOptions() {
   const [loading, setLoading] = useState(false);
+  const [accessType, setAccessType] = useState("username");
 
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -27,6 +28,7 @@ export default function ConfluenceOptions() {
         username: form.get("username"),
         accessToken: form.get("accessToken"),
         cloud: form.get("isCloud") === "true",
+        personalAccessToken: form.get("personalAccessToken"),
       });
 
       if (!!error) {
@@ -119,6 +121,42 @@ export default function ConfluenceOptions() {
                   spellCheck={false}
                 />
               </div>
+              <div className="flex flex-col pr-10">
+                <div className="flex flex-col gap-y-1 mb-4">
+                  <label className="text-white text-sm font-bold">
+                    Confluence Auth Type
+                  </label>
+                  <p className="text-xs font-normal text-theme-text-secondary">
+                    Your Confluence authentication type, eg: username and access
+                    token / personal access token.
+                  </p>
+                </div>
+                <select
+                  name="accessType"
+                  className="border-none bg-theme-settings-input-bg w-fit mt-2 px-4 border-gray-500 text-white text-sm rounded-lg block py-2"
+                  defaultValue={accessType}
+                  onChange={(e) => setAccessType(e.target.value)}
+                >
+                  {[
+                    {
+                      name: "Username and Access Token",
+                      value: "username",
+                    },
+                    {
+                      name: "Personal Access Token",
+                      value: "personalToken",
+                    },
+                  ].map((type) => {
+                    return (
+                      <option key={type.value} value={type.value}>
+                        {type.name}
+                      </option>
+                    );
+                  })}
+                </select>
+              </div>
+              {accessType === "username" && (
+                <>
                   <div className="flex flex-col pr-10">
                     <div className="flex flex-col gap-y-1 mb-4">
                       <label className="text-white text-sm font-bold">
@@ -157,8 +195,8 @@ export default function ConfluenceOptions() {
                           clickable={true}
                         >
                           <p className="text-sm">
-                        You need to provide an access token for authentication.
-                        You can generate an access token{" "}
+                            You need to provide an access token for
+                            authentication. You can generate an access token{" "}
                             <a
                               href="https://id.atlassian.com/manage-profile/security/api-tokens"
                               target="_blank"
@@ -186,6 +224,29 @@ export default function ConfluenceOptions() {
                       spellCheck={false}
                     />
                   </div>
+                </>
+              )}
+              {accessType === "personalToken" && (
+                <div className="flex flex-col pr-10">
+                  <div className="flex flex-col gap-y-1 mb-4">
+                    <label className="text-white text-sm font-bold">
+                      Confluence Personal Access Token
+                    </label>
+                    <p className="text-xs font-normal text-theme-text-secondary">
+                      Your Confluence personal access token.
+                    </p>
+                  </div>
+                  <input
+                    type="password"
+                    name="personalAccessToken"
+                    className="border-none bg-theme-settings-input-bg text-white placeholder:text-theme-settings-input-placeholder text-sm rounded-lg focus:outline-primary-button active:outline-primary-button outline-none block w-full p-2.5"
+                    placeholder="abcd1234"
+                    required={true}
+                    autoComplete="off"
+                    spellCheck={false}
+                  />
+                </div>
+              )}
             </div>
           </div>
 

frontend/src/models/dataConnector.js

@@ -137,6 +137,7 @@ const DataConnector = {
       username,
       accessToken,
       cloud,
+      personalAccessToken,
     }) {
       return await fetch(`${API_BASE}/ext/confluence`, {
         method: "POST",
@@ -147,6 +148,7 @@ const DataConnector = {
           username,
           accessToken,
           cloud,
+          personalAccessToken,
         }),
       })
         .then((res) => res.json())