From b49dbf9b1c99d230606870dec7bdd0d731bc2161 Mon Sep 17 00:00:00 2001
From: Rohan Lahori <64496391+rohanlahori@users.noreply.github.com>
Date: Tue, 13 Aug 2024 13:30:58 +0530
Subject: [PATCH] Feature/autofill workspaceslug using workspace name (#10432)

* fixed workspace slug autofilling

* changes for auto update slug url based on name

* changes to enable workspace button only when required

* made change for removing empty spaces

* added - support in the slug

* fixed all the bugs in workspace creation card

* removed all the console used for debugging

* added check for setting the prop to true

* add slug set dependency in the useEffect prop
---
 .../CreateOrganization.jsx                    | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
index 0b777db87e..204487773a 100644
--- a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
+++ b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { organizationService } from '@/_services';
 import AlertDialog from '@/_ui/AlertDialog';
 import { useTranslation } from 'react-i18next';
@@ -18,10 +18,10 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
   const [isSlugDisabled, setSlugDisabled] = useState(true);
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const { t } = useTranslation();
+  const isSlugSet = useRef(false); // Flag to track if slug has been initially set
 
   const createOrganization = () => {
     let emptyError = false;
-
     [name, slug].map((field, index) => {
       if (!field?.value?.trim()) {
         index === 0
@@ -77,7 +77,6 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
       !(field === 'slug'),
       field === 'slug'
     );
-
     /* If the basic validation is passing. then check the uniqueness */
     if (error?.status === true) {
       try {
@@ -92,7 +91,6 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
         };
       }
     }
-
     const disabled = !error?.status;
     const updatedValue = {
       value,
@@ -126,17 +124,45 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
     setShowCreateOrg(false);
     setNameDisabled(true);
     setSlugDisabled(true);
+    isSlugSet.current = false;
   };
 
   const delayedSlugChange = _.debounce(async (value) => {
     setSlugProgress(true);
     await handleInputChange(value, 'slug');
   }, 300);
-
   const delayedNameChange = _.debounce(async (value) => {
     setWorkspaceNameProgress(true);
     await handleInputChange(value, 'name');
   }, 300);
+  useEffect(() => {
+    if (!isSlugSet.current && name.value && !slugProgress && !workspaceNameProgress) {
+      const defaultValue =
+        name.value
+          .replace(/\s+/g, '')
+          .toLowerCase()
+          .replace(/[^a-z0-9-\s]/g, '') || '';
+      setSlug({ value: defaultValue, error: '' });
+
+      const checkWorkspaceUniqueness = async () => {
+        try {
+          await organizationService.checkWorkspaceUniqueness(null, defaultValue);
+        } catch (errResponse) {
+          let error = {
+            status: false,
+            errorMsg: errResponse?.error,
+          };
+          setSlug({ value: defaultValue, error: error?.errorMsg });
+        }
+      };
+      checkWorkspaceUniqueness();
+      setSlugDisabled(false);
+      setSlugProgress(false);
+    }
+    if (slugProgress && !isSlugSet.current) {
+      isSlugSet.current = true;
+    }
+  }, [name.value, slugProgress, workspaceNameProgress, isSlugSet]);
 
   const isDisabled = isCreating || isNameDisabled || isSlugDisabled || slugProgress || workspaceNameProgress;
 
@@ -184,6 +210,7 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
                 placeholder={t('header.organization.workspaceSlug', 'Unique workspace slug')}
                 disabled={isCreating}
                 maxLength={50}
+                defaultValue={slug.value || ''}
                 onChange={async (e) => {
                   e.persist();
                   await delayedSlugChange(e.target.value);
@@ -203,6 +230,7 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
                   </svg>
                 </div>
               )}
+
               {slug?.error ? (
                 <label className="label tj-input-error" data-cy="input-label-error">
                   {slug?.error || ''}