Regression: Apps and Marketplace UI issues (#15045)

* Alert admins about apps on invalid state * Implement ui for warning and error alerts in apps * Open detail modal on viewing subscription info instead of the subscribe one. Check license after close * Implement ui for failed state of apps in detail screen * Add failure alert support into appManage * Show validation erros/warnings on app detail page * Add status column to apps template * Update uninstall modal * Notify admins of disabled apps with valid licenses
RocketChat · Jul 30, 2019 · ee2ed86 · ee2ed86
1 parent 34f24f4
commit ee2ed86
Show file tree

Hide file tree

Showing 27 changed files with 2,070 additions and 1,781 deletions.
diff --git a/.stylelintignore b/.stylelintignore
@@ -1,3 +1,4 @@
 app/theme/client/vendor/fontello/css/fontello.css
 packages/meteor-autocomplete/client/autocomplete.css
 app/katex/katex.min.css
+app/emoji-emojione/client/*.css
diff --git a/app/api/server/api.js b/app/api/server/api.js
@@ -120,6 +120,16 @@ class APIClass extends Restivus {
 		};
 	}
 
+	internalError(msg) {
+		return {
+			statusCode: 500,
+			body: {
+				success: false,
+				error: msg || 'Internal error occured',
+			},
+		};
+	}
+
 	unauthorized(msg) {
 		return {
 			statusCode: 403,

diff --git a/app/apps/assets/stylesheets/apps.css b/app/apps/assets/stylesheets/apps.css
@@ -25,7 +25,7 @@
 		letter-spacing: 0;
 		text-transform: initial;
 
-		color: #54585e;
+		color: var(--color-dark-medium);
 
 		font-size: 22px;
 		font-weight: normal;
@@ -60,94 +60,6 @@
 		line-height: 20px;
 	}
 
-	.rc-apps-details {
-		margin-bottom: 0;
-		padding: 0;
-
-		&__description {
-			padding-bottom: 50px;
-
-			border-bottom: 1.5px solid #efefef;
-		}
-
-		&__photo {
-			width: 96px;
-			height: 96px;
-			margin-right: 21px;
-
-			background-color: #f7f7f7;
-		}
-
-		&__content {
-			padding: 0;
-		}
-
-		&__col {
-			display: inline-block;
-
-			margin-right: 8px;
-		}
-
-		&__bundles {
-			display: flex;
-
-			padding-bottom: 20px;
-
-			border-bottom: 1.5px solid #efefef;
-		}
-
-		&__bundle {
-			display: flex;
-
-			width: 50%;
-		}
-
-		&__bundle_icons {
-			display: flex;
-			overflow: hidden;
-
-			min-width: 99px;
-			max-width: 99px;
-			height: 99px;
-
-			padding: 2px;
-
-			border-radius: 2px;
-
-			background-color: #e6e8eb;
-			flex-wrap: wrap;
-		}
-
-		&__bundle_icon {
-			min-width: 40px;
-			max-width: 40px;
-			height: 40px;
-
-			margin-top: 5px;
-			margin-left: 5px;
-
-			border-radius: 2px;
-
-			background-color: #f7f7f7;
-			background-repeat: no-repeat;
-			background-position: center center;
-			background-size: contain;
-		}
-
-		&__bundle_body {
-			padding: 5px 10px;
-
-			color: #9da1a7;
-
-			&_title {
-				color: #151924;
-
-				font-size: 1.1em;
-				font-weight: 500;
-			}
-		}
-	}
-
 	.rc-apps-container {
 		margin-top: 0;
 		padding-bottom: 15px;
@@ -156,7 +68,7 @@
 	.rc-apps-container__header {
 		padding-top: 10px;
 
-		border-bottom: 1.5px solid #efefef;
+		border-bottom: 1.5px solid var(--color-gray-lightest);
 	}
 
 	/*
@@ -190,7 +102,7 @@
 
 		color: #9da2a9;
 		border-radius: 2px;
-		background: #f3f4f5;
+		background: var(--color-gray-lightest);
 
 		font-size: 12px;
 		font-weight: 500;
@@ -240,22 +152,6 @@
 		padding-right: 10px;
 	}
 
-	td.rc-apps-marketplace-price {
-		text-align: right;
-
-		button {
-			font-weight: 600;
-		}
-
-		.rc-icon {
-			color: #3582f3;
-		}
-	}
-
-	th.rc-apps-marketplace-price {
-		width: 120px;
-	}
-
 	&__wrap-actions {
 		& > .loading {
 			display: none;
@@ -329,6 +225,14 @@
 			}
 		}
 
+		& tbody .rc-table-tr .rc-apps-section__app-menu-trigger {
+			visibility: hidden;
+		}
+
+		& tbody .rc-table-tr:hover .rc-apps-section__app-menu-trigger {
+			visibility: visible;
+		}
+
 		& tbody .rc-table-tr:not(.table-no-click):not(.table-no-pointer):hover {
 			background-color: #f7f8fa;
 		}
@@ -362,9 +266,8 @@
 					text-transform: none;
 					text-overflow: ellipsis;
 
-					color: #9da1a8;
-					border-radius: 9999px;
-					background-color: #eef0f3;
+					color: var(--color-gray);
+					background-color: var(--color-gray-lightest);
 
 					font-size: 0.625rem;
 					font-weight: 500;
@@ -382,6 +285,89 @@
 			}
 		}
 	}
+
+	&__app-menu-trigger {
+
+		position: relative;
+
+		display: flex;
+		flex: 0 0 auto;
+
+		margin-left: auto;
+		padding: 0;
+
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		align-items: center;
+		appearance: none;
+		margin-inline-start: auto;
+
+		&:active {
+			transform: translateY(2px);
+
+			opacity: 0.9;
+		}
+
+		&:active::before {
+			top: -2px;
+		}
+
+		&::before {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+
+			content: "";
+			cursor: pointer;
+		}
+
+		& .rc-icon {
+			margin: 0;
+		}
+	}
+
+	&__spinning-icon {
+		animation: spin 1s linear infinite;
+	}
+
+	&__button--working {
+		opacity: 0.6;
+	}
+
+	&__status {
+		width: 100%;
+
+		color: var(--rc-color-primary-light);
+
+		line-height: 40px;
+
+		&--warning {
+			color: var(--rc-color-alert);
+		}
+
+		&--failed {
+			color: var(--rc-color-error);
+		}
+	}
+
+	&__status-column {
+		width: 150px;
+	}
+
+	tr .rc-apps-section__table-button--hideable {
+		visibility: hidden;
+	}
+
+	tr .rc-apps-section__table-button--working,
+	tr:hover .rc-apps-section__table-button--hideable {
+		visibility: visible;
+	}
+
+	.rc-apps-section__table-button--working {
+		opacity: 0.6;
+	}
 }
 
 @keyframes play90 {

diff --git a/app/apps/client/admin/appLogs.js b/app/apps/client/admin/appLogs.js
@@ -96,8 +96,8 @@ Template.appLogs.events({
 		$(e.currentTarget).find('.button-down').removeClass('arrow-up');
 	},
 
-	'click .js-cancel': (e, t) => {
-		FlowRouter.go('app-manage', { appId: t.app.get().id }, { version: FlowRouter.getQueryParam('version') });
+	'click .js-cancel': () => {
+		FlowRouter.go('apps');
 	},
 
 	'click .js-refresh': (e, t) => {