From 52ab7b2b9a6d474a100cfa6a63477a2a45b8cf99 Mon Sep 17 00:00:00 2001
From: Rohan Lahori <64496391+rohanlahori@users.noreply.github.com>
Date: Tue, 3 Sep 2024 12:47:06 +0530
Subject: [PATCH] fixed empty slug issue (#10690)

* fixed empty slug issue

* minor bug fix

* removed unused console logs
---
 .../OrganizationManager/CreateOrganization.jsx        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
index 204487773a..6357b000bb 100644
--- a/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
+++ b/frontend/src/_components/OrganizationManager/CreateOrganization.jsx
@@ -19,6 +19,7 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
   const darkMode = localStorage.getItem('darkMode') === 'true';
   const { t } = useTranslation();
   const isSlugSet = useRef(false); // Flag to track if slug has been initially set
+  const sluginput = useRef('');
 
   const createOrganization = () => {
     let emptyError = false;
@@ -138,7 +139,7 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
   useEffect(() => {
     if (!isSlugSet.current && name.value && !slugProgress && !workspaceNameProgress) {
       const defaultValue =
-        name.value
+        name?.value
           .replace(/\s+/g, '')
           .toLowerCase()
           .replace(/[^a-z0-9-\s]/g, '') || '';
@@ -147,6 +148,7 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
       const checkWorkspaceUniqueness = async () => {
         try {
           await organizationService.checkWorkspaceUniqueness(null, defaultValue);
+          sluginput.current.value = defaultValue;
         } catch (errResponse) {
           let error = {
             status: false,
@@ -160,9 +162,10 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
       setSlugProgress(false);
     }
     if (slugProgress && !isSlugSet.current) {
+      // this is to denote that the user has tried editing the slug -- so now slug and name are independent of each other
       isSlugSet.current = true;
     }
-  }, [name.value, slugProgress, workspaceNameProgress, isSlugSet]);
+  }, [name.value, slug.value, slugProgress, workspaceNameProgress, isSlugSet]);
 
   const isDisabled = isCreating || isNameDisabled || isSlugDisabled || slugProgress || workspaceNameProgress;
 
@@ -194,6 +197,8 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
                 <label className="label tj-input-error" data-cy="workspace-error-label">
                   {name?.error || ''}
                 </label>
+              ) : name.value && !workspaceNameProgress ? (
+                <label className="label label-success" data-cy="slug-sucess-label">{`Workspace name accepted!`}</label>
               ) : (
                 <label className="label label-info" data-cy="workspace-name-info-label">
                   Name must be unique and max 50 characters
@@ -209,8 +214,8 @@ export const CreateOrganization = ({ showCreateOrg, setShowCreateOrg }) => {
                 className={`form-control ${slug?.error ? 'is-invalid' : 'is-valid'}`}
                 placeholder={t('header.organization.workspaceSlug', 'Unique workspace slug')}
                 disabled={isCreating}
+                ref={sluginput}
                 maxLength={50}
-                defaultValue={slug.value || ''}
                 onChange={async (e) => {
                   e.persist();
                   await delayedSlugChange(e.target.value);