Skip to content

Commit

Permalink
AXS-9: add a new section to app exchange to connect cluster to market…
Browse files Browse the repository at this point in the history 
…place (#1000)

* add marketplace connector to appstore

remove active from app-filters when clicking on launch market

remove padding from makret-content

move launch market to bottom

cluster enabled, link and settings

use real api

fix icon

i18n

fix i18n

set api_url if it is empty on enable and link

confirm dangerous actions

fix

* fix var name in template

* use grey instead of yellow

* show cluster id

* add link to marketplace

* open in new tab

* i18n for go to marketplace

* add cluster name to cluster link page

* Apply suggestions from code review

Co-authored-by: Joris Tirado <[email protected]>

* use camelCase in i18n file

* nest scss rules to clarify + convert rgb color to hex

* use base colors, move css styles out of html

* use camelCase in i18n

* move string to i18n file

* using getStore/setStore instead of polluting the app namespace

* use insertTemplate

* move maybeSetApiUrl to its own method

* fix cluser_id in template

* use base color

* getStore/setStore are defined by default in app namespace

* call callback only if there is no error?

* self is the new this

* revert storing appstoreData in store, store marketConfig instead

Revert all changes related to appstoreData, so it behaves as before.

Instead switching to fetch marketConfig data on demand when clicking on
marketConnector button, since I leanred how to store data in app namespace
without needing passing around the marketConfig object.

This also fixes fake mock.

Also fixing setting marketConfig after updateMarketConnector instead of mutating
appstoreData.marketplace as before.

* no detach, move renderApplist and its binding events to its own function

To fix issues with fadeIn/fadeOut and searchInput, instead of using detach to
switch between marketplce connector and app list, we just call renderApplist
again.

By moving all app list view binding events to its own function then we
successfully fix the issue with search input too.

Now when you switch back to app list from marketplace view the search input now
works.

Co-authored-by: Joris Tirado <[email protected]>
  • Loading branch information
@icehess @joristirado
icehess and joristirado authored May 9, 2022
1 parent d0da983 commit fb40f70
Show file tree
Hide file tree
Showing 10 changed files with 817 additions and 62 deletions.
393 changes: 364 additions & 29 deletions src/apps/appstore/app.js
View file

Large diffs are not rendered by default.

53 changes: 53 additions & 0 deletions src/apps/appstore/i18n/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,59 @@
"admins": "Admins only",
"specific": "Specific users"
},
"marketplace": {
"title": "Marketplace Connector",
"openToMarket": "Go to 2600Hz Marketplace",
"welcome": {
"title": "A new way to make Kazoo awesome is",
"titleFinally": "Finally here",
"encouragement": "The 2600Hz marketplace helps you get the most of Kazoo. In addition, we are working hard to offer the best experience to discover and install applications in your cluster.",
"enable": "Enable Marketplace Connector"
},
"linkage": {
"title": "Connect your cluster to 2600Hz Marketplace",
"lead": "In order to use applications from 2600Hz Marketplace, please follow these steps to connect your cluster to marketplace:",
"stepSingin": "Please Sign In into your account",
"stepSinginLink": "2600Hz Marketplace portal",
"stepGoto": "Go to",
"stepGotoLink": "Account Settings -> Manage My Cluster",
"stepGenerateCode": "Click on <strong>Generate Access Code</strong>",
"stepCopyCode": "Copy the newly generated Access Code",
"stepPasteCode": "Paste the Access Token below",
"formAccessCode": "Access Code:",
"formClusterName": "Name your Cluster:",
"formClusterId": "Cluster ID:",
"linkCluster": "Link your cluster"
},
"edition": {
"subtitle": "Appex Client Configuration",
"clusterId": "Cluster ID",
"apiUrl": "Crossbar API URL",
"dangerDisable": "Disable Marketplace Connector",
"dangerDisconnect": "Disconnect your cluster",
"dangerSection": "Danger Zone",
"helpApiUrl": "This URL will be used to serve UI app assets for marketplace applications.",
"helpDangerDisable": "Make Marketplace Connector to not run next time <code>kazoo_appex</code> or Kazoo nodes are restarted.",
"helpDangerDisconnect": "Disconnect your cluster from 2600Hz marketplace and cancel all apps.",
"helpMore": "To learn more about Marketplace Connector and these settings please see",
"helpMoreLink": "Marketplace documentation",
"helpWarnDangerDisable": "Your service might be disrupted if the Marketplace Connector is not running!",
"helpWarnDangerDisconnect": "Once you delete this Cluster connection, there is no going back. Your service will be disrupted!",
"settingsSection": "Settings",
"successUpdate": "You successfully saved changes to configuration!"
},
"dangerDisconnectDialog": {
"title": "Confirmation of Disconnecting from Marketplace",
"cancel": "Cancel",
"actionBtn": "Disconnect from Marketplace",
"actionKey": "DISCONNECT",
"messageIntro": "This action CANNOT be undone. This will permanently disassociate your cluster from 2600Hz Marketplace and remove any apps or services purchased from marketplace.",
"messageExplanation": "Please type the word \"{{variable}}\" in the following input and then click on the Disconnect button to proceed."
},
"dangerDisableDialog": {
"content": "This will disable Marketplace connector. Next time your Kazoo node starts, the apps purchased through marketplace will not be started! Do not forget to update the list startup apps."
}
},
"selectedUsers": "Selected Users",
"selectAll": "Select All",
"unselectAll": "Unselect All",
Expand Down
229 changes: 216 additions & 13 deletions src/apps/appstore/style/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,48 @@
border-bottom: none;
}

#appstore_container .left-menu .marketplace {
.launch-market {
margin: 15px auto;
padding: 15px 10px;

background: #47C1BF;
border-radius: 4px;
color: white;

cursor: pointer;
font-size: 16px;
height: 36px;
line-height: 36px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.launch-market:hover {
background: #2F8A89;
border-radius: 4px;
}
.launch-market.active {
background: #2F8A89;
border-radius: 4px;
}

.title {
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

i {
margin: 0 8px 0 4px;
font-size: 16px;
// color: #2F8A89;
color: white;
}
}
}

/********** RIGHT **********/

#appstore_container .right-content {
Expand All @@ -95,12 +137,12 @@

/* * * * * Center * * * * */

#appstore_container .right-content .app-list-container .app-list {
#appstore_container .right-content .right-container .app-list {
list-style: none;
margin: 0;
}

#appstore_container .right-content .app-list-container .app-element {
#appstore_container .right-content .right-container .app-element {
width: 270px;
height: 110px;
border: solid 1px #ccc;
Expand All @@ -120,7 +162,7 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}

#appstore_container .right-content .app-list-container .app-element:hover {
#appstore_container .right-content .right-container .app-element:hover {
background: -moz-linear-gradient(top, hsl(0,0%,96%) 0%, hsl(0,0%,99%) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsl(0,0%,96%)), color-stop(100%,hsl(0,0%,99%))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsl(0,0%,96%) 0%,hsl(0,0%,99%) 100%); /* Chrome10+,Safari5.1+ */
Expand All @@ -130,7 +172,7 @@
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
}

#appstore_container .right-content .app-list-container .app-element .app-installed {
#appstore_container .right-content .right-container .app-element .app-installed {
height: 18px;
width: 18px;
padding: 3px;
Expand All @@ -142,31 +184,31 @@
border-bottom-left-radius: 4px;
}

#appstore_container .right-content .app-list-container .app-element:not(.installed) .app-installed {
#appstore_container .right-content .right-container .app-element:not(.installed) .app-installed {
display: none;
}

#appstore_container .right-content .app-list-container .app-element-left {
#appstore_container .right-content .right-container .app-element-left {
float: left;
width: 70px;
height: 100%;
}

#appstore_container .right-content .app-list-container .app-element-left .app-icon {
#appstore_container .right-content .right-container .app-element-left .app-icon {
height: 100%;
width: 64px;
margin: auto;
background: url('./static/images/default_icon.png') no-repeat center;
background-size: contain;
}

#appstore_container .right-content .app-list-container .app-element-right {
#appstore_container .right-content .right-container .app-element-right {
float: left;
width: 190px;
margin-left: 10px;
}

#appstore_container .right-content .app-list-container .app-element-right .app-title {
#appstore_container .right-content .right-container .app-element-right .app-title {
text-transform: uppercase;
color: $primary-color;
font-weight: bold;
Expand All @@ -177,12 +219,173 @@
white-space: nowrap;
}

#appstore_container .right-content .app-list-container .app-element-right .app-description {
#appstore_container .right-content .right-container .app-element-right .app-description {
height: 80px;
overflow: hidden;
font-size: 12px;
}


#appstore_container #market-content {
border: 1px solid #e0e0e9;
border-radius: 2px;
background-color: #FFF;
overflow: hidden;

.market-body {
padding: 20px;
}

a .fa.fa-external-link {
color: $primary-color;
}

.form-horizontal .plain-text {
margin-top: 5px;
}
}

#market-content .market-welcome {
text-align: center;
font-size: 18px;

.market-title {
margin-bottom: 20px 0 30px;
.title_finally {
color: #271FE0;
display: block;
}
}
.market-body {
.actions {
padding: 20px 20px 10px;
}
}
}

#market-content .market-link {
.market-body {
a .fa.fa-external-link {
color: $primary-color;
}
form {
margin: 0;
padding: 30px 0 0;

textarea {
max-width: 450px;
width: 100%;
box-sizing: border-box;
}
.control-actions {
padding-top: 20px;
}
}
}
}

#market-content .market-settings {
.market-body {
form {
margin: 0;
padding: 30px 0 0;

textarea {
width: 450px;
}
}
}

.header-form {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
background-color: #22a5ff;
color: #fff;
height: 65px;
padding: 20px 20px 0;

.logo-header {
vertical-align: top;
margin-right: 25px;
width: 100px;
height: 37px;
}

.title {
font-size: 24px;
margin-bottom: 7px;
}
}

.go-to-market {
text-align: left;
padding-top: 10px;
}

form {
margin: 0;
.control-label {
text-align: left;
}
}

.content {
padding: 20px;

form {
margin: 0;
}
.help-block {
margin-bottom: 25px;

i.fa-question-circle {
margin-right: 10px;
}
}

.content-title {
border-bottom: 1px solid #c0c0c9;
color: #22a5ff;
font-size: 18px;
font-weight: 500;
margin-bottom: 25px;
padding-bottom: 10px;
}
}

.danger-content {
.content-data {
.row-wrap {
padding: 20px 0;
}
.danger-title {
margin-bottom: 10px;
font-size: 16px;
}
.help-block {
margin-bottom: 0;
}
}

button {
color: $danger-color;
border-color: $danger-color;
width: 100%;
i.fa {
color: $danger-color;
margin-right: 10px;
}
}
}
}

/************ Danger Confirmation Dialog ***************/
.danger-dialog #action_input {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 0px;
}

/********** POPUP **********/

#appstore_popup_container {
Expand Down Expand Up @@ -347,7 +550,7 @@
#appstore_popup_container .right-container .bottom-right-div {
position: absolute;
width: 180px;
bottom: 0px;
bottom: 0px;
}

#appstore_popup_container .right-container .help-bloc > div {
Expand All @@ -362,7 +565,7 @@
#appstore_popup_container .right-container .help-bloc a {
font-size: 14px;
font-weight: 600;
}
}

#appstore_popup_container .right-container .help-bloc a:hover {
color: $primary-color;
Expand Down Expand Up @@ -436,4 +639,4 @@

#appstore_popup_container .action-bar :not(:last-child) {
margin-right: 10px;
}
}
Binary file added src/apps/appstore/style/static/images/explore_marketplace.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit fb40f70

Please sign in to comment.