Merge branch 'bugfix/ARTESCA-12101-incorrect-system-behavior-when-cre…

…ating-a-folder' into q/3.0

src/react/databrowser/objects/FolderCreate.tsx

@@ -54,6 +54,8 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
     setFolderName(e.target.value);
   };
 
+  const isFolderNameValid = folderName && !folderName.startsWith('/');
+  const folderNameInvalidMsg = 'The folder name is not valid.';
   return (
     <Modal
       close={cancel}
@@ -70,10 +72,11 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
             />
             <Button
               id="folder-create-save-button"
-              disabled={loading || !folderName}
+              disabled={loading || !isFolderNameValid}
               variant="secondary"
               onClick={save}
               label="Save"
+              tooltip={!isFolderNameValid && { overlay: folderNameInvalidMsg }}
             />
           </Stack>
         </Wrap>
@@ -91,14 +94,20 @@ const FolderCreate = ({ bucketName, prefixWithSlash }: Props) => {
             setTimeout(() => input.focus());
           }
         }}
+        error={!isFolderNameValid && folderNameInvalidMsg}
         onChange={handleChange}
       />
       <Description>
         <InfoMessage
           title="Creating a folder"
-          content='When you create a folder, Data Browser creates an object with the
-          above name appended by suffix "/" and that object is
-          displayed as a folder in the Data Browser.'
+          content={
+            <>
+              Ensure the folder name does not begin with a slash. <br />
+              When you create a folder, Data Browser creates an object with the
+              above name appended by suffix "/" and that object is displayed as
+              a folder in the Data Browser.
+            </>
+          }
         />
       </Description>
     </Modal>

src/react/databrowser/objects/__tests__/FolderCreate.test.tsx

@@ -78,4 +78,19 @@ describe('FolderCreate', () => {
     );
     expect(createFolderMock).toHaveBeenCalledTimes(1);
   });
+
+  it('should disable the save button if the folder name is invalid', async () => {
+    renderWithRouterMatch(
+      <FolderCreate bucketName={BUCKET_NAME} prefixWithSlash="" />,
+      undefined,
+      {
+        uiObjects: {
+          showFolderCreate: true,
+        },
+      },
+    );
+
+    await userEvent.type(screen.getByRole('textbox'), '/' + FILE_NAME);
+    expect(screen.getByRole('button', { name: /save/i })).toBeDisabled();
+  });
 });