passbolt-styleguide 3.8.4 → 3.9.0-alpha2

package/src/react-extension/components/Resource/EditResource/EditResource.test.js

@@ -22,9 +22,6 @@ import {defaultProps, mockResource} from "./EditResource.test.data";
 import EditResourcePage from "./EditResource.test.page";
 import "../../../test/lib/crypto/cryptoGetRandomvalues";
 
-beforeEach(() => {
-  jest.resetModules();
-});
 
 describe("See the Edit Resource", () => {
   let page; // The page to test against
@@ -36,18 +33,24 @@ describe("See the Edit Resource", () => {
     id: "8e3874ae-4b40-590b-968a-418f704b9d9a"
   };
 
-  const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
   const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
   describe('As LU I can start adding a password', () => {
+    const mockContextRequest = implementation => jest.spyOn(props.context.port, 'request').mockImplementation(implementation);
     /**
      * I should see the edit password dialog
      */
     beforeEach(() => {
+      jest.useFakeTimers();
+      jest.resetModules();
       props.context.setContext({passwordEditDialogProps});
       page = new EditResourcePage(props);
     });
 
+    afterEach(() => {
+      jest.clearAllTimers();
+    });
+
     it('matches the styleguide', () => {
       // Dialog title exists and correct
       expect(page.passwordEdit.exists()).toBeTruthy();
@@ -126,7 +129,8 @@ describe("See the Edit Resource", () => {
     });
 
     it('requests the addon to edit a resource with encrypted description when clicking on the submit button.', async() => {
-      expect(page.passwordEdit.exists()).toBeTruthy();
+      //Avoid to block with the beforeMount when checking current password
+      jest.runAllTimers();
       // edit password
       const resourceMeta = {
         name: "Password name",
@@ -143,10 +147,11 @@ describe("See the Edit Resource", () => {
       await waitFor(() => {
         expect(page.passwordEdit.password.disabled).toBeTruthy();
       });
-      page.passwordEdit.fillInput(page.passwordEdit.password, resourceMeta.password);
-      page.passwordEdit.blurInput(page.passwordEdit.password);
+      await page.passwordEdit.fillInputPassword(resourceMeta.password);
+      await page.passwordEdit.blurInput(page.passwordEdit.password);
       expect(page.passwordEdit.complexityText.textContent).not.toBe("Quality");
       expect(page.passwordEdit.progressBar.classList.contains("error")).toBe(false);
+
       page.passwordEdit.fillInput(page.passwordEdit.description, resourceMeta.description);
 
       const requestMockImpl = jest.fn();
@@ -229,7 +234,7 @@ describe("See the Edit Resource", () => {
       await waitFor(() => {
         expect(page.passwordEdit.password.classList).toContain("decrypted");
       });
-      page.passwordEdit.fillInput(page.passwordEdit.password, "");
+      await page.passwordEdit.fillInputPassword("");
       page.passwordEdit.blurInput(page.passwordEdit.password);
       await page.passwordEdit.click(page.passwordEdit.saveButton);
 
@@ -262,7 +267,7 @@ describe("See the Edit Resource", () => {
       await waitFor(() => {
         expect(page.passwordEdit.password.classList).toContain("decrypted");
       });
-      page.passwordEdit.fillInput(page.passwordEdit.password, "password");
+      await page.passwordEdit.fillInputPassword("password");
       page.passwordEdit.blurInput(page.passwordEdit.password);
 
       jest.spyOn(props.context.port, 'request').mockImplementationOnce(() => {
@@ -287,7 +292,7 @@ describe("See the Edit Resource", () => {
       await waitFor(() => {
         expect(page.passwordEdit.password.classList).toContain("decrypted");
       });
-      page.passwordEdit.fillInput(page.passwordEdit.password, "password");
+      await page.passwordEdit.fillInputPassword("password");
       page.passwordEdit.blurInput(page.passwordEdit.password);
 
       // Mock the request function to make it the expected result
@@ -312,14 +317,41 @@ describe("See the Edit Resource", () => {
       expect(props.dialogContext.open).toBeCalled();
     });
 
-    it("As a user I should see a feedback when the password or descriptions fields content is truncated by a field limit", async() => {
-      expect.assertions(2);
-      page.passwordEdit.fillInput(page.passwordEdit.password, 'a'.repeat(4097));
+    it("As a user I should see a feedback when the password, descriptions, name, username or uri fields content is truncated by a field limit", async() => {
+      expect.assertions(5);
+      await page.passwordEdit.fillInputPassword('a'.repeat(4097));
       page.passwordEdit.fillInput(page.passwordEdit.description, 'a'.repeat(10000));
+      page.passwordEdit.fillInput(page.passwordEdit.name, 'a'.repeat(256));
+      page.passwordEdit.fillInput(page.passwordEdit.username, 'a'.repeat(255));
+      page.passwordEdit.fillInput(page.passwordEdit.uri, 'a'.repeat(1025));
+
       await page.passwordEdit.keyUpInput(page.passwordEdit.password);
       await page.passwordEdit.keyUpInput(page.passwordEdit.description);
+      await page.passwordEdit.keyUpInput(page.passwordEdit.username);
+      await page.passwordEdit.keyUpInput(page.passwordEdit.name);
+      await page.passwordEdit.keyUpInput(page.passwordEdit.uri);
+
       expect(page.passwordEdit.passwordWarningMessage.textContent).toEqual(truncatedWarningMessage);
       expect(page.passwordEdit.descriptionWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordEdit.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordEdit.uriWarningMessage.textContent).toEqual(truncatedWarningMessage);
+      expect(page.passwordEdit.usernameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
+
+    it("As a signed-in user editing a password on the application, I should get warn when I enter a pwned password and not be blocked", async() => {
+      expect.assertions(2);
+
+      mockContextRequest(() => Promise.resolve(2));
+      await page.passwordEdit.fillInputPassword('hello-world');
+      await waitFor(() => {});
+      // we expect a warning to inform about powned password
+      expect(page.passwordEdit.pwnedWarningMessage.textContent).toEqual("The password is part of an exposed data breach.");
+
+      mockContextRequest(() => Promise.reject());
+      await page.passwordEdit.fillInputPassword('another test');
+      await waitFor(() => {});
+      // we expect a warning to inform about a network issue
+      expect(page.passwordEdit.pwnedWarningMessage.textContent).toEqual("The pwnedpasswords service is unavailable, your password might be part of an exposed data breach");
     });
   });
 });

package/src/react-extension/components/Resource/EditResource/EditResource.test.page.js

@@ -126,6 +126,13 @@ class PasswordEditPageObject {
     return this._container.querySelector('.dialog-close');
   }
 
+  /**
+   * Returns the pwned warning message
+   */
+  get pwnedWarningMessage() {
+    return this._container.querySelector('.pwned-password.warning-message');
+  }
+
   /**
    * Returns the name input element
    */
@@ -140,6 +147,13 @@ class PasswordEditPageObject {
     return this._container.querySelector('.name.error-message');
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._container.querySelector('.name.warning-message');
+  }
+
   /**
    * Returns the uri input element
    */
@@ -147,6 +161,13 @@ class PasswordEditPageObject {
     return this._container.querySelector('#edit-password-form-uri');
   }
 
+  /**
+   * Returns the uri warning mesage input element
+   */
+  get uriWarningMessage() {
+    return this._container.querySelector('.uri.warning-message');
+  }
+
   /**
    * Returns the username / email input element
    */
@@ -161,6 +182,13 @@ class PasswordEditPageObject {
     return this._container.querySelector('#edit-password-form-password');
   }
 
+  /**
+   * Returns the username warning mesage input element
+   */
+  get usernameWarningMessage() {
+    return this._container.querySelector('.username.warning-message');
+  }
+
   /**
    * Returns the password error mesage input element
    */
@@ -255,8 +283,6 @@ class PasswordEditPageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
-
-
   /**
    * Returns true if the page object exists in the container
    */
@@ -290,6 +316,13 @@ class PasswordEditPageObject {
     fireEvent.change(element, dataInputEvent);
   }
 
+  /** fill the input password with data */
+  async fillInputPassword(data)  {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(this.password, dataInputEvent);
+    jest.runAllTimers();
+  }
+
   /** focus the input element with data */
   focusInput(element)  {
     fireEvent.focus(element);

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetails.js

@@ -24,6 +24,7 @@ import {withAppContext} from "../../../contexts/AppContext";
 import DisplayResourceDetailsActivity from "./DisplayResourceDetailsActivity";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withTranslation, Trans} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayResourceDetails extends React.Component {
   /**
@@ -72,7 +73,7 @@ class DisplayResourceDetails extends React.Component {
   async handlePermalinkClick() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/passwords/view/${this.props.resourceWorkspaceContext.details.resource.id}`;
-    await navigator.clipboard.writeText(permalink);
+    await ClipBoard.copy(permalink, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The permalink has been copied to clipboard"));
   }
 

package/src/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsInformation.js

@@ -25,6 +25,7 @@ import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import sanitizeUrl, {urlProtocols} from "../../../lib/Sanitize/sanitizeUrl";
 import {Trans, withTranslation} from "react-i18next";
 import {DateTime} from "luxon";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayResourceDetailsInformation extends React.Component {
   /**
@@ -125,7 +126,7 @@ class DisplayResourceDetailsInformation extends React.Component {
    * Handle when the user select the username of the resource
    */
   async handleUsernameClickEvent() {
-    await navigator.clipboard.writeText(this.resource.username);
+    await ClipBoard.copy(this.resource.username, this.props.context.port);
     this.displaySuccessNotification(this.translate("The username has been copied to clipboard"));
   }
 
@@ -211,7 +212,7 @@ class DisplayResourceDetailsInformation extends React.Component {
         return;
       }
     }
-    await navigator.clipboard.writeText(password);
+    await ClipBoard.copy(password, this.props.context.port);
     await this.props.resourceWorkspaceContext.onResourceCopied();
     await this.props.actionFeedbackContext.displaySuccess(this.translate("The secret has been copied to clipboard"));
   }

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.js

@@ -21,6 +21,9 @@ import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelBut
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withDialog} from "../../../contexts/DialogContext";
 import {Trans, withTranslation} from "react-i18next";
+import {maxSizeValidation} from "../../../lib/Error/InputValidator";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {RESOURCE_NAME_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
 
 class CreateResourceFolder extends Component {
   /**
@@ -58,7 +61,8 @@ class CreateResourceFolder extends Component {
 
       // Fields and errors
       name: this.translate("loading..."),
-      nameError: false
+      nameError: false,
+      nameWarning: "",
     };
   }
 
@@ -78,6 +82,7 @@ class CreateResourceFolder extends Component {
     this.handleClose = this.handleClose.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
+    this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
   }
 
   /**
@@ -254,6 +259,14 @@ class CreateResourceFolder extends Component {
     });
   }
 
+  /**
+   * Handle name input keyUp event.
+   */
+  handleNameInputKeyUp() {
+    const nameWarning = maxSizeValidation(this.state.name, RESOURCE_NAME_MAX_LENGTH, this.translate);
+    this.setState({nameWarning});
+  }
+
   /**
    * Return true if the form has some validation error
    * @returns {boolean}
@@ -289,18 +302,26 @@ class CreateResourceFolder extends Component {
         <form className="folder-create-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="folder-name-input"><Trans>Name</Trans></label>
+              <label htmlFor="folder-name-input"><Trans>Name</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}
                 type="text" value={this.state.name} placeholder={this.translate("Untitled folder")}
                 maxLength="256" required="required"
                 disabled={this.hasAllInputDisabled()}
                 onChange={this.handleInputChange}
+                onKeyUp={this.handleNameInputKeyUp}
                 autoComplete='off' autoFocus={true}
               />
               {this.state.nameError &&
               <div className="error-message">{this.state.nameError}</div>
               }
+              {this.state.nameWarning && (
+                <div className="name warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+                </div>
+              )}
             </div>
           </div>
           <div className="submit-wrapper clearfix">

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.test.js

@@ -22,6 +22,7 @@ import NotifyError from "../../Common/Error/NotifyError/NotifyError";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("Create Folder", () => {
   let page; // The page to test against
@@ -157,5 +158,12 @@ describe("Create Folder", () => {
       };
       await page.create({name: 'My super folder'}, inProgressFn);
     });
+
+    it("As a user I should see a feedback when name field content is truncated by a field limit", async() => {
+      expect.assertions(1);
+      page.fillInput(page.inputName, 'a'.repeat(256));
+      await page.keyUpInput(page.inputName);
+      expect(page.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

package/src/react-extension/components/ResourceFolder/CreateResourceFolder/CreateResourceFolder.test.page.js

@@ -38,12 +38,18 @@ export default class CreateResourceFolderPage {
     );
   }
 
+  /**
+   * Set a name to the folder name input
+   */
+  get inputName() {
+    return this._page.container.querySelector('#folder-name-input');
+  }
+
   /**
    * Set a name to the folder name input
    */
   set name(value) {
-    const input = this._page.container.querySelector('#folder-name-input');
-    fireEvent.change(input, {target: {value}});
+    fireEvent.change(this.inputName, {target: {value}});
   }
 
   /**
@@ -102,6 +108,13 @@ export default class CreateResourceFolderPage {
     return this._page.container.querySelector(".dialog-close");
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._page.container.querySelector('.name.warning-message');
+  }
+
   /**
    * Create a folder with the given information
    * @param folder The folder information to create
@@ -114,6 +127,17 @@ export default class CreateResourceFolderPage {
     await waitFor(inProgressFn);
   }
 
+  /** fill the input element with data */
+  fillInput(element, data)  {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(element, dataInputEvent);
+  }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
+
   /**
    * Cancels the create operation
    */

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.js

@@ -22,6 +22,9 @@ import FormCancelButton from "../../Common/Inputs/FormSubmitButton/FormCancelBut
 import {withDialog} from "../../../contexts/DialogContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {maxSizeValidation} from '../../../lib/Error/InputValidator';
+import {RESOURCE_FOLDER_NAME_MAX_LENGTH} from '../../../../shared/constants/inputs.const';
 
 class RenameResourceFolder extends Component {
   /**
@@ -61,6 +64,7 @@ class RenameResourceFolder extends Component {
       // Fields and errors
       name: this.translate("loading..."),
       nameError: false,
+      nameWarning: "",
     };
   }
 
@@ -108,6 +112,7 @@ class RenameResourceFolder extends Component {
     this.handleClose = this.handleClose.bind(this);
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleNameInputKeyUp = this.handleNameInputKeyUp.bind(this);
   }
 
   /**
@@ -284,6 +289,14 @@ class RenameResourceFolder extends Component {
     });
   }
 
+  /**
+   * Handle name input keyUp event.
+   */
+  handleNameInputKeyUp() {
+    const nameWarning = maxSizeValidation(this.state.name, RESOURCE_FOLDER_NAME_MAX_LENGTH, this.translate);
+    this.setState({nameWarning});
+  }
+
   /**
    * Return true if the form has some validation error
    * @returns {boolean}
@@ -319,18 +332,26 @@ class RenameResourceFolder extends Component {
         <form className="folder-rename-form" onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="folder-name-input"><Trans>Folder name</Trans></label>
+              <label htmlFor="folder-name-input"><Trans>Folder name</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="folder-name-input" name="name"
                 ref={this.nameRef}
                 type="text" value={this.state.name} placeholder={this.translate("Untitled folder")}
                 maxLength="256" required="required"
                 onChange={this.handleInputChange}
+                onKeyUp={this.handleNameInputKeyUp}
                 disabled={this.hasAllInputDisabled()}
                 autoComplete="off" autoFocus={true}
               />
               {this.state.nameError &&
                 <div className="name error-message">{this.state.nameError}</div>
               }
+              {this.state.nameWarning && (
+                <div className="name warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+                </div>
+              )}
             </div>
           </div>
           <div className="submit-wrapper clearfix">

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.js

@@ -22,6 +22,7 @@ import RenameResourceFolderPage from "./RenameResourceFolder.test.page";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("Rename Folder", () => {
   let page; // The page to test against
@@ -157,5 +158,12 @@ describe("Rename Folder", () => {
       };
       await page.rename({name: 'My super folder'}, inProgressFn);
     });
+
+    it("As a user I should see a feedback when name field content is truncated by a field limit", async() => {
+      expect.assertions(1);
+      page.fillInput(page.inputName, 'a'.repeat(256));
+      await page.keyUpInput(page.inputName);
+      expect(page.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

package/src/react-extension/components/ResourceFolder/RenameResourceFolder/RenameResourceFolder.test.page.js

@@ -38,13 +38,18 @@ export default class RenameResourceFolderPage {
     );
   }
 
+  /**
+   * Set a name to the folder name input
+   */
+  get inputName() {
+    return this._page.container.querySelector('#folder-name-input');
+  }
 
   /**
    * Set a name to the folder name input
    */
   set name(value) {
-    const input = this._page.container.querySelector('#folder-name-input');
-    fireEvent.change(input, {target: {value}});
+    fireEvent.change(this.inputName, {target: {value}});
   }
 
   /**
@@ -103,6 +108,13 @@ export default class RenameResourceFolderPage {
     return this._page.container.querySelector(".dialog-close");
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._page.container.querySelector('.name.warning-message');
+  }
+
   /**
    * Rename a folder with the given information
    * @param folder The folder information to rename
@@ -115,6 +127,17 @@ export default class RenameResourceFolderPage {
     await waitFor(inProgressFn);
   }
 
+  /** fill the input element with data */
+  fillInput(element, data)  {
+    const dataInputEvent = {target: {value: data}};
+    fireEvent.change(element, dataInputEvent);
+  }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
+
   /**
    * Cancels the create operation
    */

package/src/react-extension/components/ResourceFolderDetails/DisplayResourceFolderDetails/DisplayResourceFolderDetails.js

@@ -21,6 +21,7 @@ import {withAppContext} from "../../../contexts/AppContext";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {Trans, withTranslation} from "react-i18next";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 class DisplayResourceFolderDetails extends React.Component {
   /**
@@ -53,7 +54,7 @@ class DisplayResourceFolderDetails extends React.Component {
   async handlePermalinkClick() {
     const baseUrl = this.props.context.userSettings.getTrustedDomain();
     const permalink = `${baseUrl}/app/folders/view/${this.props.resourceWorkspaceContext.details.folder.id}`;
-    await navigator.clipboard.writeText(permalink);
+    await ClipBoard.copy(permalink, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The permalink has been copied to clipboard"));
   }
 

package/src/react-extension/components/ResourcePassword/GenerateResourcePassword/GenerateResourcePassword.js

@@ -28,6 +28,7 @@ import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withResourcePasswordGeneratorContext} from "../../../contexts/ResourcePasswordGeneratorContext";
 import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
+import ClipBoard from '../../../../shared/lib/Browser/clipBoard';
 
 /**
  * This component generate password or passphrase following configuration
@@ -142,7 +143,7 @@ class GenerateResourcePassword extends Component {
    * Whenever one wants to copy the password
    */
   async handleCopyPassword() {
-    await navigator.clipboard.writeText(this.state.password);
+    await ClipBoard.copy(this.state.password, this.props.context.port);
     this.props.actionFeedbackContext.displaySuccess(this.translate("The password has been copied to clipboard"));
   }
 

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.js

@@ -24,6 +24,9 @@ import {withLoading} from "../../../contexts/LoadingContext";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import {withRouter} from "react-router-dom";
 import {Trans, withTranslation} from "react-i18next";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {maxSizeValidation} from '../../../lib/Error/InputValidator';
+import {RESOURCE_TAG_MAX_LENGTH} from "../../../../shared/constants/inputs.const";
 
 /**
  * Component allows the user to edit a tag from a dialog
@@ -40,6 +43,7 @@ class EditResourceTag extends Component {
     return {
       name: '',
       nameError: "",
+      nameWarning: "",
       processing: false
     };
   }
@@ -97,6 +101,8 @@ class EditResourceTag extends Component {
   handleNameInputKeyUp() {
     const state = this.validateNameInput();
     this.setState(state);
+    const nameWarning = maxSizeValidation(this.state.name, RESOURCE_TAG_MAX_LENGTH, this.translate);
+    this.setState({nameWarning});
   }
 
   /**
@@ -265,7 +271,9 @@ class EditResourceTag extends Component {
         <form onSubmit={this.handleFormSubmit} noValidate>
           <div className="form-content">
             <div className={`input text required ${this.state.nameError ? "error" : ""} ${this.hasAllInputDisabled() ? 'disabled' : ''}`}>
-              <label htmlFor="edit-tag-form-name"><Trans>Tag name</Trans></label>
+              <label htmlFor="edit-tag-form-name"><Trans>Tag name</Trans>{this.state.nameWarning &&
+                  <Icon name="exclamation"/>
+              }</label>
               <input id="edit-tag-form-name" name="name" type="text" value={this.state.name}
                 onKeyUp={this.handleNameInputKeyUp} onChange={this.handleInputChange}
                 disabled={this.state.processing} ref={this.nameInputRef} className="required fluid"
@@ -274,6 +282,11 @@ class EditResourceTag extends Component {
               {this.state.nameError &&
                   <div className="name error-message">{this.state.nameError}</div>
               }
+              {this.state.nameWarning && (
+                <div className="name warning-message">
+                  <strong><Trans>Warning:</Trans></strong> {this.state.nameWarning}
+                </div>
+              )}
             </div>
           </div>
           <div className="submit-wrapper clearfix">

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.js

@@ -24,6 +24,7 @@ import {defaultAppContext, defaultProps} from "./EditResourceTag.test.data";
 beforeEach(() => {
   jest.resetModules();
 });
+const truncatedWarningMessage = "Warning: this is the maximum size for this field, make sure your data was not truncated.";
 
 describe("See the Edit Tag Dialog", () => {
   let page; // The page to test against
@@ -148,5 +149,12 @@ describe("See the Edit Tag Dialog", () => {
       expect(page.tagEdit.errorDialog).not.toBeNull();
       expect(page.tagEdit.errorDialogMessage).not.toBeNull();
     });
+
+    it("As a user I should see a feedback when name field content is truncated by a field limit", async() => {
+      expect.assertions(1);
+      page.tagEdit.fillInput(page.tagEdit.tagName, 'a'.repeat(255));
+      await page.tagEdit.keyUpInput(page.tagEdit.tagName);
+      expect(page.tagEdit.nameWarningMessage.textContent).toEqual(truncatedWarningMessage);
+    });
   });
 });

package/src/react-extension/components/ResourceTag/EditResourceTag/EditResourceTag.test.page.js

@@ -154,6 +154,13 @@ class TagEditPageObject {
     return this._container.querySelector('.error-dialog .dialog .dialog-content .form-content');
   }
 
+  /**
+   * Returns the name warning mesage input element
+   */
+  get nameWarningMessage() {
+    return this._container.querySelector('.name.warning-message');
+  }
+
   /**
    * Returns true if the page object exists in the container
    */
@@ -186,4 +193,9 @@ class TagEditPageObject {
     const dataInputEvent = {target: {value: data}};
     fireEvent.change(element, dataInputEvent);
   }
+
+  /** on keypup element */
+  keyUpInput(component)  {
+    fireEvent.keyUp(component, {keyCode: 38});
+  }
 }