From 47c1c99d893517efc679ab29d675cc0bf44be8be Mon Sep 17 00:00:00 2001 From: Dominik Guzei Date: Thu, 11 Apr 2019 16:54:01 +0200 Subject: feat(App): Added Workspaces for all your daily routines 🥳 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * merge default and fetched feature configs * ignore intellij project files * basic setup for workspaces feature * define workspaces as premium feature * add workspaces menu item in settings dialog * basic setup of workspaces settings screen * fix eslint error * assign react key prop to workspace items * add styles for workspace table * setup logic to display workspace edit page * consolidate workspace feature for further development * prepare basic workspace edit form * add on enter key handler for form input component * add form for creating workspaces * small fixes * adds flow for deleting workspaces * stop tracking google analytics in components * pin gulp-sass-variables version to 1.1.1 * fix merge conflict * fix bug in form input library * improve workspace form setup * finish basic workspace settings * finish workspaces mvp * fix eslint issues * remove dev logs * detach service when underlying webview unmounts * disable no-param-reassign eslint rule * add workspace drawer * change workspace switch shortcuts to start with zero * add workspace drawer toggle menu item and shortcut * improve workspace switching ux * style add workspace icon in drawer like the sidebar icons * improve workspace drawer layout * add i18n messages for service loading and workspace switching * small fixes * add tooltip to add workspace button in drawer * add workspaces count badge in settings navigation * fix merge conflicts with latest develop * refactor state management for workspace feature * reset api requests when workspace feature is stopped * hide workspace feature if it is disabled * handle get workspaces request errors in the ui * show infobox when updating workspaces * indicate any server interaction with spinners and infoboxes * add analytic events for workspace actions * improve styling of workspace switch indicator * add workspace premium notice to dashboard * add workspace feature info in drawer for free users * add workspace premium badge in settings nav * fix premium workspace badge in settings menu for light theme * fix active workspaces settings premium badge in light theme * give upgrade account button a bit more padding * add open last used workspace logic * use mobx-localstorage directly in the store * fix wrong workspace tooltip shortcut in sidebar * fix bug in workspace feature initialization * show workspaces intro in drawer when user has none yet * fix issues for users that have workspace but downgraded to free * border radius for premium intro in workspace settings * close workspace drawer after clicking on a workspace * add hover effect for drawer workspace items * ensure drawer is open on workspace settings routes * add small text label for adding new workspace to drawer * make workspace settings list items taller * refactor workspace table css away from legacy styles * render workspace service list like services + toggle * change plus icon in workspace drawer to settings icon * autofocus create workspace input field * add css transition to drawer workspace item hover * fix drawer add workspace label styles * refactors workspace theme vars into object structure * improve contrast of workspace switching indicator * added generic pro badge component for settings nav * add premium badge to workspace drawer headline * add context menu for workspace drawer items * handle deleted services that are attached to workspaces --- .../workspaces/components/WorkspaceDrawer.js | 246 +++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 src/features/workspaces/components/WorkspaceDrawer.js (limited to 'src/features/workspaces/components/WorkspaceDrawer.js') diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js new file mode 100644 index 000000000..684e50dd0 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawer.js @@ -0,0 +1,246 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { observer } from 'mobx-react'; +import injectSheet from 'react-jss'; +import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; +import { H1, Icon, ProBadge } from '@meetfranz/ui'; +import { Button } from '@meetfranz/forms/lib'; +import ReactTooltip from 'react-tooltip'; + +import WorkspaceDrawerItem from './WorkspaceDrawerItem'; +import { workspaceActions } from '../actions'; +import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index'; +import { gaEvent } from '../../../lib/analytics'; + +const messages = defineMessages({ + headline: { + id: 'workspaceDrawer.headline', + defaultMessage: '!!!Workspaces', + }, + allServices: { + id: 'workspaceDrawer.allServices', + defaultMessage: '!!!All services', + }, + workspacesSettingsTooltip: { + id: 'workspaceDrawer.workspacesSettingsTooltip', + defaultMessage: '!!!Workspaces settings', + }, + workspaceFeatureInfo: { + id: 'workspaceDrawer.workspaceFeatureInfo', + defaultMessage: '!!!Info about workspace feature', + }, + premiumCtaButtonLabel: { + id: 'workspaceDrawer.premiumCtaButtonLabel', + defaultMessage: '!!!Create your first workspace', + }, + reactivatePremiumAccount: { + id: 'workspaceDrawer.reactivatePremiumAccountLabel', + defaultMessage: '!!!Reactivate premium account', + }, + addNewWorkspaceLabel: { + id: 'workspaceDrawer.addNewWorkspaceLabel', + defaultMessage: '!!!add new workspace', + }, + premiumFeatureBadge: { + id: 'workspaceDrawer.proFeatureBadge', + defaultMessage: '!!!Premium feature', + }, +}); + +const styles = theme => ({ + drawer: { + background: theme.workspaces.drawer.background, + width: `${theme.workspaces.drawer.width}px`, + }, + headline: { + fontSize: '24px', + marginTop: '38px', + marginBottom: '25px', + marginLeft: theme.workspaces.drawer.padding, + }, + headlineProBadge: { + marginRight: 15, + }, + workspacesSettingsButton: { + float: 'right', + marginRight: theme.workspaces.drawer.padding, + marginTop: '2px', + }, + workspacesSettingsButtonIcon: { + fill: theme.workspaces.drawer.buttons.color, + '&:hover': { + fill: theme.workspaces.drawer.buttons.hoverColor, + }, + }, + workspaces: { + height: 'auto', + }, + premiumAnnouncement: { + padding: '20px', + paddingTop: '0', + height: 'auto', + }, + premiumCtaButton: { + marginTop: '20px', + width: '100%', + color: 'white !important', + }, + addNewWorkspaceLabel: { + height: 'auto', + color: theme.workspaces.drawer.buttons.color, + marginTop: 40, + textAlign: 'center', + '& > svg': { + fill: theme.workspaces.drawer.buttons.color, + }, + '& > span': { + fontSize: '13px', + marginLeft: 10, + position: 'relative', + top: -3, + }, + '&:hover': { + color: theme.workspaces.drawer.buttons.hoverColor, + '& > svg': { + fill: theme.workspaces.drawer.buttons.hoverColor, + }, + }, + }, +}); + +@injectSheet(styles) @observer +class WorkspaceDrawer extends Component { + static propTypes = { + classes: PropTypes.object.isRequired, + getServicesForWorkspace: PropTypes.func.isRequired, + onUpgradeAccountClick: PropTypes.func.isRequired, + }; + + static contextTypes = { + intl: intlShape, + }; + + componentDidMount() { + ReactTooltip.rebuild(); + } + + render() { + const { + classes, + getServicesForWorkspace, + onUpgradeAccountClick, + } = this.props; + const { intl } = this.context; + const { + activeWorkspace, + isSwitchingWorkspace, + nextWorkspace, + workspaces, + } = workspaceStore; + const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace; + return ( +
+

+ {workspaceStore.isPremiumUpgradeRequired && ( + + + + )} + {intl.formatMessage(messages.headline)} + { + workspaceActions.openWorkspaceSettings(); + gaEvent(GA_CATEGORY_WORKSPACES, 'settings', 'drawerHeadline'); + }} + data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`} + > + + +

+ {workspaceStore.isPremiumUpgradeRequired ? ( +
+ + {workspaceStore.userHasWorkspaces ? ( +
+ ) : ( +
+ { + workspaceActions.deactivate(); + workspaceActions.toggleWorkspaceDrawer(); + gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); + }} + services={getServicesForWorkspace(null)} + isActive={actualWorkspace == null} + /> + {workspaces.map(workspace => ( + { + if (actualWorkspace === workspace) return; + workspaceActions.activate({ workspace }); + workspaceActions.toggleWorkspaceDrawer(); + gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer'); + }} + onContextMenuEditClick={() => workspaceActions.edit({ workspace })} + services={getServicesForWorkspace(workspace)} + /> + ))} +
{ + workspaceActions.openWorkspaceSettings(); + gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel'); + }} + > + + + {intl.formatMessage(messages.addNewWorkspaceLabel)} + +
+
+ )} + +
+ ); + } +} + +export default WorkspaceDrawer; -- cgit v1.2.3-70-g09d2