diff --git a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.test.tsx b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.test.tsx index 9ee6d728426..de712d32b7e 100644 --- a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.test.tsx +++ b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.test.tsx @@ -222,25 +222,6 @@ describe('NewProvisionedFolderForm', () => { expect(screen.getByRole('textbox', { name: /branch/i })).toBeInTheDocument(); }); - it('should validate folder name', async () => { - (validationSrv.validateNewFolderName as jest.Mock).mockRejectedValue(new Error('Folder name already exists')); - - const { user } = setup(); - - const folderNameInput = screen.getByRole('textbox', { name: /folder name/i }); - await user.clear(folderNameInput); - await user.type(folderNameInput, 'Existing Folder'); - - // Submit the form - const submitButton = screen.getByRole('button', { name: /^create$/i }); - await user.click(submitButton); - - // Wait for validation error to appear - await waitFor(() => { - expect(screen.getByText('Folder name already exists')).toBeInTheDocument(); - }); - }); - it('should validate branch name', async () => { const { user } = setup(); @@ -297,7 +278,7 @@ describe('NewProvisionedFolderForm', () => { expect.objectContaining({ ref: undefined, // write workflow uses undefined ref name: 'test-repo', - path: '/dashboards/new-test-folder/', + path: '/dashboards/New Test Folder/', message: 'Creating a new test folder', body: { title: 'New Test Folder', @@ -350,7 +331,7 @@ describe('NewProvisionedFolderForm', () => { expect.objectContaining({ ref: 'feature/new-folder', name: 'test-repo', - path: '/dashboards/branch-folder/', + path: '/dashboards/Branch Folder/', message: 'Create folder: Branch Folder', body: { title: 'Branch Folder', diff --git a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx index bd452e3ba72..510c506ce75 100644 --- a/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx +++ b/public/app/features/browse-dashboards/components/NewProvisionedFolderForm.tsx @@ -1,11 +1,10 @@ -import { css } from '@emotion/css'; import { FormProvider, useForm } from 'react-hook-form'; import { useNavigate } from 'react-router-dom-v5-compat'; -import { AppEvents, GrafanaTheme2 } from '@grafana/data'; +import { AppEvents } from '@grafana/data'; import { Trans, t } from '@grafana/i18n'; import { getAppEvents } from '@grafana/runtime'; -import { Alert, Text, Button, Field, Icon, Input, Stack, useStyles2 } from '@grafana/ui'; +import { Alert, Button, Field, Input, Stack } 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'; @@ -23,8 +22,6 @@ import { FolderDTO } from 'app/types/folders'; import { useProvisionedFolderFormData } from '../hooks/useProvisionedFolderFormData'; import { RepoInvalidStateBanner } from './BulkActions/RepoInvalidStateBanner'; -import { validateFolderName } from './NewFolderForm'; -import { formatFolderName, hasFolderNameCharactersToReplace } from './utils'; interface FormProps extends Props { initialValues: BaseProvisionedFormData; @@ -48,7 +45,7 @@ function FormContent({ initialValues, repository, workflowOptions, folder, onDis }); const { handleSubmit, watch, register, formState } = methods; - const [workflow, title] = watch(['workflow', 'title']); + const [workflow] = watch(['workflow']); const onBranchSuccess = ({ urls }: { urls?: Record }, info: ProvisionedOperationInfo) => { const prUrl = urls?.newPullRequestURL; @@ -109,12 +106,8 @@ function FormContent({ initialValues, repository, workflowOptions, folder, onDis return; } const basePath = folder?.metadata?.annotations?.[AnnoKeySourcePath] ?? ''; - - // Convert folder title to filename format (lowercase, replace spaces with hyphens) - 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}/`; + const path = `${prefix}${title}/`; const folderModel = { title, @@ -154,13 +147,13 @@ function FormContent({ initialValues, repository, workflowOptions, folder, onDis - - - + @@ -245,38 +237,20 @@ export function NewProvisionedFolderForm({ parentFolder, onDismiss }: Props) { ); } -function FolderNamePreviewMessage({ folderName }: { folderName: string }) { - const styles = useStyles2(getStyles); - const isValidFolderName = - folderName.length && hasFolderNameCharactersToReplace(folderName) && validateFolderName(folderName); - - if (!isValidFolderName) { - return null; +function validateProvisionedFolderName(folderName: string): string | true { + if (!folderName || typeof folderName !== 'string') { + return t('browse-dashboards.new-provisioned-folder-form.error-required', 'Folder name is required'); } - 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), - } - )} - -
- ); -} + // Backend allows: a-zA-Z0-9 _- (no dots, no forward slash for folder names) + const invalidCharRegex = /[^a-zA-Z0-9 _-]/; -const getStyles = (theme: GrafanaTheme2) => { - return { - folderNameMessage: css({ - display: 'flex', - alignItems: 'center', - fontSize: theme.typography.bodySmall.fontSize, - color: theme.colors.success.text, - }), - }; -}; + if (invalidCharRegex.test(folderName)) { + return t( + 'browse-dashboards.new-provisioned-folder-form.error-invalid-characters', + 'Folder name contains invalid characters. Only letters, numbers, spaces, underscores, and hyphens are allowed.' + ); + } + + return true; // Valid +} diff --git a/public/app/features/browse-dashboards/components/utils.test.ts b/public/app/features/browse-dashboards/components/utils.test.ts deleted file mode 100644 index 2bf48e3d329..00000000000 --- a/public/app/features/browse-dashboards/components/utils.test.ts +++ /dev/null @@ -1,124 +0,0 @@ -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 ef72de4bbd7..de03451146f 100644 --- a/public/app/features/browse-dashboards/components/utils.ts +++ b/public/app/features/browse-dashboards/components/utils.ts @@ -33,41 +33,6 @@ 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; -} - // Collect selected dashboard and folder from the DashboardTreeSelection // This is used to prepare the items for bulk delete operation. export function collectSelectedItems(selectedItems: Omit) { diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index d6a38f55e6e..bdc8663bbd9 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -3632,11 +3632,11 @@ "button-create": "Create", "button-creating": "Creating...", "cancel": "Cancel", + "error-invalid-characters": "Folder name contains invalid characters. Only letters, numbers, spaces, underscores, and hyphens are allowed.", "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" },