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"
},