NewProvisionedFolderForm: Preview folder name message (#107739)

* NewProvisionedFolderForm: pass in empty title for new folder form

* NewProvisionedFolderForm: preview folder name

* i18n, fix test

* Added test

* added todo

* PR comment

* i18n

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) {
     </form>
   );
 }
+
+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;
+    }
+  }
+}

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"
             />
           </Field>
+          <FolderNamePreviewMessage folderName={title} />
 
           <ResourceEditFormSharedFields
             resourceType="folder"
@@ -229,3 +219,39 @@ 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;
+  }
+
+  return (
+    <div className={styles.folderNameMessage}>
+      <Icon name="check-circle" type="solid" />
+      <Text color="success">
+        {t(
+          'browse-dashboards.new-provisioned-folder-form.text-your-folder-will-be-created-as',
+          'Your folder will be created as {{folderName}}',
+          {
+            folderName: formatFolderName(folderName),
+          }
+        )}
+      </Text>
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    folderNameMessage: css({
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.success.text,
+    }),
+  };
+};

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);
+  });
+});

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;
+}

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