Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Empty State Images #2104

Merged
merged 4 commits into from
May 10, 2023
Merged

Add Empty State Images #2104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4a73a23
Add (optimised) empty state images & update EmptyState CSS
joepavitt May 9, 2023
1eb8705
Add images to each EmptyState across Platform
joepavitt May 9, 2023
bb6e1e1
Update empty state message in tests
joepavitt May 9, 2023
6322e87
Update another empty state message in tests
joepavitt May 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions frontend/src/components/DevicesBrowser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,10 @@
<template v-else>
<template v-if="displayingTeam">
<EmptyState data-el="team-no-devices">
<template #header>Add your First Device</template>
<template #img>
<img src="../images/empty-states/team-devices.png">
</template>
<template #header>Connect your First Device</template>
<template #message>
<p>
Devices in FlowForge allow you to manage Node-RED instances
Expand Down Expand Up @@ -123,13 +126,16 @@
</template>
<template v-else-if="displayingInstance">
<EmptyState data-el="instance-no-devices">
<template #img>
<img src="../images/empty-states/instance-devices.png">
</template>
<template #header>Connect your First Device</template>
<template #message>
<p>
Here, you will see a list of Devices connected to this Node-RED Instance.
</p>
<p>
You can deploy Snapshots of this Instance to your connected Devices.
You can deploy <router-link class="ff-link" :to="{name: 'InstanceSnapshots', params: {id: instance.id}}">Snapshots</router-link> of this Instance to your connected Devices.
</p>
<p>
A full list of your Team's Devices are available <router-link
Expand Down
22 changes: 14 additions & 8 deletions frontend/src/components/EmptyState.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,19 @@
<template>
<div class="ff-empty-state">
<h1>
<slot name="header" />
</h1>
<div class="ff-empty-state--message">
<slot name="message" />
</div>
<div class="ff-empty-state--actions">
<slot name="actions" />
<div>
<slot name="img" />
<h1>
<slot name="header" />
</h1>
<div class="ff-empty-state--message">
<slot name="message" />
</div>
<div class="ff-empty-state--actions">
<slot name="actions" />
</div>
<div class="ff-empty-state--note">
<slot name="note" />
</div>
</div>
</div>
</template>
Expand Down
Binary file added frontend/src/images/empty-states/application-instances.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/application-pipelines.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/instance-devices.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/instance-snapshots.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/team-applications.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/team-devices.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/team-instances.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added frontend/src/images/empty-states/team-library.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 10 additions & 5 deletions frontend/src/pages/application/Overview.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,16 +60,14 @@
</template>
</ff-data-table>
<EmptyState v-else>
<template #img>
<img src="../../images/empty-states/application-instances.png">
</template>
<template #header>Add your Application's First Instance</template>
<template #message>
<p>
Applications in FlowForge are used to manage groups of Node-RED Instances.
</p>
<p>
The FlowForge team also have more planned for Applications, including
<a class="ff-link" href="https://github.com/flowforge/flowforge/issues/1734" target="_blank">
shared settings across Instances</a>.
</p>
</template>
<template #actions>
<ff-button
Expand All @@ -79,6 +77,13 @@
Add Instance
</ff-button>
</template>
<template #note>
<p>
The FlowForge team also have more planned for Applications, including
<a class="ff-link" href="https://github.com/flowforge/flowforge/issues/1734" target="_blank">
shared settings across Instances</a>.
</p>
</template>
</EmptyState>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/pages/instance/Snapshots/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@
</template>
<template v-else-if="!loading">
<EmptyState>
<template #img>
<img src="../../../images/empty-states/instance-snapshots.png">
</template>
<template #header>Create your First Snapshot</template>
<template #message>
<p>
Expand Down
15 changes: 10 additions & 5 deletions frontend/src/pages/team/Applications.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,18 +70,16 @@
</div>
<div v-else>
<EmptyState>
<template #img>
<img src="../../images/empty-states/team-applications.png">
</template>
<template #header>Get Started with your First Application</template>
<template #message>
<p>Applications in FlowForge are used to manage groups of Node-RED Instances</p>
<p>
Instances within Applications can be connected as
<a class="ff-link" href="https://flowforge.com/docs/user/staged-deployments" target="_blank">Staged Deployments.</a>
</p>
<p>
The FlowForge team also have more planned for Applications, including
<a class="ff-link" href="https://github.com/flowforge/flowforge/issues/1734" target="_blank">
shared settings across Instances</a>.
</p>
</template>
<template #actions>
<ff-button
Expand All @@ -96,6 +94,13 @@
Create Application
</ff-button>
</template>
<template #note>
<p>
The FlowForge team also have more planned for Applications, including
<a class="ff-link" href="https://github.com/flowforge/flowforge/issues/1734" target="_blank">
shared settings across Instances</a>.
</p>
</template>
</EmptyState>
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions frontend/src/pages/team/Instances.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<SectionTopMenu hero="Instances" />
<SectionTopMenu hero="Instances" info="A list of all Node-RED instances running in FlowForge for this Team." />
<div class="space-y-6">
<ff-loading v-if="loading" message="Loading Instances..." />
<template v-else>
Expand All @@ -23,6 +23,9 @@
</template>
</ff-data-table>
<EmptyState v-else>
<template #img>
<img src="../../images/empty-states/team-instances.png">
</template>
<template #header>Get Started with your First Node-RED Instance</template>
<template #message>
<p>
Expand All @@ -31,10 +34,10 @@
:to="{name:'Applications', params: {team_slug: team.slug}}"
>
Applications
</router-link> .
</router-link>.
</p>
<p>
You can create your first Instance when creating your first Application.
You can create your first Instance when creating your first Application, or add an Instance to an existing Application if you have one.
</p>
</template>
<template #actions>
Expand Down
12 changes: 10 additions & 2 deletions frontend/src/pages/team/Library.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,22 @@
<ff-code-previewer v-else ref="code-preview" :snippet="contents" />
</div>
<EmptyState v-else>
<template #img>
<img src="../../images/empty-states/team-library.png">
</template>
<template #header>Create your own Team Library</template>
<template #message>
<p>
Node-RED allows you to import and export flows and functions to a shared <a class="ff-link" href="https://flowforge.com/docs/user/shared-library/" target="_blank">Team Library</a>.
You can import and export flows and functions to a shared <a class="ff-link" href="https://flowforge.com/docs/user/shared-library/" target="_blank">Team Library</a> from within your Node-RED Instances.
</p>
<p>
The contents of this Library are then available within all of your Node-RED instances on FlowForge.
The contents of your Team Library will show here, and will be available within all of your Node-RED instances on FlowForge.
</p>
</template>
<template #actions>
<ff-button :to="{name: 'Instances'}">Go To Instances</ff-button>
</template>
<template #note>
<p>
You can see a video of how to get started with this feature <a class="ff-link" href="https://www.youtube.com/watch?v=B7XK3TUklUU" target="_blank">here</a>.
</p>
Expand Down
23 changes: 20 additions & 3 deletions frontend/src/stylesheets/components/empty-state.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,27 @@
background-color: white;
border: 1px solid $ff-grey-200;
border-radius: 3px;
>div {
max-width: 400px;
margin: auto;
}
img {
margin: auto;
}
h1 {
font-size: 1.25rem;
line-height: 1.25rem;
font-size: 1.5rem;
line-height: 1.75rem;
margin: auto;
margin-top: 1.5rem;
margin-bottom: 1rem;
font-weight: 500;
}
&--message {
max-width: 450px;
font-size: 1.1rem;
margin: auto;
margin-bottom: 1.2rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
p {
margin-bottom: 0.75rem;
line-height: 1.5rem;
Expand All @@ -27,4 +38,10 @@
display: flex;
justify-content: center;
}
&--note {
display: flex;
justify-content: center;
margin-top: 1.75rem;
color: $ff-grey-400;
}
}
4 changes: 2 additions & 2 deletions test/e2e/frontend/cypress/tests/devices.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('FlowForge - Devices', () => {
})

it('shows a placeholder message when no devices have been created', () => {
cy.get('main').contains('Add your First Device')
cy.get('main').contains('Connect your First Device')
joepavitt marked this conversation as resolved.
Show resolved Hide resolved
})

it('provides functionality to register a device', () => {
Expand Down Expand Up @@ -64,7 +64,7 @@ describe('FlowForge - Devices', () => {

cy.wait('@deleteDevice')

cy.get('main').contains('Add your First Device')
cy.get('main').contains('Connect your First Device')
})

it('can load multiple pages of devices when the API paginates', function () {
Expand Down