passbolt-styleguide 3.5.3 → 3.6.0-beta1

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

@@ -20,12 +20,13 @@
 import {defaultAppContext, defaultPropsOneResource} from "./DeleteResource.test.data";
 import {ActionFeedbackContext} from "../../../contexts/ActionFeedbackContext";
 import DeleteResourcePage from "./DeleteResource.test.page";
-import {fireEvent} from "@testing-library/react";
+import {fireEvent, waitFor} from "@testing-library/react";
 import PassboltApiFetchError from "../../../../shared/lib/Error/PassboltApiFetchError";
 import {defaultPropsMultipleResource} from "../DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.test.data";
 
 beforeEach(() => {
   jest.resetModules();
+  jest.resetAllMocks();
 });
 
 describe("See Password Delete Dialog", () => {
@@ -47,6 +48,7 @@ describe("See Password Delete Dialog", () => {
     });
 
     it('As LU I should know what resource I am deleting', () => {
+      expect.assertions(9);
       expect(page.deleteResourcePageObject.exists()).toBeTruthy();
       // title
       expect(page.deleteResourcePageObject.dialogTitle).not.toBeNull();
@@ -55,7 +57,7 @@ describe("See Password Delete Dialog", () => {
       expect(page.deleteResourcePageObject.closeButton).not.toBeNull();
       // submit button
       expect(page.deleteResourcePageObject.saveButton).not.toBeNull();
-      expect(page.deleteResourcePageObject.saveButton.value).toBe('Delete');
+      expect(page.deleteResourcePageObject.saveButton.textContent).toBe('Delete');
       // cancel button
       expect(page.deleteResourcePageObject.cancelButton).not.toBeNull();
       expect(page.deleteResourcePageObject.cancelButton.textContent).toBe('Cancel');
@@ -66,18 +68,27 @@ describe("See Password Delete Dialog", () => {
     it('As LU I should see a toaster message after deleting a resource', async() => {
       const submitButton = page.deleteResourcePageObject.saveButton;
       // Mock the request function to make it the expected result
-      jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(() => {
+      expect.assertions(1);
+      jest.spyOn(ActionFeedbackContext._currentValue, 'displaySuccess').mockImplementation(message => {
+        expect(message).toBe("The password has been deleted successfull");
       });
 
       await page.deleteResourcePageObject.click(submitButton);
-      expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalled();
+      // ensure that the process really finishes before leaving the unit test.
+      await waitFor(() => {
+        if (ActionFeedbackContext._currentValue.displaySuccess.mock.calls.length == 0) {
+          throw new Error("Reousrce deletion didn't finish its process.");
+        }
+      });
     });
 
     it('As LU I should be able to cancel the operation by clicking on the cancel button', async() => {
       const cancelButton = page.deleteResourcePageObject.cancelButton;
 
       await page.deleteResourcePageObject.click(cancelButton);
-      expect(propsOneResource.onClose).toBeCalled();
+
+      expect.assertions(1);
+      expect(propsOneResource.onClose).toHaveBeenCalledTimes(1);
     });
 
     it('As LU I should be able to cancel the edition with the keyboard (escape)', () => {
@@ -85,7 +96,8 @@ describe("See Password Delete Dialog", () => {
       const escapeKeyDown = {keyCode: 27};
       fireEvent.keyDown(page.deleteResourcePageObject.dialogTitle, escapeKeyDown);
 
-      expect(propsOneResource.onClose).toBeCalled();
+      expect.assertions(1);
+      expect(propsOneResource.onClose).toHaveBeenCalledTimes(1);
     });
 
     it('Displays an error when the API call fail', async() => {
@@ -98,6 +110,7 @@ describe("See Password Delete Dialog", () => {
       await page.deleteResourcePageObject.click(submitButton);
 
       // Throw general error message
+      expect.assertions(2);
       expect(page.deleteResourcePageObject.errorDialog).not.toBeNull();
       expect(page.deleteResourcePageObject.errorDialogMessage).not.toBeNull();
     });
@@ -123,7 +136,8 @@ describe("See Password Delete Dialog", () => {
       });
 
       await page.deleteResourcePageObject.click(submitButton);
-      expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalled();
+      expect.assertions(1);
+      expect(ActionFeedbackContext._currentValue.displaySuccess).toHaveBeenCalledTimes(1);
     });
   });
 });

package/src/react-extension/components/Resource/DeleteResource/DeleteResource.test.stories.js

@@ -2,6 +2,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import React from "react";
 import AppContext from "../../../contexts/AppContext";
 import DeleteResource from "./DeleteResource";
+import MockPort from "../../../test/mock/MockPort";
 
 
 export default {
@@ -22,8 +23,13 @@ const singleContext = {
       {name: "My Password"}
     ]
   },
+  setContext: () => {},
+  port: new MockPort(),
 };
 export const SinglePassword = Template(singleContext).bind({});
+SinglePassword.args = {
+  onClose: () => {}
+};
 
 const multipleContext = {
   passwordDeleteDialogProps: {
@@ -32,5 +38,11 @@ const multipleContext = {
       {name: "My Another Password"}
     ]
   },
+  setContext: () => {},
+  port: new MockPort(),
 };
 export const MultiplePassword = Template(multipleContext).bind({});
+MultiplePassword.args = {
+  onClose: () => {}
+};
+

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayDragResource.js

@@ -33,6 +33,14 @@ class DisplayDragResource extends React.Component {
     return this.props.resourceWorkspaceContext.selectedResources.length > 1;
   }
 
+  /**
+   * has more than three resources selected
+   * @returns {boolean}
+   */
+  hasMoreThanThreeResourcesSelected() {
+    return this.props.resourceWorkspaceContext.selectedResources.length > 3;
+  }
+
   /**
    * Get the number of resources
    * @returns {string|*}
@@ -47,12 +55,12 @@ class DisplayDragResource extends React.Component {
    */
   render() {
     return (
-      <div className={`${this.isMultipleSelected() ? "drag-and-drop-multiple" : "drag-and-drop"}`}>
-        {this.selectedResources[0].name}
+      <div className={`drag-and-drop ${this.hasMoreThanThreeResourcesSelected() ? "item-n" : `item-${this.numberOfResources}`}`}>
+        <span className="message">{this.selectedResources[0].name}</span>
         {this.isMultipleSelected() &&
-        <span className="count">
-          {this.numberOfResources}
-        </span>
+          <span className="count">
+            {this.numberOfResources}
+          </span>
         }
       </div>
     );

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

@@ -21,7 +21,7 @@ import {
   withResourceWorkspace
 } from "../../../contexts/ResourceWorkspaceContext";
 import debounce from "debounce-promise";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import {withRouter} from "react-router-dom";
 import DisplayResourcesListContextualMenu from "./DisplayResourcesListContextualMenu";
@@ -163,8 +163,6 @@ class DisplayResourcesList extends React.Component {
   }
 
   async handleCheckboxWrapperClick(event, resource) {
-    // Prevent event fired twice due to the input + label
-    event.preventDefault();
     /*
      * We want the td to extend the clickable area of the checkbox.
      * If we propagate the event, the tr will listen to the click and select only the clicked row.
@@ -543,21 +541,18 @@ class DisplayResourcesList extends React.Component {
         onContextMenu={ev => this.handleResourceRightClick(ev, resource)}
         onDragStart={event => this.handleDragStartEvent(event, resource)}
         onDragEnd={event => this.handleDragEndEvent(event, resource)}>
-        <td className="cell-multiple-select selections s-cell"
-          onClick={ev => this.handleCheckboxWrapperClick(ev, resource)}>
+        <td className="cell-multiple-select selections s-cell">
           <div className="ready">
             <div className="input checkbox">
-              <input type="checkbox" id={`checkbox_multiple_select_checkbox_${resource.id}`} checked={isSelected} readOnly={true}/>
-              <label htmlFor={`checkbox_multiple_select_checkbox_${resource.id}`}>
-                <span className="visually-hidden"><Trans>Select resource</Trans></span>
-              </label>
+              <input type="checkbox" id={`checkbox_multiple_select_checkbox_${resource.id}`} checked={isSelected} readOnly={true} onClick={ev => this.handleCheckboxWrapperClick(ev, resource)}/>
+              <span className="visually-hidden"><Trans>Select resource</Trans></span>
             </div>
           </div>
         </td>
         <td className="cell-favorite selections s-cell">
           <div className="ready">
             <a className={`no-text ${isFavorite ? "fav" : "unfav"}`} onClick={ev => this.handleFavoriteClick(ev, resource)}>
-              <Icon baseline={true} name="star"/>
+              <Icon name="star"/>
               <span className="visuallyhidden">fav</span>
             </a>
           </div>
@@ -583,11 +578,10 @@ class DisplayResourcesList extends React.Component {
             </a>
           </div>
           {this.canUsePreviewPassword &&
-          <a onClick={async ev => this.handlePreviewPasswordButtonClick(ev, resource.id)}
-            className={`password-view button button-icon button-toggle ${this.isPasswordPreviewed(resource.id) ? "selected" : ""}`}>
-            <Icon name='eye-open' baseline={true}/>
-            <span className="visually-hidden">view</span>
-          </a>
+            <a onClick={async ev => this.handlePreviewPasswordButtonClick(ev, resource.id)} className="password-view button button-transparent">
+              <Icon name={this.isPasswordPreviewed(resource.id) ? 'eye-close' : 'eye-open'}/>
+              <span className="visually-hidden">view</span>
+            </a>
           }
         </td>
         <td className="cell-uri l-cell">
@@ -688,21 +682,21 @@ class DisplayResourcesList extends React.Component {
                           name="select all"
                           checked={selectAll}
                           onChange={this.handleSelectAllChange}/>
-                        <label htmlFor="passwords-select-all">
-                          <span className="visually-hidden">select all</span>
-                        </label>
+                        <span className="visually-hidden">select all</span>
                       </div>
                     </th>
                     <th className="cell-favorite selections s-cell sortable">
                       <a onClick={ev => this.handleSortByColumnClick(ev, "favorite")} className="unfav">
-                        <Icon baseline={true} name="star"/>
+                        <Icon name="star"/>
                         <span className="visuallyhidden">fav</span>
-                        {this.isSortedColumn("favorite") && this.isSortedAsc() &&
-                        <Icon baseline={true} name="caret-up"/>
-                        }
-                        {this.isSortedColumn("favorite") && !this.isSortedAsc() &&
-                        <Icon baseline={true} name="caret-down"/>
-                        }
+                        <span className="cell-header-icon-sort">
+                          {this.isSortedColumn("favorite") && this.isSortedAsc() &&
+                          <Icon name="ascending"/>
+                          }
+                          {this.isSortedColumn("favorite") && !this.isSortedAsc() &&
+                          <Icon name="descending"/>
+                          }
+                        </span>
                       </a>
                     </th>
                     <th className="cell-name m-cell sortable">
@@ -713,10 +707,10 @@ class DisplayResourcesList extends React.Component {
                           </span>
                           <span className="cell-header-icon-sort">
                             {this.isSortedColumn("name") && this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-up"/>
+                            <Icon name="ascending"/>
                             }
                             {this.isSortedColumn("name") && !this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-down"/>
+                            <Icon name="descending"/>
                             }
                           </span>
                         </div>
@@ -730,10 +724,10 @@ class DisplayResourcesList extends React.Component {
                           </span>
                           <span className="cell-header-icon-sort">
                             {this.isSortedColumn("username") && this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-up"/>
+                            <Icon name="ascending"/>
                             }
                             {this.isSortedColumn("username") && !this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-down"/>
+                            <Icon name="descending"/>
                             }
                           </span>
                         </div>
@@ -754,10 +748,10 @@ class DisplayResourcesList extends React.Component {
                           </span>
                           <span className="cell-header-icon-sort">
                             {this.isSortedColumn("uri") && this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-up"/>
+                            <Icon name="ascending"/>
                             }
                             {this.isSortedColumn("uri") && !this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-down"/>
+                            <Icon name="descending"/>
                             }
                           </span>
                         </div>
@@ -771,10 +765,10 @@ class DisplayResourcesList extends React.Component {
                           </span>
                           <span className="cell-header-icon-sort">
                             {this.isSortedColumn("modified") && this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-up"/>
+                            <Icon name="ascending"/>
                             }
                             {this.isSortedColumn("modified") && !this.isSortedAsc() &&
-                            <Icon baseline={true} name="caret-down"/>
+                            <Icon name="descending"/>
                             }
                           </span>
                         </div>

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

@@ -106,12 +106,12 @@ export default class DisplayResourcesListPage {
         await waitFor(() => {});
       },
       async selectWithCheckbox() {
-        const checkbox = element.querySelector('td.cell-multiple-select.selections.s-cell');
+        const checkbox = element.querySelector('td.cell-multiple-select.selections.s-cell input');
         fireEvent.click(checkbox, leftClick);
         await waitFor(() => {});
       },
       async selectRangeCheckbox() {
-        const checkbox = element.querySelector('td.cell-multiple-select.selections.s-cell');
+        const checkbox = element.querySelector('td.cell-multiple-select.selections.s-cell input');
         fireEvent.click(checkbox, {button: 0, shiftKey: true});
         await waitFor(() => {});
       },

package/src/react-extension/components/Resource/DisplayResourcesList/DisplayResourcesList.test.stories.js

@@ -3,6 +3,7 @@ import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import {ResourceWorkspaceFilterTypes} from "../../../contexts/ResourceWorkspaceContext";
 import AppContext from "../../../contexts/AppContext";
+import MockPort from "../../../test/mock/MockPort";
 
 export default {
   title: 'Passbolt/Resource/DisplayResourcesList',
@@ -13,20 +14,35 @@ const defaultContext = {
   siteSettings: {
     getServerTimezone: () => new Date().toLocaleString(),
     canIUse: () => true,
-  }
+  },
+  port: new MockPort()
 };
 
 
 const Template = args =>
   <AppContext.Provider value={defaultContext}>
     <MemoryRouter initialEntries={['/']}>
-      <div className="panel">
-        <Route component={routerProps => <DisplayResourcesList {...args} {...routerProps}/>}></Route>
+      <div className="page">
+        <div className="panel">
+          <Route component={routerProps => <DisplayResourcesList {...args} {...routerProps}/>}></Route>
+        </div>
       </div>
     </MemoryRouter>
   </AppContext.Provider>;
 
-export const Empty = Template.bind({});
+export const Empty = Template.bind();
+Empty.args = {
+  resourceWorkspaceContext: {
+    filteredResources: [],
+    selectedResources: [],
+    filter: {
+      type: ResourceWorkspaceFilterTypes.ALL
+    },
+    sorter: {
+      propertyName: 'asc'
+    }
+  }
+};
 
 export const Populated = Template.bind({});
 Populated.args = {
@@ -61,14 +77,99 @@ Populated.args = {
           "created": "2020-08-27T08:35:19+00:00",
           "modified": "2020-08-27T08:35:19+00:00"
         }
+      },
+      {
+        "id": "8e3874ae-4b40-590b-968a-418f704b9d9b",
+        "name": "apache",
+        "username": "www-data",
+        "uri": "http:\/\/www.apache.org\/",
+        "description": "Apache is the world\u0027s most used web server software.",
+        "deleted": false,
+        "created": "2020-08-25T08:35:19+00:00",
+        "modified": "2020-08-26T08:35:19+00:00",
+        "created_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "modified_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "permission": {
+          "id": "8dfd59a7-852d-5c57-bd45-75c28bbb3f6c",
+          "aco": "Resource",
+          "aco_foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+          "aro": "User",
+          "aro_foreign_key": "f848277c-5398-58f8-a82a-72397af2d450",
+          "type": 15,
+          "created": "2020-08-27T08:35:19+00:00",
+          "modified": "2020-08-27T08:35:19+00:00"
+        }
+      },
+      {
+        "id": "8e3874ae-4b40-590b-968a-418f704b9d9c",
+        "name": "apache",
+        "username": "www-data",
+        "uri": "http:\/\/www.apache.org\/",
+        "description": "Apache is the world\u0027s most used web server software.",
+        "deleted": false,
+        "created": "2020-08-25T08:35:19+00:00",
+        "modified": "2020-08-26T08:35:19+00:00",
+        "created_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "modified_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "favorite": {
+          "id": "56216dba-b6da-592b-87cb-fb5cbbd0a424",
+          "user_id": "f848277c-5398-58f8-a82a-72397af2d450",
+          "foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+          "foreign_model": "Resource",
+          "created": "2020-08-27T08:35:21+00:00",
+          "modified": "2020-08-27T08:35:21+00:00"
+        },
+        "permission": {
+          "id": "8dfd59a7-852d-5c57-bd45-75c28bbb3f6c",
+          "aco": "Resource",
+          "aco_foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+          "aro": "User",
+          "aro_foreign_key": "f848277c-5398-58f8-a82a-72397af2d450",
+          "type": 15,
+          "created": "2020-08-27T08:35:19+00:00",
+          "modified": "2020-08-27T08:35:19+00:00"
+        }
+      },
+      {
+        "id": "8e3874ae-4b40-590b-968a-418f704b9d9d",
+        "name": "apache",
+        "username": "www-data",
+        "uri": "http:\/\/www.apache.org\/",
+        "description": "Apache is the world\u0027s most used web server software.",
+        "deleted": false,
+        "created": "2020-08-25T08:35:19+00:00",
+        "modified": "2020-08-26T08:35:19+00:00",
+        "created_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "modified_by": "f848277c-5398-58f8-a82a-72397af2d450",
+        "permission": {
+          "id": "8dfd59a7-852d-5c57-bd45-75c28bbb3f6c",
+          "aco": "Resource",
+          "aco_foreign_key": "8e3874ae-4b40-590b-968a-418f704b9d9a",
+          "aro": "User",
+          "aro_foreign_key": "f848277c-5398-58f8-a82a-72397af2d450",
+          "type": 15,
+          "created": "2020-08-27T08:35:19+00:00",
+          "modified": "2020-08-27T08:35:19+00:00"
+        }
       }
     ],
-    selectedResources: [],
+    selectedResources: [
+      {id: '8e3874ae-4b40-590b-968a-418f704b9d9a'},
+      {id: '8e3874ae-4b40-590b-968a-418f704b9d9b'},
+    ],
     filter: {
       type: ResourceWorkspaceFilterTypes.ALL
     },
     sorter: {
       propertyName: 'asc'
-    }
+    },
+    onResourceSelected: {
+      multiple: () => {},
+      single: () => {},
+      all: () => {},
+      none: () => {}
+    },
+    onGoToResourceUriRequested: () => {},
+    onSorterChanged: () => {}
   }
 };

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.js

@@ -15,7 +15,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withDialog} from "../../../contexts/DialogContext";
 import {ResourceWorkspaceFilterTypes, withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
 import CreateResourceFolder from "../../ResourceFolder/CreateResourceFolder/CreateResourceFolder";
@@ -228,11 +228,11 @@ class DisplayResourcesWorkspaceMainMenu extends React.Component {
     return (
       <>
         <div className="dropdown" ref={this.createMenuRef}>
-          <a className={`button create primary ready ${this.canCreate() ? "" : "disabled"}`} onClick={this.handleCreateClickEvent}>
-            <Icon name="plus-circle"/>
+          <a className={`button create primary ${this.canCreate() ? "" : "disabled"} ${this.state.createMenuOpen ? "open" : ""}`} onClick={this.handleCreateClickEvent}>
+            <Icon name="add"/>
             <span><Trans>Create</Trans></span>
           </a>
-          <ul className={`dropdown-content menu ready ${this.state.createMenuOpen ? "visible" : ""}`}>
+          <ul className={`dropdown-content menu right ${this.state.createMenuOpen ? "visible" : ""}`}>
             <li id="password_action">
               <div className="row">
                 <div className="main-cell-wrapper">
@@ -259,9 +259,9 @@ class DisplayResourcesWorkspaceMainMenu extends React.Component {
         </div>
         {this.canImport &&
           <a
-            className="button"
+            className="button button-action-icon"
             onClick={this.handleImportClickEvent}>
-            <Icon name="upload-a" />
+            <Icon name="upload" />
             <span className="visuallyhidden"><Trans>upload</Trans></span>
           </a>
         }

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.test.data.js

@@ -27,6 +27,7 @@ export function defaultAppContextProEdition(appContext) {
   const defaultAppContext = {
     port: new MockPort(),
     siteSettings: new SiteSettings(siteSettingsFixture),
+    setContext: () => jest.fn()
   };
   return Object.assign(defaultAppContext, appContext || {});
 }

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

@@ -83,14 +83,14 @@ class DisplayMainMenuPageObject {
    * Returns the create menu elements of password workspace menu
    */
   get createMenu() {
-    return this._container.querySelector('.dropdown .button.create.primary.ready');
+    return this._container.querySelector('.dropdown .button.create.primary');
   }
 
   /**
    * Returns the create menu disabled elements of password workspace menu
    */
   get createMenuDisabled() {
-    return this._container.querySelector('.dropdown .button.create.primary.ready.disabled');
+    return this._container.querySelector('.dropdown .button.create.primary.disabled');
   }
 
   /**

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMainMenu.test.stories.js

@@ -0,0 +1,37 @@
+import React from "react";
+import DisplayResourcesWorkspaceMainMenu from "./DisplayResourcesWorkspaceMainMenu";
+import {
+  defaultAppContext,
+  defaultAppContextProEdition, defaultPropsFolderNotOwned,
+  defaultPropsFolderOwned
+} from "./DisplayResourcesWorkspaceMainMenu.test.data";
+
+/**
+ * DisplayResourcesWorkspaceMainMenu stories
+ */
+export default {
+  title: 'Passbolt/Resource/DisplayResourcesWorkspaceMainMenu',
+  component: DisplayResourcesWorkspaceMainMenu
+};
+
+const Template = ({...args}) =>
+  <div className="header third">
+    <div className="col1 main-action-wrapper">
+      <DisplayResourcesWorkspaceMainMenu {...args}/>
+    </div>
+  </div>;
+
+const props = defaultPropsFolderOwned();
+props.context = defaultAppContextProEdition();
+
+export const ProEditionFolderOwned = Template.bind({});
+ProEditionFolderOwned.args = {...props};
+
+const propsFolderNotOwned = defaultPropsFolderNotOwned();
+propsFolderNotOwned.context = defaultAppContextProEdition();
+export const ProEditionFolderNotOwned = Template.bind({});
+ProEditionFolderNotOwned.args = {...propsFolderNotOwned};
+
+props.context = defaultAppContext({siteSettings: {canIUse: () => false}, setContext: () => {}});
+export const CeEdition = Template.bind({});
+CeEdition.args = {...props};

package/src/react-extension/components/Resource/DisplayResourcesWorkspace/DisplayResourcesWorkspaceMenu.js

@@ -17,7 +17,7 @@ import {withActionFeedback} from "../../../contexts/ActionFeedbackContext";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withResourceWorkspace} from "../../../contexts/ResourceWorkspaceContext";
-import Icon from "../../Common/Icons/Icon";
+import Icon from "../../../../shared/components/Icons/Icon";
 import {withDialog} from "../../../contexts/DialogContext";
 import DeleteResource from "../DeleteResource/DeleteResource";
 import EditResource from "../EditResource/EditResource";
@@ -360,23 +360,23 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
     return (
       <div className="col2_3 actions-wrapper">
         <div className="actions">
-          <ul className="ready">
+          <ul>
             <li id="password_action">
-              <a className={`button ready ${this.hasOneResourceSelected() ? "" : "disabled"}`}
+              <a className={`button ${this.hasOneResourceSelected() ? "" : "disabled"}`}
                 onClick={this.handleCopySecretClickEvent}>
                 <Icon name="copy-to-clipboard"/>
                 <span><Trans>Copy</Trans></span>
               </a>
             </li>
             <li id="edit_action">
-              <a className={`button ready ${this.hasOneResourceSelected() && this.canUpdate() ? "" : "disabled"}`}
+              <a className={`button ${this.hasOneResourceSelected() && this.canUpdate() ? "" : "disabled"}`}
                 onClick={this.handleEditClickEvent}>
-                <Icon name="edit"></Icon>
+                <Icon name="edit"/>
                 <span><Trans>Edit</Trans></span>
               </a>
             </li>
             <li id="share_action">
-              <a className={`button ready ${this.hasResourceSelected() && this.canShare() ? "" : "disabled"}`}
+              <a className={`button ${this.hasResourceSelected() && this.canShare() ? "" : "disabled"}`}
                 onClick={this.handleShareClickEvent}>
                 <Icon name="share"/>
                 <span><Trans>Share</Trans></span>
@@ -384,21 +384,21 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
             </li>
             <li id="export_action">
               <a
-                className={`button ready ${this.hasResourceSelected() && this.canExport() ? "" : "disabled"}`}
+                className={`button ${this.hasResourceSelected() && this.canExport() ? "" : "disabled"}`}
                 onClick={this.handleExportClickEvent}>
-                <Icon name="upload"/>
+                <Icon name="download"/>
                 <span><Trans>Export</Trans></span>
               </a>
             </li>
             <li>
               <div className="dropdown" ref={this.moreMenuRef}>
-                <a className={`button more ready ${this.hasMoreActionAllowed() ? "" : "disabled"}`}
+                <a className={`button more ${this.state.moreMenuOpen ? "open" : ""} ${this.hasMoreActionAllowed() ? "" : "disabled"}`}
                   onClick={this.handleMoreClickEvent}>
                   <span><Trans>More</Trans></span>
                   <Icon name="caret-down"/>
                 </a>
-                <ul className={`dropdown-content menu ready ${this.state.moreMenuOpen ? "visible" : ""}`}>
-                  <li id="username_action" className="">
+                <ul className={`dropdown-content menu right ${this.state.moreMenuOpen ? "visible" : ""}`}>
+                  <li id="username_action">
                     <div className="row">
                       <div className="main-cell-wrapper">
                         <div className="main-cell">
@@ -453,7 +453,7 @@ class DisplayResourcesWorkspaceMenu extends React.Component {
           </ul>
         </div>
         <div className="actions secondary">
-          <ul className="ready">
+          <ul>
             <li>
               <a className={`button button-toggle info ${this.hasLockDetail() ? "selected" : ""}`}
                 onClick={this.handleViewDetailClickEvent}>