Add new version notification (#1977)

* add menu item

* implement versions modal

* fix up modal

* clean up badges

* implement key features

* fix up spacing

* add error message

* add notification icon

* fix notification

* fix bug when no updates

* address lint issues

* address multi line nodes

* add closing animation

* keep drawer open

* address design feedback

* address badge styling

* use grid for icons

* update cli to return version information

* set env variables

* add scss color variables

* address comments

* fix lint issue

* handle edge cases

* update scss variables, spacing

* update spacing

* build

* override top value for theme

* bolden version

* update config

* check endpoint exists

* handle long names

* set dates

* set title

* fix bug

* update warning

* remove unused component

* refactor components

* add fragments

* inherit styles

* fix icon size

* fix lint issues

* add cli dep

* address comments

* handle network error

* address empty case

* Revert "address comments"

480f969e07c3282c50bc326babbc5812baac5dae

* remove dependency

* build

* update variable names

* update variable names

* refactor verion card

* split out variables

* clean up impl

* clean up scss

* move from nodeview

* refactor out gift notification icon

* fix lint issues

* clean up variables

* update scss variables

* update info url

* Add instanceId to frontendSettings

* Use createHash from crypto module

* Add instanceId to store & send it as http header

* Fix lintings

* Fix interfaces & apply review changes

* Apply review changes

* add console message

* update text info

* update endpoint

* clean up interface

* address comments

* cleanup todo

* Update packages/cli/config/index.ts

Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* update console message

*  Display node-name on hover

*  Formatting fix

Co-authored-by: MedAliMarz <servfrdali@yahoo.fr>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>
Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Mutasem Aldmour
2021-07-22 10:22:17 +02:00
committed by GitHub
parent 073e5e24cb
commit 98ec23544b
30 changed files with 793 additions and 25 deletions

View File

@@ -127,6 +127,14 @@
<MenuItemsIterator :items="sidebarMenuBottomItems" :root="true"/>
<div class="footer-menu-items">
<el-menu-item index="updates" class="updates" v-if="hasVersionUpdates" @click="openUpdatesPanel">
<div class="gift-container">
<GiftNotificationIcon />
</div>
<span slot="title" class="item-title-root">{{nextVersions.length > 99 ? '99+' : nextVersions.length}} update{{nextVersions.length > 1 ? 's' : ''}} available</span>
</el-menu-item>
</div>
</el-menu>
</div>
@@ -149,6 +157,7 @@ import About from '@/components/About.vue';
import CredentialsEdit from '@/components/CredentialsEdit.vue';
import CredentialsList from '@/components/CredentialsList.vue';
import ExecutionsList from '@/components/ExecutionsList.vue';
import GiftNotificationIcon from './GiftNotificationIcon.vue';
import WorkflowSettings from '@/components/WorkflowSettings.vue';
import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -212,6 +221,7 @@ export default mixins(
CredentialsEdit,
CredentialsList,
ExecutionsList,
GiftNotificationIcon,
WorkflowSettings,
MenuItemsIterator,
},
@@ -232,6 +242,10 @@ export default mixins(
...mapGetters('ui', {
isCollapsed: 'sidebarMenuCollapsed',
}),
...mapGetters('versions', [
'hasVersionUpdates',
'nextVersions',
]),
exeuctionId (): string | undefined {
return this.$route.params.id;
},
@@ -311,6 +325,9 @@ export default mixins(
openTagManager() {
this.$store.dispatch('ui/openTagsManagerModal');
},
openUpdatesPanel() {
this.$store.dispatch('ui/openUpdatesPanel');
},
async stopExecution () {
const executionId = this.$store.getters.activeExecutionId;
if (executionId === null) {
@@ -574,6 +591,39 @@ a.logo {
&.expanded {
width: $--sidebar-expanded-width;
}
ul {
display: flex;
flex-direction: column;
}
}
.footer-menu-items {
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 32px;
}
.el-menu-item.updates {
color: $--sidebar-inactive-color;
.item-title-root {
font-size: 13px;
top: 0 !important;
}
&:hover {
color: $--sidebar-active-color;
}
.gift-container {
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
width: 100%;
}
}
</style>