Deploying to gh-pages from @ 372af59 🚀

iframe.html

@@ -363,4 +363,4 @@
 
 
 
-            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook/stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./.storybook/stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.d29908dc.iframe.bundle.js"></script><script src="483.71011450.iframe.bundle.js"></script><script src="main.98c816d4.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./.storybook/stories","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./.storybook/stories","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.d29908dc.iframe.bundle.js"></script><script src="483.71011450.iframe.bundle.js"></script><script src="main.bce63db8.iframe.bundle.js"></script></body></html>

project.json

@@ -1 +1 @@
-{"generatedAt":1706533872434,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.2.3"},"language":"javascript","storybookPackages":{},"framework":{},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"options":{"backgrounds":false},"version":"6.5.16"}}}
+{"generatedAt":1706803636414,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"packageManager":{"type":"npm","version":"10.2.3"},"language":"javascript","storybookPackages":{},"framework":{},"addons":{"@storybook/addon-links":{"version":"6.5.16"},"@storybook/addon-essentials":{"options":{"backgrounds":false},"version":"6.5.16"}}}

react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.js

@@ -151,7 +151,7 @@ class ConfirmSaveAccountRecoverySettings extends Component {
                     <label htmlFor="accountPolicy">
                       <span className="name">
                         {{
-                          mandatory: <Trans>Mandatory</Trans>,
+                          mandatory: <Trans>Prompt</Trans>,
                           'opt-out': <Trans>Optional, Opt-out</Trans>,
                           'opt-in': <Trans>Optional, Opt-in</Trans>,
                           disabled: <Trans>Disable</Trans>

react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.test.js

@@ -65,7 +65,7 @@ describe("See the Confirm Save Account Recovery Settings", () => {
       page = new ConfirmSaveAccountRecoverySettingsPage(props);
 
       // Policy label
-      expect(page.accountRecoveryPolicy).toBe('Mandatory');
+      expect(page.accountRecoveryPolicy).toBe('Prompt');
       expect(page.accountRecoveryPolicyInfo).toBe("Every user is required to provide a copy of their private key and passphrase during setup.Warning: You should inform your users not to store personal passwords.");
 
       // organization recovery key

react-extension/components/Administration/DisplayAdministrationPasswordExpiry/DisplayAdministrationPasswordExpiryAdvanced/DisplayAdministrationPasswordExpiryAdvanced.js

@@ -45,7 +45,6 @@ class DisplayAdministrationPasswordExpiryAdvanced extends React.PureComponent {
    * @returns {void}
    */
   handleInputChange(event) {
-    event.preventDefault();
     const {type, checked, value, name} = event.target;
     const filedValue = type === "checkbox" ? checked : parseInt(value, 10);
     this.props.adminPasswordExpiryContext.setSettingsBulk({[name]: filedValue});

react-extension/components/Administration/ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings.js

@@ -289,7 +289,7 @@ class ManageAccountRecoveryAdministrationSettings extends React.Component {
                   id="accountRecoveryPolicyMandatory"
                   disabled={this.hasAllInputDisabled()}/>
                 <label htmlFor="accountRecoveryPolicyMandatory">
-                  <span className="name"><Trans>Mandatory</Trans></span>
+                  <span className="name"><Trans>Prompt</Trans></span>
                   <span className="info">
                     <Trans>Every user is required to provide a copy of their private key and passphrase during setup.</Trans><br/>
                     <Trans>You should inform your users not to store personal passwords.</Trans>

react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.js

@@ -181,16 +181,16 @@ class DisplayResourcesList extends React.Component {
    * Returns true if the component should be re-rendered
    */
   shouldComponentUpdate(nextProps, nextState) {
-    const {filteredResources, selectedResources, sorter, scrollTo, columnsResourceSetting} = this.props.resourceWorkspaceContext;
+    const {filteredResources, selectedResources, sorter, scrollTo, columnsResourceSetting} = nextProps.resourceWorkspaceContext;
     const hasFilteredResourcesChanged = nextProps.resourceWorkspaceContext.filteredResources !== filteredResources;
-    const hasBothSingleSelection = selectedResources.length === 1 && nextProps.resourceWorkspaceContext.selectedResources.length === 1;
+    const hasBothSingleSelection = selectedResources.length === 1 && this.props.resourceWorkspaceContext.selectedResources.length === 1;
     const hasSingleSelectedResourceChanged = hasBothSingleSelection && selectedResources[0].id !== nextProps.resourceWorkspaceContext.selectedResources[0].id;
-    const hasSelectedResourcesLengthChanged = nextProps.resourceWorkspaceContext.selectedResources.length !== selectedResources.length;
-    const hasSorterChanged = sorter !== nextProps.resourceWorkspaceContext.sorter;
+    const hasSelectedResourcesLengthChanged = this.props.resourceWorkspaceContext.selectedResources.length !== selectedResources.length;
+    const hasSorterChanged = sorter !== this.props.resourceWorkspaceContext.sorter;
     const hasResourceToScrollChange = Boolean(scrollTo.resource && scrollTo.resource.id);
     const hasResourcePreviewSecretChange = nextState.previewedCellule !== this.state.previewedCellule;
     const hasResourceColumnsChange = nextState.columns !== this.state.columns;
-    const hasColumnsResourceViewChange = nextProps.resourceWorkspaceContext.columnsResourceSetting?.hasDifferentShowValue(columnsResourceSetting);
+    const hasColumnsResourceViewChange = this.props.resourceWorkspaceContext.columnsResourceSetting?.hasDifferentShowValue(columnsResourceSetting);
     const mustHidePreviewPassword = hasFilteredResourcesChanged || hasSingleSelectedResourceChanged || hasSelectedResourcesLengthChanged || hasSorterChanged;
     if (mustHidePreviewPassword) {
       this.hidePreviewedCellule();
@@ -684,6 +684,10 @@ class DisplayResourcesList extends React.Component {
     this.props.actionFeedbackContext.displayError(message);
   }
 
+  /**
+   * Triggers a scroll of the grid to a resource given its id, if the resource is not visible yet.
+   * @param {string} resourceId
+   */
   scrollTo(resourceId) {
     const resourceIndex = this.resources.findIndex(resource => resource.id === resourceId);
     const [visibleStartIndex, visibleEndIndex] = this.listRef.current.getVisibleRange();

react-extension/components/Resource/DisplayResourcesList/DisplayResourcesListContextualMenu.js

@@ -33,7 +33,7 @@ import {withProgress} from "../../../contexts/ProgressContext";
 import {TotpCodeGeneratorService} from "../../../../shared/services/otp/TotpCodeGeneratorService";
 import {TotpWorkflowMode} from "../HandleTotpWorkflow/HandleTotpWorkflowMode";
 import {withWorkflow} from "../../../contexts/WorkflowContext";
-import {HandleTotpWorkflow} from "../HandleTotpWorkflow/HandleTotpWorkflow";
+import HandleTotpWorkflow from "../HandleTotpWorkflow/HandleTotpWorkflow";
 import {withPasswordExpiry} from "../../../contexts/PasswordExpirySettingsContext";
 import {formatDateForApi} from "../../../../shared/utils/dateUtils";
 import {DateTime} from "luxon";

react-extension/components/Resource/DisplayResourcesList/DisplayResourcesListContextualMenu.test.js

@@ -31,7 +31,7 @@ import {
   plaintextSecretPasswordDescriptionTotpDto,
   plaintextSecretPasswordStringDto
 } from "../../../../shared/models/entity/plaintextSecret/plaintextSecretEntity.test.data";
-import {HandleTotpWorkflow} from "../HandleTotpWorkflow/HandleTotpWorkflow";
+import HandleTotpWorkflow from "../HandleTotpWorkflow/HandleTotpWorkflow";
 import {TotpWorkflowMode} from "../HandleTotpWorkflow/HandleTotpWorkflowMode";
 import PasswordExpiryDialog from "../PasswordExpiryDialog/PasswordExpiryDialog";
 import {defaultPasswordExpirySettingsContext} from "../../../contexts/PasswordExpirySettingsContext.test.data";

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

@@ -213,12 +213,15 @@ class DisplayResourceDetailsInformation extends React.Component {
         if (error.name !== "UserAbortsOperationError") {
           this.props.actionFeedbackContext.displayError(error.message);
         }
-        return;
       }
     }
 
     this.props.progressContext.close();
 
+    if (!plaintextSecretDto) {
+      return;
+    }
+
     if (!plaintextSecretDto?.password?.length) {
       await this.props.actionFeedbackContext.displayError(this.translate("The password is empty and cannot be copied to clipboard."));
       return;

react-extension/contexts/ResourceWorkspaceContext.js

@@ -1105,7 +1105,17 @@ export class ResourceWorkspaceContextProvider extends React.Component {
     }
     const sorter = gridUserSettingEntity?.sorter || this.state.sorter;
     // process the search after the grid setting is loaded
-    this.setState({columnsResourceSetting, sorter}, () => this.search(this.state.filter));
+    this.setState({columnsResourceSetting, sorter}, () => {
+      this.search(this.state.filter);
+      /*
+       * we run scrollTo again here as all data is loaded and the previous sort is loaded as well.
+       * This make sure that the computed scroll position takes into account the sort and scolls the grid where it should
+       */
+      const selectedResource = this.state.selectedResources;
+      if (selectedResource.length === 1) {
+        this.scrollTo(selectedResource[0]);
+      }
+    });
   }
 
   /**

webAccessibleResources/react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.js

@@ -151,7 +151,7 @@ class ConfirmSaveAccountRecoverySettings extends Component {
                     <label htmlFor="accountPolicy">
                       <span className="name">
                         {{
-                          mandatory: <Trans>Mandatory</Trans>,
+                          mandatory: <Trans>Prompt</Trans>,
                           'opt-out': <Trans>Optional, Opt-out</Trans>,
                           'opt-in': <Trans>Optional, Opt-in</Trans>,
                           disabled: <Trans>Disable</Trans>

webAccessibleResources/react-extension/components/Administration/ConfirmSaveAccountRecoverySettings/ConfirmSaveAccountRecoverySettings.test.js

@@ -65,7 +65,7 @@ describe("See the Confirm Save Account Recovery Settings", () => {
       page = new ConfirmSaveAccountRecoverySettingsPage(props);
 
       // Policy label
-      expect(page.accountRecoveryPolicy).toBe('Mandatory');
+      expect(page.accountRecoveryPolicy).toBe('Prompt');
       expect(page.accountRecoveryPolicyInfo).toBe("Every user is required to provide a copy of their private key and passphrase during setup.Warning: You should inform your users not to store personal passwords.");
 
       // organization recovery key

webAccessibleResources/react-extension/components/Administration/DisplayAdministrationPasswordExpiry/DisplayAdministrationPasswordExpiryAdvanced/DisplayAdministrationPasswordExpiryAdvanced.js

@@ -45,7 +45,6 @@ class DisplayAdministrationPasswordExpiryAdvanced extends React.PureComponent {
    * @returns {void}
    */
   handleInputChange(event) {
-    event.preventDefault();
     const {type, checked, value, name} = event.target;
     const filedValue = type === "checkbox" ? checked : parseInt(value, 10);
     this.props.adminPasswordExpiryContext.setSettingsBulk({[name]: filedValue});

webAccessibleResources/react-extension/components/Administration/ManageAccountRecoveryAdministrationSettings/ManageAccountRecoveryAdministrationSettings.js

@@ -289,7 +289,7 @@ class ManageAccountRecoveryAdministrationSettings extends React.Component {
                   id="accountRecoveryPolicyMandatory"
                   disabled={this.hasAllInputDisabled()}/>
                 <label htmlFor="accountRecoveryPolicyMandatory">
-                  <span className="name"><Trans>Mandatory</Trans></span>
+                  <span className="name"><Trans>Prompt</Trans></span>
                   <span className="info">
                     <Trans>Every user is required to provide a copy of their private key and passphrase during setup.</Trans><br/>
                     <Trans>You should inform your users not to store personal passwords.</Trans>

webAccessibleResources/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.js

@@ -181,16 +181,16 @@ class DisplayResourcesList extends React.Component {
    * Returns true if the component should be re-rendered
    */
   shouldComponentUpdate(nextProps, nextState) {
-    const {filteredResources, selectedResources, sorter, scrollTo, columnsResourceSetting} = this.props.resourceWorkspaceContext;
+    const {filteredResources, selectedResources, sorter, scrollTo, columnsResourceSetting} = nextProps.resourceWorkspaceContext;
     const hasFilteredResourcesChanged = nextProps.resourceWorkspaceContext.filteredResources !== filteredResources;
-    const hasBothSingleSelection = selectedResources.length === 1 && nextProps.resourceWorkspaceContext.selectedResources.length === 1;
+    const hasBothSingleSelection = selectedResources.length === 1 && this.props.resourceWorkspaceContext.selectedResources.length === 1;
     const hasSingleSelectedResourceChanged = hasBothSingleSelection && selectedResources[0].id !== nextProps.resourceWorkspaceContext.selectedResources[0].id;
-    const hasSelectedResourcesLengthChanged = nextProps.resourceWorkspaceContext.selectedResources.length !== selectedResources.length;
-    const hasSorterChanged = sorter !== nextProps.resourceWorkspaceContext.sorter;
+    const hasSelectedResourcesLengthChanged = this.props.resourceWorkspaceContext.selectedResources.length !== selectedResources.length;
+    const hasSorterChanged = sorter !== this.props.resourceWorkspaceContext.sorter;
     const hasResourceToScrollChange = Boolean(scrollTo.resource && scrollTo.resource.id);
     const hasResourcePreviewSecretChange = nextState.previewedCellule !== this.state.previewedCellule;
     const hasResourceColumnsChange = nextState.columns !== this.state.columns;
-    const hasColumnsResourceViewChange = nextProps.resourceWorkspaceContext.columnsResourceSetting?.hasDifferentShowValue(columnsResourceSetting);
+    const hasColumnsResourceViewChange = this.props.resourceWorkspaceContext.columnsResourceSetting?.hasDifferentShowValue(columnsResourceSetting);
     const mustHidePreviewPassword = hasFilteredResourcesChanged || hasSingleSelectedResourceChanged || hasSelectedResourcesLengthChanged || hasSorterChanged;
     if (mustHidePreviewPassword) {
       this.hidePreviewedCellule();
@@ -684,6 +684,10 @@ class DisplayResourcesList extends React.Component {
     this.props.actionFeedbackContext.displayError(message);
   }
 
+  /**
+   * Triggers a scroll of the grid to a resource given its id, if the resource is not visible yet.
+   * @param {string} resourceId
+   */
   scrollTo(resourceId) {
     const resourceIndex = this.resources.findIndex(resource => resource.id === resourceId);
     const [visibleStartIndex, visibleEndIndex] = this.listRef.current.getVisibleRange();

webAccessibleResources/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesListContextualMenu.js

@@ -33,7 +33,7 @@ import {withProgress} from "../../../contexts/ProgressContext";
 import {TotpCodeGeneratorService} from "../../../../shared/services/otp/TotpCodeGeneratorService";
 import {TotpWorkflowMode} from "../HandleTotpWorkflow/HandleTotpWorkflowMode";
 import {withWorkflow} from "../../../contexts/WorkflowContext";
-import {HandleTotpWorkflow} from "../HandleTotpWorkflow/HandleTotpWorkflow";
+import HandleTotpWorkflow from "../HandleTotpWorkflow/HandleTotpWorkflow";
 import {withPasswordExpiry} from "../../../contexts/PasswordExpirySettingsContext";
 import {formatDateForApi} from "../../../../shared/utils/dateUtils";
 import {DateTime} from "luxon";

webAccessibleResources/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesListContextualMenu.test.js

@@ -31,7 +31,7 @@ import {
   plaintextSecretPasswordDescriptionTotpDto,
   plaintextSecretPasswordStringDto
 } from "../../../../shared/models/entity/plaintextSecret/plaintextSecretEntity.test.data";
-import {HandleTotpWorkflow} from "../HandleTotpWorkflow/HandleTotpWorkflow";
+import HandleTotpWorkflow from "../HandleTotpWorkflow/HandleTotpWorkflow";
 import {TotpWorkflowMode} from "../HandleTotpWorkflow/HandleTotpWorkflowMode";
 import PasswordExpiryDialog from "../PasswordExpiryDialog/PasswordExpiryDialog";
 import {defaultPasswordExpirySettingsContext} from "../../../contexts/PasswordExpirySettingsContext.test.data";

webAccessibleResources/react-extension/components/ResourceDetails/DisplayResourceDetails/DisplayResourceDetailsInformation.js

@@ -213,12 +213,15 @@ class DisplayResourceDetailsInformation extends React.Component {
         if (error.name !== "UserAbortsOperationError") {
           this.props.actionFeedbackContext.displayError(error.message);
         }
-        return;
       }
     }
 
     this.props.progressContext.close();
 
+    if (!plaintextSecretDto) {
+      return;
+    }
+
     if (!plaintextSecretDto?.password?.length) {
       await this.props.actionFeedbackContext.displayError(this.translate("The password is empty and cannot be copied to clipboard."));
       return;

webAccessibleResources/react-extension/contexts/ResourceWorkspaceContext.js

@@ -1105,7 +1105,17 @@ export class ResourceWorkspaceContextProvider extends React.Component {
     }
     const sorter = gridUserSettingEntity?.sorter || this.state.sorter;
     // process the search after the grid setting is loaded
-    this.setState({columnsResourceSetting, sorter}, () => this.search(this.state.filter));
+    this.setState({columnsResourceSetting, sorter}, () => {
+      this.search(this.state.filter);
+      /*
+       * we run scrollTo again here as all data is loaded and the previous sort is loaded as well.
+       * This make sure that the computed scroll position takes into account the sort and scolls the grid where it should
+       */
+      const selectedResource = this.state.selectedResources;
+      if (selectedResource.length === 1) {
+        this.scrollTo(selectedResource[0]);
+      }
+    });
   }
 
   /**