diff options
author | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
---|---|---|
committer | vantezzen <properly@protonmail.com> | 2019-09-07 15:50:23 +0200 |
commit | e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e (patch) | |
tree | b8314e4155503b135dcb07e8b4a0e847e25c19cf /src/features/workspaces/components/WorkspacesDashboard.js | |
parent | Update CHANGELOG.md (diff) | |
parent | Update CHANGELOG.md (diff) | |
download | ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.gz ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.tar.zst ferdium-app-e7a74514c1e7c3833dfdcf5900cb87f9e6e8354e.zip |
Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 173 |
1 files changed, 103 insertions, 70 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 9b51f2602..977b23999 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,9 +1,9 @@ | |||
1 | import React, { Component, Fragment } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox } from '@meetfranz/ui'; | 6 | import { Infobox, Badge } from '@meetfranz/ui'; |
7 | 7 | ||
8 | import Loader from '../../../components/ui/Loader'; | 8 | import Loader from '../../../components/ui/Loader'; |
9 | import WorkspaceItem from './WorkspaceItem'; | 9 | import WorkspaceItem from './WorkspaceItem'; |
@@ -11,7 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm'; | |||
11 | import Request from '../../../stores/lib/Request'; | 11 | import Request from '../../../stores/lib/Request'; |
12 | import Appear from '../../../components/ui/effects/Appear'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
13 | import { workspaceStore } from '../index'; | 13 | import { workspaceStore } from '../index'; |
14 | import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer'; | 14 | import UIStore from '../../../stores/UIStore'; |
15 | import globalMessages from '../../../i18n/globalMessages'; | ||
16 | import UpgradeButton from '../../../components/ui/UpgradeButton'; | ||
15 | 17 | ||
16 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
17 | headline: { | 19 | headline: { |
@@ -48,7 +50,7 @@ const messages = defineMessages({ | |||
48 | }, | 50 | }, |
49 | }); | 51 | }); |
50 | 52 | ||
51 | const styles = theme => ({ | 53 | const styles = () => ({ |
52 | table: { | 54 | table: { |
53 | width: '100%', | 55 | width: '100%', |
54 | '& td': { | 56 | '& td': { |
@@ -62,17 +64,28 @@ const styles = theme => ({ | |||
62 | height: 'auto', | 64 | height: 'auto', |
63 | }, | 65 | }, |
64 | premiumAnnouncement: { | 66 | premiumAnnouncement: { |
65 | padding: '20px', | ||
66 | backgroundColor: '#3498db', | ||
67 | marginLeft: '-20px', | ||
68 | marginBottom: '20px', | ||
69 | height: 'auto', | 67 | height: 'auto', |
70 | color: 'white', | 68 | }, |
71 | borderRadius: theme.borderRadius, | 69 | premiumAnnouncementContainer: { |
70 | display: 'flex', | ||
71 | }, | ||
72 | announcementHeadline: { | ||
73 | marginBottom: 0, | ||
74 | }, | ||
75 | teaserImage: { | ||
76 | width: 250, | ||
77 | margin: [-8, 0, 0, 20], | ||
78 | alignSelf: 'center', | ||
79 | }, | ||
80 | upgradeCTA: { | ||
81 | margin: [40, 'auto'], | ||
82 | }, | ||
83 | proRequired: { | ||
84 | margin: [10, 0, 40], | ||
72 | }, | 85 | }, |
73 | }); | 86 | }); |
74 | 87 | ||
75 | @injectSheet(styles) @observer | 88 | @inject('stores') @injectSheet(styles) @observer |
76 | class WorkspacesDashboard extends Component { | 89 | class WorkspacesDashboard extends Component { |
77 | static propTypes = { | 90 | static propTypes = { |
78 | classes: PropTypes.object.isRequired, | 91 | classes: PropTypes.object.isRequired, |
@@ -100,7 +113,9 @@ class WorkspacesDashboard extends Component { | |||
100 | onWorkspaceClick, | 113 | onWorkspaceClick, |
101 | workspaces, | 114 | workspaces, |
102 | } = this.props; | 115 | } = this.props; |
116 | |||
103 | const { intl } = this.context; | 117 | const { intl } = this.context; |
118 | |||
104 | return ( | 119 | return ( |
105 | <div className="settings__main"> | 120 | <div className="settings__main"> |
106 | <div className="settings__header"> | 121 | <div className="settings__header"> |
@@ -138,68 +153,80 @@ class WorkspacesDashboard extends Component { | |||
138 | 153 | ||
139 | {workspaceStore.isPremiumUpgradeRequired && ( | 154 | {workspaceStore.isPremiumUpgradeRequired && ( |
140 | <div className={classes.premiumAnnouncement}> | 155 | <div className={classes.premiumAnnouncement}> |
141 | <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2> | 156 | |
142 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | 157 | <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1> |
158 | <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> | ||
159 | <div className={classes.premiumAnnouncementContainer}> | ||
160 | <div className={classes.premiumAnnouncementContent}> | ||
161 | <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> | ||
162 | <UpgradeButton | ||
163 | className={classes.upgradeCTA} | ||
164 | gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }} | ||
165 | short | ||
166 | requiresPro | ||
167 | /> | ||
168 | </div> | ||
169 | <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" /> | ||
170 | </div> | ||
143 | </div> | 171 | </div> |
144 | )} | 172 | )} |
145 | 173 | ||
146 | <PremiumFeatureContainer | 174 | {!workspaceStore.isPremiumUpgradeRequired && ( |
147 | condition={workspaceStore.isPremiumFeature} | 175 | <> |
148 | gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }} | 176 | {/* ===== Create workspace form ===== */} |
149 | > | 177 | <div className={classes.createForm}> |
150 | {/* ===== Create workspace form ===== */} | 178 | <CreateWorkspaceForm |
151 | <div className={classes.createForm}> | 179 | isSubmitting={createWorkspaceRequest.isExecuting} |
152 | <CreateWorkspaceForm | 180 | onSubmit={onCreateWorkspaceSubmit} |
153 | isSubmitting={createWorkspaceRequest.isExecuting} | 181 | /> |
154 | onSubmit={onCreateWorkspaceSubmit} | 182 | </div> |
155 | /> | 183 | {getUserWorkspacesRequest.isExecuting ? ( |
156 | </div> | 184 | <Loader /> |
157 | {getUserWorkspacesRequest.isExecuting ? ( | 185 | ) : ( |
158 | <Loader /> | 186 | <Fragment> |
159 | ) : ( | 187 | {/* ===== Workspace could not be loaded error ===== */} |
160 | <Fragment> | 188 | {getUserWorkspacesRequest.error ? ( |
161 | {/* ===== Workspace could not be loaded error ===== */} | 189 | <Infobox |
162 | {getUserWorkspacesRequest.error ? ( | 190 | icon="alert" |
163 | <Infobox | 191 | type="danger" |
164 | icon="alert" | 192 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} |
165 | type="danger" | 193 | ctaLoading={getUserWorkspacesRequest.isExecuting} |
166 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | 194 | ctaOnClick={getUserWorkspacesRequest.retry} |
167 | ctaLoading={getUserWorkspacesRequest.isExecuting} | 195 | > |
168 | ctaOnClick={getUserWorkspacesRequest.retry} | 196 | {intl.formatMessage(messages.workspacesRequestFailed)} |
169 | > | 197 | </Infobox> |
170 | {intl.formatMessage(messages.workspacesRequestFailed)} | 198 | ) : ( |
171 | </Infobox> | 199 | <Fragment> |
172 | ) : ( | 200 | {workspaces.length === 0 ? ( |
173 | <Fragment> | 201 | <div className="align-middle settings__empty-state"> |
174 | {workspaces.length === 0 ? ( | 202 | {/* ===== Workspaces empty state ===== */} |
175 | <div className="align-middle settings__empty-state"> | 203 | <p className="settings__empty-text"> |
176 | {/* ===== Workspaces empty state ===== */} | 204 | <span className="emoji"> |
177 | <p className="settings__empty-text"> | 205 | <img src="./assets/images/emoji/sad.png" alt="" /> |
178 | <span className="emoji"> | 206 | </span> |
179 | <img src="./assets/images/emoji/sad.png" alt="" /> | 207 | {intl.formatMessage(messages.noServicesAdded)} |
180 | </span> | 208 | </p> |
181 | {intl.formatMessage(messages.noServicesAdded)} | 209 | </div> |
182 | </p> | 210 | ) : ( |
183 | </div> | 211 | <table className={classes.table}> |
184 | ) : ( | 212 | {/* ===== Workspaces list ===== */} |
185 | <table className={classes.table}> | 213 | <tbody> |
186 | {/* ===== Workspaces list ===== */} | 214 | {workspaces.map(workspace => ( |
187 | <tbody> | 215 | <WorkspaceItem |
188 | {workspaces.map(workspace => ( | 216 | key={workspace.id} |
189 | <WorkspaceItem | 217 | workspace={workspace} |
190 | key={workspace.id} | 218 | onItemClick={w => onWorkspaceClick(w)} |
191 | workspace={workspace} | 219 | /> |
192 | onItemClick={w => onWorkspaceClick(w)} | 220 | ))} |
193 | /> | 221 | </tbody> |
194 | ))} | 222 | </table> |
195 | </tbody> | 223 | )} |
196 | </table> | 224 | </Fragment> |
197 | )} | 225 | )} |
198 | </Fragment> | 226 | </Fragment> |
199 | )} | 227 | )} |
200 | </Fragment> | 228 | </> |
201 | )} | 229 | )} |
202 | </PremiumFeatureContainer> | ||
203 | </div> | 230 | </div> |
204 | </div> | 231 | </div> |
205 | ); | 232 | ); |
@@ -207,3 +234,9 @@ class WorkspacesDashboard extends Component { | |||
207 | } | 234 | } |
208 | 235 | ||
209 | export default WorkspacesDashboard; | 236 | export default WorkspacesDashboard; |
237 | |||
238 | WorkspacesDashboard.wrappedComponent.propTypes = { | ||
239 | stores: PropTypes.shape({ | ||
240 | ui: PropTypes.instanceOf(UIStore).isRequired, | ||
241 | }).isRequired, | ||
242 | }; | ||