versacall-core-library-react 2.0.70 → 2.0.71

package/dist/components/CoreSideBar/CoreSideBar.js

@@ -0,0 +1,737 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@material-ui/core/styles");
+var _Avatar = _interopRequireDefault(require("@material-ui/core/Avatar"));
+var _Badge = _interopRequireDefault(require("@material-ui/core/Badge"));
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));
+var _Drawer = _interopRequireDefault(require("@material-ui/core/Drawer"));
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
+var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));
+var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
+var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
+var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
+var _AccountCircle = _interopRequireDefault(require("@material-ui/icons/AccountCircle"));
+var _Delete = _interopRequireDefault(require("@material-ui/icons/Delete"));
+var _LocationCity = _interopRequireDefault(require("@material-ui/icons/LocationCity"));
+var _Menu2 = _interopRequireDefault(require("@material-ui/icons/Menu"));
+var _ExitToApp = _interopRequireDefault(require("@material-ui/icons/ExitToApp"));
+var _Notifications = _interopRequireDefault(require("@material-ui/icons/Notifications"));
+var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+var _Warning = _interopRequireDefault(require("@material-ui/icons/Warning"));
+var _StarBorder = _interopRequireDefault(require("@material-ui/icons/StarBorder"));
+var _Star = _interopRequireDefault(require("@material-ui/icons/Star"));
+var _reactIntl = require("react-intl");
+var _context = require("../../context");
+var _CoreSideBarDrawer = _interopRequireDefault(require("./CoreSideBarDrawer"));
+var _scrollbarModule = _interopRequireDefault(require("../../css/scrollbar.module.css"));
+require("../../css/scrollbar.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+
+// import Toolbar from '@material-ui/core/Toolbar';
+
+// import SettingsIcon from '@material-ui/icons/Settings';
+
+// import SubscriptionActiveIcon from '@material-ui/icons/CheckCircleOutline';
+// import SubscriptionInactiveIcon from '@material-ui/icons/ErrorOutline';
+
+const namespace = 'CoreSideBar';
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    height: '100vh',
+    overflow: 'hidden'
+  },
+  content: {
+    position: 'relative',
+    width: '100%'
+  },
+  topPadding: {
+    minHeight: 56,
+    '@media (min-width:600px)': {
+      minHeight: 64
+    }
+  },
+  drawerPaper: {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    backgroundColor: '#496b78',
+    color: '#ffffff',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  listItemRoot: {
+    color: '#ffffff'
+  },
+  menuPaper: {
+    backgroundColor: '#3f5c67'
+  },
+  menuItemRoot: {
+    color: '#ffffff'
+  },
+  icon: {
+    verticalAlign: 'middle',
+    height: 24,
+    width: 24
+  },
+  svgIcon: {
+    verticalAlign: 'middle',
+    height: 24,
+    width: 24,
+    filter: 'invert(1)'
+  },
+  inline: {
+    display: 'inline',
+    color: '#cccccc'
+  },
+  notificationRoot: {
+    width: 200
+  },
+  badgeError: {
+    backgroundColor: theme.palette.error.light,
+    color: theme.palette.error.contrastText
+  },
+  badgeWarning: {
+    backgroundColor: theme.palette.warning.light,
+    color: theme.palette.warning.contrastText
+  },
+  badgeInfo: {
+    backgroundColor: theme.palette.info.light,
+    color: theme.palette.info.contrastText
+  },
+  menuIconButton: {
+    // background: '#3f5c67',
+    // borderRadius: 10,
+    // marginRight: 10,
+  }
+});
+const style = {
+  title: {
+    // flexGrow: 1,
+    textAlign: 'center',
+    marginTop: 10,
+    marginBottom: 10
+  },
+  orgEntity: {
+    flexGrow: 1,
+    textAlign: 'center'
+  },
+  flex: {
+    // flexGrow: 1,
+    textAlign: 'center'
+  },
+  titleButton: {
+    textTransform: 'none',
+    borderColor: 'white'
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 12,
+    backgroundColor: '#496b78'
+  },
+  navLink: {
+    textDecoration: 'none',
+    color: '#ffffff'
+  },
+  // NOTE: activeStyle doesn't really seem to stay applied.  Believe this might be because HashRouter/Router is on a different component
+  activeStyle: {
+    backgroundColor: '#3f5c67',
+    color: '#55b7dc',
+    pointerEvents: 'none'
+  }
+};
+
+/* const getNotificationsBadgeColor = notifications => {
+  return 'warning';
+  let hasError = false;
+  let hasWarning = false;
+  notifications.forEach(notification => {
+    if (notification.type === 'error') {
+      hasError = true;
+    } if (notification.type === 'warning') {
+      hasWarning = true;
+    }
+  });
+  if (hasError) {
+    return 'error';
+  } if (hasWarning) {
+    return 'warning';
+  }
+  return 'primary';
+}; */
+
+class CoreSideBar extends _react.Component {
+  constructor() {
+    super();
+    this.state = {
+      drawer: false,
+      organizationAnchorEl: null,
+      entityAnchorEl: null,
+      authenticationAnchorEl: null,
+      notificationsAnchorEl: null,
+      apps: [],
+      organizations: [],
+      entities: [],
+      favorites: [],
+      // subscription: null,
+      notifications: []
+    };
+  }
+  componentDidMount() {
+    this.getOrganizations();
+    // this.getSubscription();
+    this.getNotifications();
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.authentication.didChange(prevProps.authentication)) {
+      this.getOrganizations();
+    }
+    if (this.props.organization.didOrganizationChange(prevProps.organization.organization)) {
+      this.getEntities();
+    }
+    if (this.props.authentication.didChange(prevProps.authentication) || this.props.organization.didChange(prevProps.organization)) {
+      this.getApps();
+      this.getFavorites();
+      // this.getSubscription();
+      this.getNotifications();
+    }
+  }
+  getOrganizations() {
+    const methodName = 'getOrganizations()';
+    this.props.authentication.http({
+      method: 'get',
+      url: "".concat(this.props.core.baseUrl, "/api/administration/organizations")
+    }).then(res => {
+      if (res.data.length > 0 && typeof res.data[0] === 'object') {
+        this.setState({
+          organizations: res.data
+        });
+        if (this.props.organization.organization === null || res.data.find(x => x.id === this.props.organization.organization.id) === undefined) {
+          this.props.organization.setOrganization(res.data[0]);
+        }
+      }
+    }).catch(error => {
+      this.props.core.log('error', namespace, methodName, error);
+    });
+  }
+  getEntities() {
+    const methodName = 'getEntities()';
+    if (this.props.organization.organization !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/administration/entities/organization/").concat(this.props.organization.organization.key)
+      }).then(res => {
+        if (res.data.length > 0 && typeof res.data[0] === 'object') {
+          this.setState({
+            entities: res.data
+          });
+          if (this.props.organization.entity === null || res.data.find(x => x.id === this.props.organization.entity.id) === undefined) {
+            this.props.organization.setEntity(res.data[0]);
+          }
+        }
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  getApps() {
+    const methodName = 'getApps()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/components/tiered"),
+        params: {
+          type: 'UI',
+          organizationId: this.props.organization.organization.id,
+          entityId: this.props.organization.entity.id
+        }
+      }).then(res => {
+        if (res.data.length > 0 && typeof res.data[0] === 'object') {
+          this.setState({
+            apps: res.data
+          });
+        }
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  getFavorites() {
+    const methodName = 'getFavorites()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'get',
+        url: "".concat(this.props.core.baseUrl, "/api/user/activity/favorites"),
+        params: {
+          type: 'App'
+        }
+      }).then(res => {
+        this.setState({
+          favorites: res.data
+        });
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  getNotifications() {
+    const methodName = 'getNotifications()';
+    const {
+      authentication,
+      core,
+      organization
+    } = this.props;
+    if (organization.organization !== null && organization.entity !== null) {
+      authentication.http({
+        method: 'get',
+        url: "".concat(core.baseUrl, "/api/user/activity/notifications"),
+        params: {
+          organizationId: organization.organization.id,
+          entityId: organization.entity.id
+        }
+      }).then(res => {
+        this.setState({
+          notifications: res.data
+        });
+      }).catch(error => {
+        core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+
+  /* getSubscription() {
+    const methodName = 'getSubscription()';
+    const { authentication, core, organization } = this.props;
+    if (organization.organization !== null && organization.entity !== null) {
+      authentication.http({
+        method: 'get',
+        url: `${core.baseUrl}/api/subscriptions/primary`,
+        params: {
+          organizationId: organization.organization.id,
+          entityId: organization.entity.id,
+        },
+      }).then(res => {
+        this.setState({ subscription: res.data });
+      }).catch(error => {
+        core.log('error', namespace, methodName, error);
+      });
+    }
+  } */
+
+  getUsersInitials() {
+    const {
+      authentication
+    } = this.props;
+    let initials = '';
+    if (authentication.token && authentication.token.userInfo) {
+      if (authentication.token.userInfo.firstName.length > 0) {
+        initials += authentication.token.userInfo.firstName[0].toUpperCase();
+      }
+      if (authentication.token.userInfo.lastName.length > 0) {
+        initials += authentication.token.userInfo.lastName[0].toUpperCase();
+      }
+    }
+    return initials;
+  }
+  getNotificationBadgeClass() {
+    const {
+      notifications
+    } = this.state;
+    const {
+      classes
+    } = this.props;
+    let hasError = false;
+    let hasWarning = false;
+    notifications.forEach(notification => {
+      if (notification.type === 'error') {
+        hasError = true;
+      }
+      if (notification.type === 'warning') {
+        hasWarning = true;
+      }
+    });
+    if (hasError) {
+      return classes.badgeError;
+    }
+    if (hasWarning) {
+      return classes.badgeWarning;
+    }
+    return classes.badgeInfo;
+  }
+  getNotificationIcon(type) {
+    const {
+      theme
+    } = this.props;
+    switch (type.toLowerCase()) {
+      case 'error':
+        // '#ff6666'
+        return /*#__PURE__*/_react.default.createElement(_Error.default, {
+          style: {
+            color: theme.palette.error.light
+          }
+        });
+      case 'warning':
+        // 'yellow'
+        return /*#__PURE__*/_react.default.createElement(_Warning.default, {
+          style: {
+            color: theme.palette.warning.light
+          }
+        });
+      default:
+        // 'lightblue'
+        return /*#__PURE__*/_react.default.createElement(_Info.default, {
+          style: {
+            color: theme.palette.info.light
+          }
+        });
+    }
+  }
+  favoriteApp() {
+    const methodName = 'favoriteApp()';
+    if (this.props.organization.organization !== null && this.props.organization.entity !== null) {
+      this.props.authentication.http({
+        method: 'post',
+        url: "".concat(this.props.core.baseUrl, "/api/user/activity/favorite"),
+        params: {
+          type: 'App',
+          itemId: this.props.componentID,
+          favorite: !this.state.favorites.includes(this.props.componentID)
+        }
+      }).then(() => {
+        this.getFavorites();
+      }).catch(error => {
+        this.props.core.log('error', namespace, methodName, error);
+      });
+    }
+  }
+  dismissNotification(id) {
+    const methodName = "dismissNotification(".concat(id, ")");
+    const {
+      authentication,
+      core
+    } = this.props;
+    authentication.http({
+      method: 'delete',
+      url: "".concat(core.baseUrl, "/api/user/activity/notifications/").concat(id)
+    }).catch(error => {
+      core.log('error', namespace, methodName, error);
+    });
+  }
+  handleMessage(channel, obj) {
+    switch (obj.what) {
+      case 'notifications_changed':
+        this.getNotifications();
+        break;
+      case 'package_enabled':
+      case 'package_disabled':
+      case 'package_added':
+      case 'package_updated':
+      case 'package_deleted':
+        this.getApps();
+        break;
+      case 'entities_added':
+      case 'entities_updated':
+      case 'entities_deleted':
+        this.getEntities();
+        break;
+      default:
+        break;
+    }
+  }
+  render() {
+    const {
+      title,
+      componentID,
+      authentication,
+      organization,
+      classes
+    } = this.props;
+    const {
+      notificationsAnchorEl,
+      notifications
+    } = this.state;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.root
+    }, /*#__PURE__*/_react.default.createElement(_context.ChannelsConsumer, {
+      id: "coreappbar",
+      handler: (channel, obj) => this.handleMessage(channel, obj)
+    }), /*#__PURE__*/_react.default.createElement(_Drawer.default, {
+      variant: "permanent",
+      classes: {
+        paper: classes.drawerPaper
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: ' row',
+        backgroundColor: '#3f5c67'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        backgroundColor: '#496b78',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      style: {
+        margin: 8
+      },
+      color: "inherit",
+      onClick: () => this.setState({
+        drawer: true
+      })
+    }, /*#__PURE__*/_react.default.createElement(_Menu2.default, null))), /*#__PURE__*/_react.default.createElement("div", {
+      style: style.orgEntity
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      color: "inherit",
+      style: style.titleButton,
+      variant: "text",
+      onClick: this.state.entities.length > 1 ? e => this.setState({
+        entityAnchorEl: e.currentTarget
+      }) : null
+    }, /*#__PURE__*/_react.default.createElement("div", null, organization.organization ? organization.organization.name : null, this.props.showEntity && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), organization.entity ? organization.entity.name : null))))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      style: style.title,
+      variant: "h6",
+      color: "inherit"
+    }, title), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(_scrollbarModule.default.scroll, " ").concat(_scrollbarModule.default.white),
+      style: {
+        flexGrow: 1,
+        minHeight: 0,
+        overflow: 'auto'
+      }
+    }, this.props.content), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: 5
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: "".concat(this.props.authentication.token.userInfo.firstName, " ").concat(this.props.authentication.token.userInfo.lastName)
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      onClick: e => this.setState({
+        authenticationAnchorEl: e.currentTarget
+      }),
+      className: classes.menuIconButton
+    }, /*#__PURE__*/_react.default.createElement(_AccountCircle.default, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: notifications.length > 0 ? "You have ".concat(notifications.length, " notification").concat(notifications.length > 0 ? 's' : '') : 'There are no notifications'
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      onClick: notifications.length > 0 ? e => this.setState({
+        notificationsAnchorEl: e.currentTarget
+      }) : null,
+      className: classes.menuIconButton
+    }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+      badgeContent: notifications.length,
+      classes: {
+        badge: this.getNotificationBadgeClass()
+      },
+      showZero: false
+    }, /*#__PURE__*/_react.default.createElement(_Notifications.default, null)))), componentID.length > 0 && /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+      title: this.state.favorites.includes(componentID) ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        id: "__favorite"
+      }) : /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+        id: "__click_to_favorite"
+      })
+    }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      color: "inherit",
+      onClick: () => this.favoriteApp(),
+      className: classes.menuIconButton
+    }, this.state.favorites.includes(componentID) ? /*#__PURE__*/_react.default.createElement(_Star.default, {
+      color: "inherit"
+    }) : /*#__PURE__*/_react.default.createElement(_StarBorder.default, {
+      color: "inherit"
+    }))))), /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.content
+    }, this.props.children), /*#__PURE__*/_react.default.createElement(_CoreSideBarDrawer.default, {
+      open: this.state.drawer,
+      onClose: () => this.setState({
+        drawer: false
+      }),
+      apps: this.state.apps
+    }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      open: !!this.state.organizationAnchorEl,
+      anchorEl: this.state.organizationAnchorEl,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      onClose: () => this.setState({
+        organizationAnchorEl: null
+      })
+    }, this.state.organizations.map(org => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      key: org.id,
+      onClick: () => {
+        organization.setOrganization(org);
+        this.setState({
+          organizationAnchorEl: null
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_LocationCity.default, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: org.name,
+      inset: true
+    })))), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      classes: {
+        paper: classes.menuPaper
+      },
+      anchorEl: this.state.entityAnchorEl,
+      anchorOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'center'
+      },
+      open: !!this.state.entityAnchorEl,
+      onClose: () => this.setState({
+        entityAnchorEl: null
+      })
+    }, this.state.entities.map(entity => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      classes: {
+        root: classes.menuItemRoot
+      },
+      key: entity.key,
+      onClick: () => {
+        organization.setEntity(entity);
+        this.setState({
+          entityAnchorEl: null
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+      classes: {
+        root: classes.listItemRoot
+      }
+    }, /*#__PURE__*/_react.default.createElement(_LocationCity.default, null)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      classes: {
+        primary: classes.listItemRoot
+      },
+      primary: entity.name,
+      inset: true
+    })))), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      classes: {
+        paper: classes.menuPaper
+      },
+      open: !!this.state.authenticationAnchorEl,
+      anchorEl: this.state.authenticationAnchorEl,
+      onClose: () => this.setState({
+        authenticationAnchorEl: null
+      })
+    }, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      classes: {
+        root: classes.menuItemRoot
+      },
+      style: {
+        outline: 0
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Avatar.default, {
+      style: {
+        marginRight: 10
+      }
+    }, this.getUsersInitials()), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      classes: {
+        primary: classes.menuItemRoot,
+        secondary: classes.menuItemRoot
+      },
+      primary: "".concat(this.props.authentication.token.userInfo.firstName, " ").concat(this.props.authentication.token.userInfo.lastName),
+      secondary: this.props.authentication.token.userInfo.emailAddress
+    })), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement("a", {
+      href: this.props.core.formatUrl('/profile'),
+      style: {
+        all: 'unset'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      classes: {
+        root: classes.menuItemRoot
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__my_profile"
+    }))), /*#__PURE__*/_react.default.createElement(_Divider.default, null), /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
+      classes: {
+        root: classes.menuItemRoot
+      },
+      onClick: () => authentication.logout()
+    }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+      id: "__log_out"
+    }))), /*#__PURE__*/_react.default.createElement(_Menu.default, {
+      classes: {
+        paper: classes.menuPaper,
+        root: classes.notificationRoot
+      },
+      open: !!notificationsAnchorEl,
+      anchorEl: notificationsAnchorEl,
+      onClose: () => this.setState({
+        notificationsAnchorEl: null
+      })
+    }, notifications.map(notification => /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+      key: notification.id,
+      classes: {
+        root: classes.menuItemRoot
+      }
+    }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, this.getNotificationIcon(notification.type)), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+      primary: notification.title,
+      secondary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+        component: "span",
+        variant: "body2",
+        className: classes.inline,
+        color: "inherit"
+      }, notification.description))
+    }), notification.url && notification.url.length > 0 && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      style: {
+        marginLeft: 5
+      },
+      "aria-label": "navigate",
+      onClick: () => window.open(notification.url, '__BLANK')
+    }, /*#__PURE__*/_react.default.createElement(_ExitToApp.default, {
+      style: {
+        color: '#ffffff'
+      }
+    })), notification.isDismissable && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      style: {
+        marginLeft: 5
+      },
+      "aria-label": "delete",
+      onClick: () => this.dismissNotification(notification.id)
+    }, /*#__PURE__*/_react.default.createElement(_Delete.default, {
+      style: {
+        color: '#ffffff'
+      }
+    }))))));
+  }
+}
+CoreSideBar.propTypes = {
+  title: _propTypes.default.string,
+  showEntity: _propTypes.default.bool,
+  componentID: _propTypes.default.string,
+  core: _propTypes.default.shape().isRequired,
+  authentication: _propTypes.default.shape().isRequired,
+  // intl: PropTypes.shape().isRequired,
+  organization: _propTypes.default.shape().isRequired,
+  classes: _propTypes.default.shape().isRequired,
+  theme: _propTypes.default.shape().isRequired,
+  children: _propTypes.default.node,
+  content: _propTypes.default.node
+};
+CoreSideBar.defaultProps = {
+  showEntity: false,
+  title: '',
+  componentID: '',
+  children: null,
+  content: null
+};
+var _default = exports.default = (0, _reactIntl.injectIntl)((0, _context.withCore)((0, _context.withAuthentication)((0, _context.withOrganization)((0, _styles.withTheme)((0, _styles.withStyles)(styles)(CoreSideBar))))));