Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 08:58:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Feature/autofill workspaceslug using workspace name (#10432)

Browse source 
* 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
This commit is contained in:
Rohan Lahori 2024-08-13 13:30:58 +05:30 committed by GitHub
parent 523c80f695
commit b49dbf9b1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 33 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/src/_components/OrganizationManager/CreateOrganization.jsx
View file

@ -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 || ''}