diff options
author | Stefan Malzner <stefan@adlk.io> | 2019-04-15 13:27:15 +0200 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2019-04-15 13:27:15 +0200 |
commit | 3a01cc4efb01942183c974e29cde2d4a657e206e (patch) | |
tree | 70a46d62fd8067d9b18f7ab9f121cceca6f6d244 /src/features | |
parent | Add workspace empty state (diff) | |
download | ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.tar.gz ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.tar.zst ferdium-app-3a01cc4efb01942183c974e29cde2d4a657e206e.zip |
Add services empty state
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/components/EditWorkspaceForm.js | 41 |
1 files changed, 32 insertions, 9 deletions
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js index bba4485ff..e602ebd5a 100644 --- a/src/features/workspaces/components/EditWorkspaceForm.js +++ b/src/features/workspaces/components/EditWorkspaceForm.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
@@ -36,6 +36,14 @@ const messages = defineMessages({ | |||
36 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', | 36 | id: 'settings.workspace.form.servicesInWorkspaceHeadline', |
37 | defaultMessage: '!!!Services in this Workspace', | 37 | defaultMessage: '!!!Services in this Workspace', |
38 | }, | 38 | }, |
39 | noServicesAdded: { | ||
40 | id: 'settings.services.noServicesAdded', | ||
41 | defaultMessage: '!!!You haven\'t added any services yet.', | ||
42 | }, | ||
43 | discoverServices: { | ||
44 | id: 'settings.services.discoverServices', | ||
45 | defaultMessage: '!!!Discover services', | ||
46 | }, | ||
39 | }); | 47 | }); |
40 | 48 | ||
41 | const styles = () => ({ | 49 | const styles = () => ({ |
@@ -150,14 +158,29 @@ class EditWorkspaceForm extends Component { | |||
150 | </div> | 158 | </div> |
151 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> | 159 | <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2> |
152 | <div className={classes.serviceList}> | 160 | <div className={classes.serviceList}> |
153 | {services.map(s => ( | 161 | {services.length === 0 ? ( |
154 | <WorkspaceServiceListItem | 162 | <div className="align-middle settings__empty-state"> |
155 | key={s.id} | 163 | {/* ===== Empty state ===== */} |
156 | service={s} | 164 | <p className="settings__empty-text"> |
157 | isInWorkspace={workspaceServices.includes(s.id)} | 165 | <span className="emoji"> |
158 | onToggle={() => this.toggleService(s)} | 166 | <img src="./assets/images/emoji/sad.png" alt="" /> |
159 | /> | 167 | </span> |
160 | ))} | 168 | {intl.formatMessage(messages.noServicesAdded)} |
169 | </p> | ||
170 | <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link> | ||
171 | </div> | ||
172 | ) : ( | ||
173 | <Fragment> | ||
174 | {services.map(s => ( | ||
175 | <WorkspaceServiceListItem | ||
176 | key={s.id} | ||
177 | service={s} | ||
178 | isInWorkspace={workspaceServices.includes(s.id)} | ||
179 | onToggle={() => this.toggleService(s)} | ||
180 | /> | ||
181 | ))} | ||
182 | </Fragment> | ||
183 | )} | ||
161 | </div> | 184 | </div> |
162 | </div> | 185 | </div> |
163 | <div className="settings__controls"> | 186 | <div className="settings__controls"> |