@reltio/components 1.4.820 → 1.4.821

package/components/attributes/inline/ComplexAttribute/ComplexAttribute.js

@@ -61,8 +61,8 @@ var ComplexAttribute = function (_a) {
                 crosswalks.map(function (crosswalk) { return (react_1.default.createElement(CrosswalkIcon_1.default, { key: mdm_sdk_1.getCrosswalkId(crosswalk), crosswalk: crosswalk, className: styles.crosswalkIcon })); })),
             react_1.default.createElement(index_1.Spacer, null),
             react_1.default.createElement("div", { className: styles.actions },
-                showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),
-                showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
+                showPin && (react_1.default.createElement(PinButton_1.default, { disabled: !canEdit, isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } })),
+                showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { disabled: !canEdit, isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
                 showDelete && (react_1.default.createElement(DeleteButton_1.default, { onClick: function () {
                         return onDelete({
                             attributeType: attributeType,

package/components/attributes/inline/SimpleAttribute/SimpleAttribute.js

@@ -95,8 +95,8 @@ var SimpleAttribute = function (_a) {
         react_1.default.createElement("div", { className: styles.attributeValue },
             react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) })),
         react_1.default.createElement("div", { className: styles.actions },
-            showPin && react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); } }),
-            showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); } })),
+            showPin && (react_1.default.createElement(PinButton_1.default, { isPinned: attributeValue.pin, onClick: function () { return onPin({ attributeValue: attributeValue }); }, disabled: !canEdit })),
+            showIgnore && (react_1.default.createElement(IgnoreButton_1.default, { isIgnored: attributeValue.ignored, onClick: function () { return onIgnore({ attributeValue: attributeValue }); }, disabled: !canEdit })),
             isHovered && (react_1.default.createElement(DropDownMenuButton_1.default, { MenuItemRenderer: CrosswalkMenuItem_1.default, menuId: "simple-attribute-additional-actions-" + id, buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVert_1.default,
                     size: 'XS',

package/components/attributes/inline/SimpleAttribute/styles.js

@@ -26,7 +26,8 @@ exports.useStyles = styles_1.makeStyles(function () { return ({
                 background: color,
                 borderRadius: '4px 0px 0px 4px',
                 width: '8px',
-                height: '100%'
+                height: '100%',
+                pointerEvents: 'none'
             },
             '&::before': {
                 content: '""',
@@ -35,7 +36,8 @@ exports.useStyles = styles_1.makeStyles(function () { return ({
                 borderRadius: '4px',
                 border: fullyColored ? color + " solid 2px" : 'rgba(0,0,0,0.12) solid 1px',
                 width: '100%',
-                height: '100%'
+                height: '100%',
+                pointerEvents: 'none'
             }
         })), { display: 'flex', alignItems: 'center', maxWidth: '230px', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
     },

package/components/attributes/inline/common/IgnoreButton.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     isIgnored: boolean;
     onClick: () => void;
+    disabled?: boolean;
 };
-declare const IgnoreButton: ({ isIgnored, onClick }: Props) => JSX.Element;
+declare const IgnoreButton: ({ isIgnored, onClick, disabled }: Props) => JSX.Element;
 export default IgnoreButton;

package/components/attributes/inline/common/IgnoreButton.js

@@ -9,7 +9,7 @@ var Ignored_1 = __importDefault(require("../../../../icons/Ignored"));
 var IgnoredOutlined_1 = __importDefault(require("../../../../icons/IgnoredOutlined"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var IgnoreButton = function (_a) {
-    var isIgnored = _a.isIgnored, onClick = _a.onClick;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, tooltipTitle: ui_i18n_1.default.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
+    var isIgnored = _a.isIgnored, onClick = _a.onClick, disabled = _a.disabled;
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, icon: isIgnored ? Ignored_1.default : IgnoredOutlined_1.default, tooltipTitle: disabled ? ui_i18n_1.default.text("You don't have permissions to ignore") : ui_i18n_1.default.text('Ignore'), onClick: onClick, size: "XS", disableRipple: true }));
 };
 exports.default = IgnoreButton;

package/components/attributes/inline/common/PinButton.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     isPinned: boolean;
     onClick: () => void;
+    disabled?: boolean;
 };
-declare const PinButton: ({ isPinned, onClick }: Props) => JSX.Element;
+declare const PinButton: ({ isPinned, onClick, disabled }: Props) => JSX.Element;
 export default PinButton;

package/components/attributes/inline/common/PinButton.js

@@ -9,7 +9,7 @@ var Pin_1 = __importDefault(require("../../../../icons/Pin"));
 var PinOutlined_1 = __importDefault(require("../../../../icons/PinOutlined"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var PinButton = function (_a) {
-    var isPinned = _a.isPinned, onClick = _a.onClick;
-    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, tooltipTitle: ui_i18n_1.default.text('Pin'), size: "XS", disableRipple: true }));
+    var isPinned = _a.isPinned, onClick = _a.onClick, disabled = _a.disabled;
+    return (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { disabled: disabled, showForDisabled: true, onClick: onClick, icon: isPinned ? Pin_1.default : PinOutlined_1.default, tooltipTitle: disabled ? "You don't have permissions to pin" : ui_i18n_1.default.text('Pin'), size: "XS", disableRipple: true }));
 };
 exports.default = PinButton;

package/components/attributes/inline/common/__test__/IgnoreButton.spec.js

@@ -16,15 +16,19 @@ describe('Ignore button test', function () {
         onClickFn = jest.fn();
         component = enzyme_1.mount(react_1.default.createElement(IgnoreButton_1.default, { isIgnored: false, onClick: onClickFn }));
     });
-    it('should render correctly', function () {
-        expect(getButton(component).props()).toMatchObject({
-            tooltipTitle: 'Ignore',
-            onClick: onClickFn
-        });
+    it('should pass button props correctly', function () {
+        expect(getButton(component).prop('onClick')).toBe(onClickFn);
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('disabled')).toBe(true);
     });
     it('should show correct icon', function () {
         expect(getButton(component).prop('icon')).toBe(IgnoredOutlined_1.default);
         component.setProps({ isIgnored: true });
         expect(getButton(component).prop('icon')).toBe(Ignored_1.default);
     });
+    it('should show correct tooltip', function () {
+        expect(getButton(component).prop('tooltipTitle')).toBe('Ignore');
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('tooltipTitle')).toBe("You don't have permissions to ignore");
+    });
 });

package/components/attributes/inline/common/__test__/PinButton.spec.js

@@ -16,15 +16,19 @@ describe('Pin button test', function () {
         onClickFn = jest.fn();
         component = enzyme_1.mount(react_1.default.createElement(PinButton_1.default, { isPinned: false, onClick: onClickFn }));
     });
-    it('should render correctly', function () {
-        expect(getButton(component).props()).toMatchObject({
-            tooltipTitle: 'Pin',
-            onClick: onClickFn
-        });
+    it('should pass button props correctly', function () {
+        expect(getButton(component).prop('onClick')).toBe(onClickFn);
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('disabled')).toBe(true);
     });
     it('should show correct icon', function () {
         expect(getButton(component).prop('icon')).toBe(PinOutlined_1.default);
         component.setProps({ isPinned: true });
         expect(getButton(component).prop('icon')).toBe(Pin_1.default);
     });
+    it('should show correct tooltip', function () {
+        expect(getButton(component).prop('tooltipTitle')).toBe('Pin');
+        component.setProps({ disabled: true });
+        expect(getButton(component).prop('tooltipTitle')).toBe("You don't have permissions to pin");
+    });
 });

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.820",
+  "version": "1.4.821",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "^2.7.0",
-    "@reltio/mdm-module": "^1.4.820",
-    "@reltio/mdm-sdk": "^1.4.820",
+    "@reltio/mdm-module": "^1.4.821",
+    "@reltio/mdm-sdk": "^1.4.821",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",