[OP#41487] Replace icons for no connection and add link

css/dashboard.css

@@ -3,6 +3,11 @@
 	filter: contrast(0) brightness(0);
 }
 
+.icon-noConnection {
+	background-image: url(./../img/noConnection.svg);
+	filter: contrast(0) brightness(0);
+}
+
 .icon-open-project {
 	position: relative;
 }
@@ -21,6 +26,6 @@
 	background-image: url(./../img/app.svg);
 }
 
-body.theme--dark .icon-openproject, body.theme--dark .icon-open-project::after {
+body.theme--dark .icon-openproject .icon-noConnection, body.theme--dark .icon-open-project::after {
 	filter: none;
 }

src/components/OAuthConnectButton.vue

@@ -27,7 +27,8 @@ export default {
 
 	computed: {
 		adminConfigNotOkMessage() {
-			return t('integration_openproject', 'Settings of the OpenProject integration app are not complete. Please contact your Nextcloud administrator.')
+			return t('integration_openproject', 'Some OpenProject integration application settings are not working.'
+				+ ' Please contact your Nextcloud administrator.')
 		},
 	},
 
@@ -83,9 +84,12 @@ export default {
 <style lang="scss" scoped>
 .oauth-connect {
 	&--message {
-		font-size: .875rem;
+		font-size: 1rem;
 		text-align: center;
-		font-weight: 500;
+		font-weight: 400;
+		color: #878787;
+		padding: 0px 18px;
+		line-height: 1.4rem;
 	}
 }
 </style>

src/components/tab/EmptyContent.vue

@@ -2,11 +2,17 @@
 	<div class="empty-content">
 		<div class="empty-content--wrapper">
 			<div class="empty-content--icon">
-				<img v-if="!!requestUrl" :src="flowSvg" alt="flow">
-				<div v-else class="icon-error" />
+				<img v-if="!!requestUrl && state !== 'ok'" :src="noConnectionSvg" alt="no connection">
+				<img v-else-if="!!requestUrl && state === 'ok'" :src="addLinkSvg" alt="add work package">
+				<img v-else :src="noConnectionSvg" alt="error">
 			</div>
-			<div v-if="!!requestUrl" class="empty-content--title">
-				{{ emptyContentMessage }}
+			<div v-if="!!requestUrl" class="empty-content--message">
+				<div class="empty-content--message--title">
+					{{ emptyContentTitleMessage }}
+				</div>
+				<div v-if="!!emptyContentSubTitleMessage" class="empty-content--message--sub-title">
+					{{ emptyContentSubTitleMessage }}
+				</div>
 			</div>
 			<div v-if="showConnectButton" class="empty-content--connect-button">
 				<OAuthConnectButton :request-url="requestUrl" />
@@ -44,25 +50,32 @@ export default {
 		}
 	},
 	computed: {
-		flowSvg() {
-			return require('../../../img/flow.svg')
+		noConnectionSvg() {
+			return require('../../../img/noConnection.svg')
+		},
+		addLinkSvg() {
+			return require('../../../img/addLink.svg')
 		},
 		showConnectButton() {
 			return ['error', 'no-token'].includes(this.state)
 		},
-		emptyContentMessage() {
+		emptyContentTitleMessage() {
 			if (this.state === 'no-token') {
-				return t('integration_openproject', 'No OpenProject account connected')
+				return t('integration_openproject', 'No connection with OpenProject')
 			} else if (this.state === 'connection-error') {
 				return t('integration_openproject', 'Error connecting to OpenProject')
 			} else if (this.state === 'failed-fetching-workpackages') {
 				return t('integration_openproject', 'Could not fetch work packages from OpenProject')
-			} else if (this.state === 'error') {
-				return t('integration_openproject', 'Unexpected Error')
 			} else if (this.state === 'ok') {
-				return t('integration_openproject', 'No workspaces linked yet, search for work package to add!')
+				return t('integration_openproject', 'No OpenProject links yet')
+			}
+			return t('integration_openproject', 'Unexpected Error')
+		},
+		emptyContentSubTitleMessage() {
+			if (this.state === 'ok') {
+				return t('integration_openproject', 'To add a link, use the search bar above to find the desired work package')
 			}
-			return 'invalid state'
+			return ''
 		},
 	},
 }
@@ -82,28 +95,28 @@ export default {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		img, .icon-error {
+		img{
 			height: 50px;
 			width: 50px;
 		}
-		.icon-error {
-			background-size: 50px;
-		}
 	}
-	&--title {
+	&--message {
 		text-align: center;
-		font-size: 1.2rem;
-		line-height: 1.4rem;
-		font-weight: 600;
-		padding-top: 4px;
-		color: #333333;
-	}
-	&--subtitle {
-		font-size: .875rem;
-		font-weight: 400;
-		color: #6d6d6d;
-		line-height: 1rem;
-		padding: 8px 0;
+		&--title {
+			font-size: 1.2rem;
+			line-height: 1.4rem;
+			font-weight: 600;
+			padding: 4px 12px 12px 12px;
+			color: #333333;
+		}
+		&--sub-title{
+			font-size: 1rem;
+			line-height: 1.4rem;
+			text-align: center;
+			font-weight: 400;
+			color: #878787;
+			padding: 0px 18px;
+		}
 	}
 	&--connect-button {
 		padding: 1vh 0;

src/views/Dashboard.vue

@@ -83,7 +83,7 @@ export default {
 		},
 		emptyContentMessage() {
 			if (this.state === 'no-token') {
-				return t('integration_openproject', 'No OpenProject account connected')
+				return t('integration_openproject', 'No connection with OpenProject')
 			} else if (this.state === 'error') {
 				return t('integration_openproject', 'Error connecting to OpenProject')
 			} else if (this.state === 'ok') {
@@ -93,9 +93,9 @@ export default {
 		},
 		emptyContentIcon() {
 			if (!this.requestUrl) {
-				return 'icon-error'
+				return 'icon-noConnection'
 			} else if (this.state === 'no-token') {
-				return 'icon-openproject'
+				return 'icon-noConnection'
 			} else if (this.state === 'error') {
 				return 'icon-close'
 			} else if (this.state === 'ok') {

tests/jest/components/__snapshots__/OAuthConnectButton.spec.js.snap

@@ -2,6 +2,6 @@
 
 exports[`OAuthConnectButton.vue Test when the request url is not valid should show message 1`] = `
 <div class="oauth-connect--message">
-  Settings of the OpenProject integration app are not complete. Please contact your Nextcloud administrator.
+  Some OpenProject integration application settings are not working. Please contact your Nextcloud administrator.
 </div>
 `;

tests/jest/components/tab/EmptyContent.spec.js

@@ -5,7 +5,7 @@ const localVue = createLocalVue()
 
 describe('EmptyContent.vue Test', () => {
 	let wrapper
-	const emptyContentMessageSelector = '.empty-content--title'
+	const emptyContentMessageSelector = '.empty-content--message'
 	const connectButtonSelector = 'oauthconnectbutton-stub'
 
 	describe('connect button', () => {
@@ -30,26 +30,18 @@ describe('EmptyContent.vue Test', () => {
 		})
 		it.each([{
 			state: 'no-token',
-			message: 'No OpenProject account connected',
 		}, {
 			state: 'error',
-			message: 'Unexpected Error',
 		}, {
 			state: 'connection-error',
-			message: 'Error connecting to OpenProject',
 		}, {
 			state: 'failed-fetching-workpackages',
-			message: 'Could not fetch work packages from OpenProject',
 		}, {
 			state: 'ok',
-			message: 'No workspaces linked yet',
-		}, {
-			state: 'something else',
-			message: 'invalid state',
 		}])('shows the correct empty message depending on states if the request url is valid', async (cases) => {
 			wrapper = getWrapper({ state: cases.state, adminConfigStatus: true })
 			expect(wrapper.find(emptyContentMessageSelector).exists()).toBeTruthy()
-			expect(wrapper.find(emptyContentMessageSelector).text()).toMatch(cases.message)
+			expect(wrapper.find(emptyContentMessageSelector)).toMatchSnapshot()
 		})
 	})
 })

tests/jest/components/tab/__snapshots__/EmptyContent.spec.js.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmptyContent.vue Test content title shows the correct empty message depending on states if the request url is valid 1`] = `
+<div class="empty-content--message">
+  <div class="empty-content--message--title">
+    No connection with OpenProject
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`EmptyContent.vue Test content title shows the correct empty message depending on states if the request url is valid 2`] = `
+<div class="empty-content--message">
+  <div class="empty-content--message--title">
+    Unexpected Error
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`EmptyContent.vue Test content title shows the correct empty message depending on states if the request url is valid 3`] = `
+<div class="empty-content--message">
+  <div class="empty-content--message--title">
+    Error connecting to OpenProject
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`EmptyContent.vue Test content title shows the correct empty message depending on states if the request url is valid 4`] = `
+<div class="empty-content--message">
+  <div class="empty-content--message--title">
+    Could not fetch work packages from OpenProject
+  </div>
+  <!---->
+</div>
+`;
+
+exports[`EmptyContent.vue Test content title shows the correct empty message depending on states if the request url is valid 5`] = `
+<div class="empty-content--message">
+  <div class="empty-content--message--title">
+    No OpenProject links yet
+  </div>
+  <div class="empty-content--message--sub-title">
+    To add a link, use the search bar above to find the desired work package
+  </div>
+</div>
+`;