fix: Remove requestTagBeforeClosing dependency from chatClosingTags

.changeset/real-grapes-itch.md

@@ -0,0 +1,5 @@
+---
+"@rocket.chat/meteor": patch
+---
+
+Fixes an issue where it‘s not being possible to configure department's `chatClosingTags` without enabling `requestTagBeforeClosingTag`

apps/meteor/client/views/omnichannel/departments/DepartmentTags.tsx

@@ -48,7 +48,7 @@ const DepartmentTags = ({ error, value: tags, onChange, ...props }: DepartmentTa
 				</Button>
 			</FieldRow>
 			{tags?.length > 0 && (
-				<FieldRow>
+				<FieldRow justifyContent='flex-start'>
 					{tags.map((tag, i) => (
 						<Chip key={i} onClick={handleTagChipClick(tag)} mie={8}>
 							{tag}

apps/meteor/client/views/omnichannel/departments/EditDepartment.tsx

@@ -69,12 +69,9 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 		register,
 		control,
 		handleSubmit,
-		watch,
 		formState: { errors, isValid, isDirty, isSubmitting },
 	} = useForm<EditDepartmentFormData>({ mode: 'onChange', defaultValues: initialValues });
 
-	const requestTagBeforeClosingChat = watch('requestTagBeforeClosingChat');
-
 	const [fallbackFilter, setFallbackFilter] = useState<string>('');
 	const [isUnitRequired, setUnitRequired] = useState(false);
 
@@ -414,33 +411,28 @@ function EditDepartment({ data, id, title, allowedToForwardData }: EditDepartmen
 							</FieldRow>
 						</Field>
 
-						{requestTagBeforeClosingChat && (
-							<Field>
-								<FieldLabel htmlFor={chatClosingTagsField} required>
-									{t('Conversation_closing_tags')}
-								</FieldLabel>
-								<Controller
-									control={control}
-									name='chatClosingTags'
-									rules={{ required: t('Required_field', 'tags') }}
-									render={({ field: { value, onChange } }) => (
-										<DepartmentTags
-											id={chatClosingTagsField}
-											value={value}
-											onChange={onChange}
-											error={errors.chatClosingTags?.message as string}
-											aria-describedby={`${chatClosingTagsField}-hint ${chatClosingTagsField}-error`}
-										/>
-									)}
-								/>
-								<FieldHint id={`${chatClosingTagsField}-hint`}>{t('Conversation_closing_tags_description')}</FieldHint>
-								{errors.chatClosingTags && (
-									<FieldError aria-live='assertive' id={`${chatClosingTagsField}-error`}>
-										{errors.chatClosingTags?.message}
-									</FieldError>
+						<Field>
+							<FieldLabel htmlFor={chatClosingTagsField}>{t('Conversation_closing_tags')}</FieldLabel>
+							<Controller
+								control={control}
+								name='chatClosingTags'
+								render={({ field: { value, onChange } }) => (
+									<DepartmentTags
+										id={chatClosingTagsField}
+										value={value}
+										onChange={onChange}
+										error={errors.chatClosingTags?.message as string}
+										aria-describedby={`${chatClosingTagsField}-hint ${chatClosingTagsField}-error`}
+									/>
 								)}
-							</Field>
-						)}
+							/>
+							<FieldHint id={`${chatClosingTagsField}-hint`}>{t('Conversation_closing_tags_description')}</FieldHint>
+							{errors.chatClosingTags && (
+								<FieldError aria-live='assertive' id={`${chatClosingTagsField}-error`}>
+									{errors.chatClosingTags?.message}
+								</FieldError>
+							)}
+						</Field>
 
 						<Field>
 							<FieldRow>

apps/meteor/tests/e2e/omnichannel/omnichannel-departaments.spec.ts

@@ -202,78 +202,43 @@ test.describe('OC - Manage Departments', () => {
 		});
 
 		test('Request tag(s) before closing conversation', async () => {
-			await test.step('expect create new department', async () => {
+			await test.step('should create new department', async () => {
 				await poOmnichannelDepartments.search(department.name);
 				await expect(poOmnichannelDepartments.firstRowInTable).toBeVisible();
 			});
 
-			await test.step('expect save form button be disabled', async () => {
-				await poOmnichannelDepartments.search(department.name);
-				await poOmnichannelDepartments.firstRowInTableMenu.click();
-				await poOmnichannelDepartments.menuEditOption.click();
+			const tagName = faker.string.sample(5);
+			await poOmnichannelDepartments.firstRowInTableMenu.click();
+			await poOmnichannelDepartments.menuEditOption.click();
+
+			await test.step('should form save button be disabled', async () => {
 				await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
-				await poOmnichannelDepartments.btnBack.click();
 			});
 
-			await test.step('Disabled tags state', async () => {
-				await poOmnichannelDepartments.search(department.name);
-				await poOmnichannelDepartments.firstRowInTableMenu.click();
-				await poOmnichannelDepartments.menuEditOption.click();
+			await test.step('should be able to add a tag properly', async () => {
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await poOmnichannelDepartments.btnTagsAdd.click();
 
-				await test.step('expect to have department tags toggle button', async () => {
-					await expect(poOmnichannelDepartments.toggleRequestTags).toBeVisible();
-				});
-
-				await test.step('expect have no add tag to department', async () => {
-					await expect(poOmnichannelDepartments.inputTags).not.toBeVisible();
-					await expect(poOmnichannelDepartments.btnTagsAdd).not.toBeVisible();
-					await poOmnichannelDepartments.btnBack.click();
-				});
+				await expect(poOmnichannelDepartments.btnTag(tagName)).toBeVisible();
+				await expect(poOmnichannelDepartments.btnSave).toBeEnabled();
 			});
 
-			await test.step('Enabled tags state', async () => {
-				const tagName = faker.string.sample(5);
-
-				await poOmnichannelDepartments.search(department.name);
-				await poOmnichannelDepartments.firstRowInTableMenu.click();
-				await poOmnichannelDepartments.menuEditOption.click();
-
-				await test.step('expect to have form save option disabled', async () => {
-					await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
-				});
-
-				await test.step('expect clicking on toggle button to enable tags', async () => {
-					await poOmnichannelDepartments.toggleRequestTags.click();
-					await expect(poOmnichannelDepartments.inputTags).toBeVisible();
-					await expect(poOmnichannelDepartments.btnTagsAdd).toBeVisible();
-				});
-
-				await test.step('expect to have add and remove one tag properly tags', async () => {
-					await poOmnichannelDepartments.inputTags.fill(tagName);
-					await poOmnichannelDepartments.btnTagsAdd.click();
-
-					await expect(poOmnichannelDepartments.btnTag(tagName)).toBeVisible();
-					await expect(poOmnichannelDepartments.btnSave).toBeEnabled();
-				});
-
-				await test.step('expect to be invalid if there is no tag added', async () => {
-					await poOmnichannelDepartments.btnTag(tagName).click();
-					await expect(poOmnichannelDepartments.invalidInputTags).toBeVisible();
-					await expect(poOmnichannelDepartments.btnSave).toBeDisabled();
-				});
+			await test.step('should be able to remove a tag properly', async () => {
+				await poOmnichannelDepartments.btnTag(tagName).click();
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
+			});
 
-				await test.step('expect to be not possible adding empty tags', async () => {
-					await poOmnichannelDepartments.inputTags.fill('');
-					await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
-				});
+			await test.step('should not be possible to add empty tags', async () => {
+				await poOmnichannelDepartments.inputTags.fill('');
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
+			});
 
-				await test.step('expect to not be possible adding same tag twice', async () => {
-					const tagName = faker.string.sample(5);
-					await poOmnichannelDepartments.inputTags.fill(tagName);
-					await poOmnichannelDepartments.btnTagsAdd.click();
-					await poOmnichannelDepartments.inputTags.fill(tagName);
-					await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
-				});
+			await test.step('should not be possible to add same tag twice', async () => {
+				const tagName = faker.string.sample(5);
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await poOmnichannelDepartments.btnTagsAdd.click();
+				await poOmnichannelDepartments.inputTags.fill(tagName);
+				await expect(poOmnichannelDepartments.btnTagsAdd).toBeDisabled();
 			});
 		});
 

apps/meteor/tests/e2e/page-objects/omnichannel-departments.ts

@@ -49,10 +49,6 @@ export class OmnichannelDepartments {
 		return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]');
 	}
 
-	get invalidInputTags() {
-		return this.page.locator('[data-qa="DepartmentEditTextInput-ConversationClosingTags"]:invalid');
-	}
-
 	get invalidInputName() {
 		return this.page.locator('[data-qa="DepartmentEditTextInput-Name"]:invalid');
 	}