diff --git a/public/app/features/browse-dashboards/components/NewFolderForm.tsx b/public/app/features/browse-dashboards/components/NewFolderForm.tsx index 25ee5b5282f..a5c8fdb1043 100644 --- a/public/app/features/browse-dashboards/components/NewFolderForm.tsx +++ b/public/app/features/browse-dashboards/components/NewFolderForm.tsx @@ -28,18 +28,6 @@ export function NewFolderForm({ onCancel, onConfirm }: Props) { 'browse-dashboards.action.new-folder-name-required-phrase', 'Folder name is required.' ); - const validateFolderName = async (folderName: string) => { - try { - await validationSrv.validateNewFolderName(folderName); - return true; - } catch (e) { - if (e instanceof Error) { - return e.message; - } else { - throw e; - } - } - }; const fieldNameLabel = t('browse-dashboards.new-folder-form.name-label', 'Folder name'); @@ -75,3 +63,16 @@ export function NewFolderForm({ onCancel, onConfirm }: Props) { ); } + +export async function validateFolderName(folderName: string) { + try { + await validationSrv.validateNewFolderName(folderName); + return true; + } catch (e) { + if (e instanceof Error) { + return e.message; + } else { + throw e; + } + } +} diff --git a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx index f79cb371636..f7f141fac01 100644 --- a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx +++ b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx @@ -1,22 +1,26 @@ +import { css } from '@emotion/css'; import { useEffect } from 'react'; import { FormProvider, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom-v5-compat'; -import { AppEvents } from '@grafana/data'; +import { AppEvents, GrafanaTheme2 } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { getAppEvents } from '@grafana/runtime'; -import { Alert, Button, Field, Input, Stack } from '@grafana/ui'; +import { Alert, Text, Button, Field, Icon, Input, Stack, useStyles2 } from '@grafana/ui'; import { Folder } from 'app/api/clients/folder/v1beta1'; import { RepositoryView, useCreateRepositoryFilesWithPathMutation } from 'app/api/clients/provisioning/v0alpha1'; import { AnnoKeySourcePath, Resource } from 'app/features/apiserver/types'; import { ResourceEditFormSharedFields } from 'app/features/dashboard-scene/components/Provisioned/ResourceEditFormSharedFields'; import { BaseProvisionedFormData } from 'app/features/dashboard-scene/saving/shared'; -import { validationSrv } from 'app/features/manage-dashboards/services/ValidationSrv'; import { PROVISIONING_URL } from 'app/features/provisioning/constants'; import { usePullRequestParam } from 'app/features/provisioning/hooks/usePullRequestParam'; import { FolderDTO } from 'app/types/folders'; import { useProvisionedFolderFormData } from '../hooks/useProvisionedFolderFormData'; + +import { validateFolderName } from './NewFolderForm'; +import { formatFolderName, hasFolderNameCharactersToReplace } from './utils'; + interface FormProps extends Props { initialValues: BaseProvisionedFormData; repository?: RepositoryView; @@ -40,7 +44,7 @@ function FormContent({ initialValues, repository, workflowOptions, folder, isGit }); const { handleSubmit, watch, register, formState } = methods; - const [workflow, ref] = watch(['workflow', 'ref']); + const [workflow, ref, title] = watch(['workflow', 'ref', 'title']); // TODO: replace with useProvisionedRequestHandler hook useEffect(() => { @@ -82,18 +86,6 @@ function FormContent({ initialValues, repository, workflowOptions, folder, isGit } }, [request.isSuccess, request.isError, request.error, ref, request.data, workflow, navigate, repository, onDismiss]); - const validateFolderName = async (folderName: string) => { - try { - await validationSrv.validateNewFolderName(folderName); - return true; - } catch (e) { - if (e instanceof Error) { - return e.message; - } - return t('browse-dashboards.new-provisioned-folder-form.error-invalid-folder-name', 'Invalid folder name'); - } - }; - const doSave = async ({ ref, title, workflow, comment }: BaseProvisionedFormData) => { const repoName = repository?.name; if (!title || !repoName) { @@ -102,10 +94,7 @@ function FormContent({ initialValues, repository, workflowOptions, folder, isGit const basePath = folder?.metadata?.annotations?.[AnnoKeySourcePath] ?? ''; // Convert folder title to filename format (lowercase, replace spaces with hyphens) - const titleInFilenameFormat = title - .toLowerCase() - .replace(/\s+/g, '-') - .replace(/[^a-z0-9-]/g, ''); + const titleInFilenameFormat = formatFolderName(title); // TODO: this is currently not working, issue created https://github.com/grafana/git-ui-sync-project/issues/314 const prefix = basePath ? `${basePath}/` : ''; const path = `${prefix}${titleInFilenameFormat}/`; @@ -163,6 +152,7 @@ function FormContent({ initialValues, repository, workflowOptions, folder, isGit id="folder-name-input" /> + ); } + +function FolderNamePreviewMessage({ folderName }: { folderName: string }) { + const styles = useStyles2(getStyles); + const isValidFolderName = + folderName.length && hasFolderNameCharactersToReplace(folderName) && validateFolderName(folderName); + + if (!isValidFolderName) { + return null; + } + + return ( +
+ + + {t( + 'browse-dashboards.new-provisioned-folder-form.text-your-folder-will-be-created-as', + 'Your folder will be created as {{folderName}}', + { + folderName: formatFolderName(folderName), + } + )} + +
+ ); +} + +const getStyles = (theme: GrafanaTheme2) => { + return { + folderNameMessage: css({ + display: 'flex', + alignItems: 'center', + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.success.text, + }), + }; +}; diff --git a/public/app/features/browse-dashboards/components/utils.test.ts b/public/app/features/browse-dashboards/components/utils.test.ts new file mode 100644 index 00000000000..2bf48e3d329 --- /dev/null +++ b/public/app/features/browse-dashboards/components/utils.test.ts @@ -0,0 +1,124 @@ +import { formatFolderName, hasFolderNameCharactersToReplace } from './utils'; + +describe('formatFolderName', () => { + it('should handle empty string', () => { + expect(formatFolderName('')).toBe(''); + }); + + it('should convert uppercase to lowercase', () => { + expect(formatFolderName('MyFolder')).toBe('myfolder'); + expect(formatFolderName('UPPERCASE')).toBe('uppercase'); + expect(formatFolderName('MiXeD cAsE')).toBe('mixed-case'); + }); + + it('should replace whitespace with hyphens', () => { + expect(formatFolderName('folder name')).toBe('folder-name'); + expect(formatFolderName('folder name')).toBe('folder-name'); // multiple spaces + expect(formatFolderName('folder\tname')).toBe('folder-name'); // tab + expect(formatFolderName('folder\nname')).toBe('folder-name'); // newline + expect(formatFolderName(' folder name ')).toBe('folder-name'); // leading/trailing spaces + }); + + it('should remove special characters', () => { + expect(formatFolderName('folder@name')).toBe('foldername'); + expect(formatFolderName('folder!@#$%^&*()name')).toBe('foldername'); + expect(formatFolderName('folder_name')).toBe('foldername'); + expect(formatFolderName('folder.name')).toBe('foldername'); + expect(formatFolderName('folder/name')).toBe('foldername'); + }); + + it('should preserve numbers and hyphens', () => { + expect(formatFolderName('folder-123')).toBe('folder-123'); + expect(formatFolderName('folder123')).toBe('folder123'); + expect(formatFolderName('123-folder')).toBe('123-folder'); + expect(formatFolderName('folder-name-123')).toBe('folder-name-123'); + }); + + it('should handle complex mixed cases', () => { + expect(formatFolderName('My Folder @2023!')).toBe('my-folder-2023'); + expect(formatFolderName(' FOLDER_NAME with-123 ')).toBe('foldername-with-123'); + expect(formatFolderName('Test@Folder#Name$123')).toBe('testfoldername123'); + expect(formatFolderName('Multiple Spaces Between')).toBe('multiple-spaces-between'); + }); + + it('should handle strings with only special characters', () => { + expect(formatFolderName('!@#$%^&*()')).toBe(''); + expect(formatFolderName('___')).toBe(''); + expect(formatFolderName('...')).toBe(''); + }); + + it('should handle strings with only whitespace', () => { + expect(formatFolderName(' ')).toBe(''); + expect(formatFolderName('\t\n\r')).toBe(''); + }); + + it('should handle already formatted names', () => { + expect(formatFolderName('already-formatted')).toBe('already-formatted'); + expect(formatFolderName('folder123')).toBe('folder123'); + expect(formatFolderName('test-folder-name-123')).toBe('test-folder-name-123'); + }); +}); + +describe('hasFolderNameCharactersToReplace', () => { + it('should return false for non-string inputs', () => { + // @ts-expect-error + expect(hasFolderNameCharactersToReplace(null)).toBe(false); + // @ts-expect-error + expect(hasFolderNameCharactersToReplace(undefined)).toBe(false); + // @ts-expect-error + expect(hasFolderNameCharactersToReplace(123)).toBe(false); + // @ts-expect-error + expect(hasFolderNameCharactersToReplace({})).toBe(false); + // @ts-expect-error + expect(hasFolderNameCharactersToReplace([])).toBe(false); + }); + + it('should return false for empty string', () => { + expect(hasFolderNameCharactersToReplace('')).toBe(false); + }); + + it('should return false for valid folder names', () => { + expect(hasFolderNameCharactersToReplace('validname')).toBe(false); + expect(hasFolderNameCharactersToReplace('folder123')).toBe(false); + expect(hasFolderNameCharactersToReplace('test-folder-name')).toBe(false); + expect(hasFolderNameCharactersToReplace('folder-123')).toBe(false); + expect(hasFolderNameCharactersToReplace('123-folder')).toBe(false); + expect(hasFolderNameCharactersToReplace('a')).toBe(false); + expect(hasFolderNameCharactersToReplace('1')).toBe(false); + }); + + it('should return true for names with whitespace', () => { + expect(hasFolderNameCharactersToReplace('folder name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder\tname')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder\nname')).toBe(true); + expect(hasFolderNameCharactersToReplace(' folder')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder ')).toBe(true); + expect(hasFolderNameCharactersToReplace(' ')).toBe(true); + }); + + it('should return true for names with uppercase letters', () => { + expect(hasFolderNameCharactersToReplace('FolderName')).toBe(true); + expect(hasFolderNameCharactersToReplace('UPPERCASE')).toBe(true); + expect(hasFolderNameCharactersToReplace('MiXeD')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder-Name')).toBe(true); + }); + + it('should return true for names with special characters', () => { + expect(hasFolderNameCharactersToReplace('folder@name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder!name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder_name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder.name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder/name')).toBe(true); + expect(hasFolderNameCharactersToReplace('folder#name')).toBe(true); + }); + + it('should return true for mixed cases with multiple issues', () => { + expect(hasFolderNameCharactersToReplace('Test@Folder#Name$123')).toBe(true); + expect(hasFolderNameCharactersToReplace('Multiple Spaces Between')).toBe(true); + }); + + it('should return true for strings with only special characters', () => { + expect(hasFolderNameCharactersToReplace('!@#$%^&*()')).toBe(true); + }); +}); diff --git a/public/app/features/browse-dashboards/components/utils.ts b/public/app/features/browse-dashboards/components/utils.ts index af40b5e2f0f..8f29702bda7 100644 --- a/public/app/features/browse-dashboards/components/utils.ts +++ b/public/app/features/browse-dashboards/components/utils.ts @@ -22,3 +22,38 @@ export function getFolderURL(uid: string) { } return url; } + +export function hasFolderNameCharactersToReplace(folderName: string): boolean { + if (typeof folderName !== 'string') { + return false; + } + + // whitespace that needs to be replaced with hyphens + const hasWhitespace = /\s+/.test(folderName); + + // characters that are not lowercase letters, numbers, or hyphens + const hasInvalidCharacters = /[^a-z0-9-]/.test(folderName); + + return hasWhitespace || hasInvalidCharacters; +} + +export function formatFolderName(folderName?: string): string { + if (typeof folderName !== 'string') { + console.error('Invalid folder name type:', typeof folderName); + return ''; + } + + const result = folderName + .trim() // Remove leading/trailing whitespace first + .toLowerCase() + .replace(/\s+/g, '-') + .replace(/[^a-z0-9-]/g, '') + .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens + + // If the result is empty, return empty string + if (result === '') { + return ''; + } + + return result; +} diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 07558dd8558..2f22f8556d4 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -3550,11 +3550,11 @@ "button-create": "Create", "button-creating": "Creating...", "cancel": "Cancel", - "error-invalid-folder-name": "Invalid folder name", "error-required": "Folder name is required", "folder-name-input-placeholder-enter-folder-name": "Enter folder name", "label-folder-name": "Folder name", "text-pull-request-created": "A pull request has been created with changes to this folder:", + "text-your-folder-will-be-created-as": "Your folder will be created as {{folderName}}", "title-pull-request-created": "Pull request created", "title-this-repository-is-read-only": "This repository is read only" },