IO-3020 IO-3036 Update ESLint. Add LockWrapper for Header. Add Blur Wrapper.

client/src/components/lock-wrapper/locker-wrapper.component.jsx

@@ -0,0 +1,38 @@
+import { LockOutlined } from "@ant-design/icons";
+import { Space } from "antd";
+import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectRecentItems, selectSelectedHeader } from "../../redux/application/application.selectors";
+import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
+
+const mapStateToProps = createStructuredSelector({
+  currentUser: selectCurrentUser,
+  recentItems: selectRecentItems,
+  selectedHeader: selectSelectedHeader,
+  bodyshop: selectBodyshop
+});
+
+const LockWrapper = ({ featureName, bodyshop, children, disabled = true }) => {
+  let renderedChildren = children;
+
+  if (disabled) {
+    renderedChildren = React.Children.map(children, (child) => {
+      if (React.isValidElement(child)) {
+        return React.cloneElement(child, {
+          disabled: true
+        });
+      }
+      return child;
+    });
+  }
+
+  return (
+    <Space>
+      {!HasFeatureAccess({ featureName: featureName, bodyshop }) && <LockOutlined style={{ color: "tomato" }} />}
+      {renderedChildren}
+    </Space>
+  );
+};
+export default connect(mapStateToProps, null)(LockWrapper);