Add validation for the rename input

This is mostly the same as the create directory validation.
cockpit-project · Jan 31, 2024 · dadcdca · dadcdca
1 parent 6ffc469
commit dadcdca
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 19 deletions.
diff --git a/src/fileActions.jsx b/src/fileActions.jsx
@@ -252,18 +252,8 @@ export const CreateDirectoryModal = ({ selected, currentPath }) => {
                     <FormGroup fieldId="create-directory-input" label={_("Directory name")}>
                         <TextInput
                           validated={nameError ? "error" : "default"}
-                          value={name} onChange={(_event, val) => {
-                              setErrorMessage(undefined);
-                              setName(val);
-
-                              if (val === "") {
-                                  setNameError(_("Directory name cannot be empty."));
-                              } else if (val.length >= 256) {
-                                  setNameError(_("Directory name too long."));
-                              } else {
-                                  setNameError(null);
-                              }
-                          }}
+                          value={name}
+                          onChange={(_, val) => setDirectoryName(val, setName, setNameError, setErrorMessage)}
                           id="create-directory-input" autoFocus // eslint-disable-line jsx-a11y/no-autofocus
                         />
                         <FormHelper fieldId="create-directory-input" helperTextInvalid={nameError} />
@@ -277,6 +267,7 @@ export const CreateDirectoryModal = ({ selected, currentPath }) => {
 export const RenameItemModal = ({ path, selected, setHistory, setHistoryIndex }) => {
     const Dialogs = useDialogs();
     const [name, setName] = useState(selected.name);
+    const [nameError, setNameError] = useState(null);
     const [errorMessage, setErrorMessage] = useState(undefined);
 
     let title;
@@ -301,11 +292,18 @@ export const RenameItemModal = ({ path, selected, setHistory, setHistoryIndex })
           variant={ModalVariant.medium}
           isOpen
           onClose={Dialogs.close}
-          footer={errorMessage === undefined &&
-          <>
-              <Button variant="primary" onClick={renameItem}>{_("Rename")}</Button>
-              <Button variant="link" onClick={Dialogs.close}>{_("Cancel")}</Button>
-          </>}
+          footer={
+              <>
+                  <Button
+                    variant="primary"
+                    onClick={renameItem}
+                    isDisabled={errorMessage !== undefined || nameError !== null}
+                  >
+                      {_("Rename")}
+                  </Button>
+                  <Button variant="link" onClick={Dialogs.close}>{_("Cancel")}</Button>
+              </>
+          }
         >
             <Stack>
                 {errorMessage !== undefined &&
@@ -315,11 +313,13 @@ export const RenameItemModal = ({ path, selected, setHistory, setHistoryIndex })
                   isInline
                 />}
                 <Form isHorizontal>
-                    <FormGroup label={_("New name")}>
+                    <FormGroup fieldId="rename-item-input" label={_("New name")}>
                         <TextInput
-                          value={name} onChange={(_, val) => setName(val)}
+                          value={name}
+                          onChange={(_, val) => setDirectoryName(val, setName, setNameError, setErrorMessage)}
                           id="rename-item-input"
                         />
+                        <FormHelper fieldId="rename-item-input" helperTextInvalid={nameError} />
                     </FormGroup>
                 </Form>
             </Stack>
@@ -568,3 +568,16 @@ export const EditPermissionsModal = ({ selected, path }) => {
         </Modal>
     );
 };
+
+const setDirectoryName = (val, setName, setNameError, setErrorMessage) => {
+    setErrorMessage(undefined);
+    setName(val);
+
+    if (val === "") {
+        setNameError(_("Directory name cannot be empty."));
+    } else if (val.length >= 256) {
+        setNameError(_("Directory name too long."));
+    } else {
+        setNameError(null);
+    }
+};
diff --git a/test/check-application b/test/check-application
@@ -483,6 +483,21 @@ class TestNavigator(testlib.MachineCase):
 
         self.enter_navigator()
 
+        # validation
+        b.click("#dropdown-menu")
+        b.click("#rename-item")
+        b.set_input_text("#rename-item-input", "test")
+        b.set_input_text("#rename-item-input", "")
+        b.wait_visible("button.pf-m-primary:disabled")
+        b.wait_in_text("#rename-item-input-helper", "Directory name cannot be empty.")
+
+        b.set_input_text("#rename-item-input", "a" * 256)
+        b.wait_visible("button.pf-m-primary:disabled")
+        b.wait_in_text("#rename-item-input-helper", "Directory name too long.")
+        b.set_input_text("#rename-item-input", "test")
+        b.wait_visible("button.pf-m-primary:not(:disabled)")
+        b.click(".pf-v5-c-modal-box__footer button.pf-m-link")  # cancel
+
         # Rename file
         m.execute("touch /home/admin/newfile")
         self.rename_item(b, "newfile", "newfile1")