Gen-882: Add max length validation for glossary term rename (#18166)

* add max length validation for glossary term name

* add name validation
This commit is contained in:
Karan Hotchandani 2024-10-08 23:06:54 +05:30 committed by GitHub
parent 61c2debdc3
commit 4233abf415
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 39 additions and 7 deletions

View File

@ -37,6 +37,8 @@ import { addMultiOwner } from './entity';
import { sidebarClick } from './sidebar'; import { sidebarClick } from './sidebar';
import { TaskDetails, TASK_OPEN_FETCH_LINK } from './task'; import { TaskDetails, TASK_OPEN_FETCH_LINK } from './task';
const GLOSSARY_NAME_VALIDATION_ERROR = 'Name size must be between 1 and 128';
export const descriptionBox = export const descriptionBox =
'.toastui-editor-md-container > .toastui-editor > .ProseMirror'; '.toastui-editor-md-container > .toastui-editor > .ProseMirror';
@ -146,7 +148,7 @@ export const setupGlossaryAndTerms = async (page: Page) => {
return { glossary, term1, term2, cleanup }; return { glossary, term1, term2, cleanup };
}; };
export const validateForm = async (page) => { export const validateForm = async (page: Page) => {
// Error messages // Error messages
await expect(page.locator('#name_help')).toHaveText('Name is required'); await expect(page.locator('#name_help')).toHaveText('Name is required');
await expect(page.locator('#description_help')).toHaveText( await expect(page.locator('#description_help')).toHaveText(
@ -603,6 +605,13 @@ export const updateNameForGlossaryTerm = async (
await expect(page.locator('#name')).toBeVisible(); await expect(page.locator('#name')).toBeVisible();
// Max length validation
await page.locator('#name').fill(INVALID_NAMES.MAX_LENGTH);
await expect(page.locator('#name_help')).toHaveText(
GLOSSARY_NAME_VALIDATION_ERROR
);
await page.fill('#name', name); await page.fill('#name', name);
const updateNameResponsePromise = page.waitForResponse( const updateNameResponsePromise = page.waitForResponse(
`/api/v1/${endPoint}/*` `/api/v1/${endPoint}/*`

View File

@ -1 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"><path fill="#CCC" d="m19.45 16.8-4.589-4.59a8.842 8.842 0 0 1-2.651 2.652l4.59 4.589c.732.732 1.919.732 2.65 0a1.873 1.873 0 0 0 0-2.652ZM15 7.5a7.5 7.5 0 1 0-15 0 7.5 7.5 0 0 0 15 0Zm-7.5 5.625A5.63 5.63 0 0 1 1.875 7.5 5.63 5.63 0 0 1 7.5 1.875 5.631 5.631 0 0 1 13.125 7.5 5.63 5.63 0 0 1 7.5 13.125Z"/><path fill="#CCC" d="M3.125 7.5h1.25A3.128 3.128 0 0 1 7.5 4.375v-1.25A4.38 4.38 0 0 0 3.125 7.5Z"/></svg> <svg viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.2403 5.18031C9.53367 4.01467 7.28685 4.01466 5.58013 5.18031L5.58004 5.18037C4.73566 5.75686 4.08044 6.56996 3.69665 7.5176L3.6964 7.51822C3.30832 8.47365 3.20686 9.52139 3.40444 10.5335L3.40456 10.5342C3.60024 11.5421 4.08751 12.4704 4.80592 13.204L4.80704 13.2051C5.75403 14.1769 7.05336 14.725 8.41021 14.725C9.76717 14.725 11.0665 14.1769 12.0134 13.2052L12.0146 13.204C12.733 12.4704 13.2203 11.5421 13.4159 10.5342L13.416 10.5335C13.6137 9.52139 13.5122 8.47367 13.1241 7.51824L13.1238 7.51757C12.7401 6.56996 12.0849 5.75687 11.2404 5.18039L11.2403 5.18031ZM11.9768 4.1017C9.82599 2.63276 6.99449 2.63277 4.84361 4.10171ZM11.977 4.10178C13.0338 4.82332 13.8539 5.84098 14.3342 7.027C14.8177 8.2173 14.9441 9.5226 14.6979 10.7836C14.4536 12.0422 13.8451 13.2014 12.948 14.1175C11.7553 15.341 10.119 16.0311 8.41021 16.0311C6.70136 16.0311 5.06498 15.3409 3.87222 14.1173C2.97528 13.2012 2.36688 12.042 2.12248 10.7834C1.87643 9.52252 2.00281 8.21732 2.48618 7.02709C2.96658 5.84103 3.78668 4.82333 4.84351 4.10178" fill="#292929"/>
<path d="M13.0612 13.0752C12.7874 12.8019 12.3438 12.8023 12.0704 13.0762C11.797 13.3499 11.7975 13.7936 12.0713 14.0669L13.0612 13.0752ZM16.6956 18.6856C16.9695 18.9591 17.413 18.9587 17.6865 18.6848C17.9598 18.4109 17.9594 17.9674 17.6855 17.694L16.6956 18.6856ZM12.0713 14.0669L16.6956 18.6856L17.6855 17.694L13.0612 13.0752L12.0713 14.0669Z" fill="#292929"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9934 12.9993C12.3092 12.6829 12.8217 12.6825 13.138 12.9983L17.7624 17.617C17.7624 17.617 17.7624 17.617 17.7624 17.617C18.0788 17.9329 18.0792 18.4453 17.7634 18.7618C17.4476 19.0782 16.9351 19.0786 16.6187 18.7627L11.9943 14.144C11.9943 14.144 11.9943 14.144 11.9943 14.144C11.678 13.8282 11.6775 13.3157 11.9934 12.9993ZM17.5316 17.6942L13.0612 13.2292L12.2251 14.0668L16.6955 18.5318L17.5316 17.6942ZM17.6094 18.608C17.4047 18.813 17.0872 18.8366 16.8565 18.6785ZM16.8565 18.6785L17.6785 17.855C17.837 18.0854 17.814 18.403 17.6094 18.608M12.0781 13.906L12.9001 13.0825C12.6696 12.9245 12.352 12.9481 12.1474 13.1531C11.9428 13.358 11.9198 13.6757 12.0781 13.906Z" fill="#292929"/>
<path d="M7.79393 6.48132C7.7532 6.09655 8.03204 5.75158 8.4168 5.71081C9.70533 5.57428 10.9315 6.29663 11.4365 7.48979C11.5874 7.8461 11.4208 8.25723 11.0646 8.40807C10.7082 8.55893 10.2971 8.39237 10.1462 8.03604C9.88169 7.41104 9.23939 7.03268 8.56448 7.10419C8.17972 7.14496 7.83475 6.8661 7.79393 6.48132Z" fill="#757575"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40535 5.60241C9.74153 5.46083 11.013 6.2099 11.5368 7.4472C11.7111 7.85886 11.5186 8.33385 11.107 8.50813C10.6953 8.68242 10.2203 8.49 10.046 8.0783C9.80016 7.49745 9.20322 7.1458 8.57597 7.21226C8.13143 7.25936 7.73288 6.93718 7.68572 6.49264C7.63866 6.04811 7.9608 5.64951 8.40535 5.60241ZM8.53674 5.80948C8.50065 5.81191 8.4645 5.81505 8.42829 5.81888L8.41682 5.71065L8.52505 5.69918L8.53674 5.80948ZM11.292 7.43263C10.7963 6.37588 9.70138 5.73082 8.53674 5.80948L8.66164 6.98787C8.62556 6.98932 8.58934 6.99195 8.55304 6.99579L8.5645 7.10403L8.45627 7.1155L8.44375 6.99733C8.47952 7.00013 8.51606 6.99971 8.55304 6.99579M7.90218 6.46968C7.87171 6.18165 8.05322 5.92004 8.32111 5.84028L8.44375 6.99733C8.16508 6.97547 7.93275 6.7577 7.90218 6.46968ZM10.2008 7.8946C9.91028 7.31708 9.30759 6.96205 8.66164 6.98787L8.67274 7.09256L8.5645 7.10403M10.2008 7.8946L10.1038 7.93564L10.1887 8.1361L10.2981 8.08977C10.4523 8.32296 10.7554 8.4206 11.0221 8.30767C11.0221 8.30767 11.0221 8.30768 11.0221 8.30767C11.2888 8.19476 11.4297 7.90918 11.3696 7.63618L11.479 7.58985L11.4365 7.48962L11.3941 7.3894L11.292 7.43263M11.292 7.43263L10.2008 7.8946C10.217 7.92686 10.2322 7.95982 10.2465 7.99344C10.261 8.02768 10.2783 8.05984 10.2981 8.08977L11.3696 7.63618C11.3618 7.60113 11.3508 7.5663 11.3363 7.53206L11.4365 7.48962" fill="#757575"/>
</svg>

Before

Width:  |  Height:  |  Size: 484 B

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -657,6 +657,17 @@ const GlossaryHeader = ({
<EntityNameModal <EntityNameModal
allowRename allowRename
entity={selectedData as EntityReference} entity={selectedData as EntityReference}
nameValidationRules={[
{
min: 1,
max: 128,
message: t('message.entity-size-in-between', {
entity: t('label.name'),
min: 1,
max: 128,
}),
},
]}
title={t('label.edit-entity', { title={t('label.edit-entity', {
entity: t('label.name'), entity: t('label.name'),
})} })}

View File

@ -159,7 +159,11 @@ const GlossaryTermsV1 = ({
const onTermUpdate = async (data: GlossaryTerm | Glossary) => { const onTermUpdate = async (data: GlossaryTerm | Glossary) => {
await handleGlossaryTermUpdate(data as GlossaryTerm); await handleGlossaryTermUpdate(data as GlossaryTerm);
getEntityFeedCount(); // For name change, do not update the feed. It will be updated when the page is redirected to
// have the new value.
if (glossaryTerm.name === data.name) {
getEntityFeedCount();
}
}; };
const tabItems = useMemo(() => { const tabItems = useMemo(() => {

View File

@ -25,6 +25,7 @@ const EntityNameModal: React.FC<EntityNameModalProps> = ({
// re-name will update actual name of the entity, it will impact across application // re-name will update actual name of the entity, it will impact across application
// By default its disabled, send allowRename true to get the functionality // By default its disabled, send allowRename true to get the functionality
allowRename = false, allowRename = false,
nameValidationRules = [],
}) => { }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [form] = Form.useForm<{ name: string; displayName: string }>(); const [form] = Form.useForm<{ name: string; displayName: string }>();
@ -83,6 +84,7 @@ const EntityNameModal: React.FC<EntityNameModalProps> = ({
pattern: ENTITY_NAME_REGEX, pattern: ENTITY_NAME_REGEX,
message: t('message.entity-name-validation'), message: t('message.entity-name-validation'),
}, },
...nameValidationRules,
]}> ]}>
<Input <Input
disabled={!allowRename} disabled={!allowRename}

View File

@ -10,6 +10,8 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import { Rule } from 'antd/lib/form';
export type EntityName = { name: string; displayName: string }; export type EntityName = { name: string; displayName: string };
export interface EntityNameModalProps { export interface EntityNameModalProps {
@ -19,4 +21,5 @@ export interface EntityNameModalProps {
onSave: (obj: EntityName) => void | Promise<void>; onSave: (obj: EntityName) => void | Promise<void>;
entity: Partial<EntityName>; entity: Partial<EntityName>;
title: string; title: string;
nameValidationRules?: Rule[];
} }

View File

@ -280,10 +280,7 @@ const GlossaryPage = () => {
return; return;
} }
try { try {
const response = await patchGlossaryTerm( const response = await patchGlossaryTerm(activeGlossary?.id, jsonPatch);
activeGlossary?.id as string,
jsonPatch
);
if (response) { if (response) {
setActiveGlossary(response as ModifiedGlossary); setActiveGlossary(response as ModifiedGlossary);
if (activeGlossary?.name !== updatedData.name) { if (activeGlossary?.name !== updatedData.name) {