Merge pull request #620 from inab/staging

Several fixes and GitHub App post-installation page

components/observatory/evaluation/GitHub/DialogImportMetadata.vue

@@ -1,15 +1,33 @@
 <template>
 	<v-dialog v-model="dialogImportMetadata" max-width="500">
-		<v-card class="pt-3 pb-3 pl-2 pr-2">
+		<v-card class="pt-3 pb-3 pl-2 pr-2" v-if="importError">
 			<v-card-title class="mt-0 pt-0 text-h6">
 				Importing metadata
 			</v-card-title>
-			<v-card-text>
+			<v-card-text class="mt-3">
+				<v-progress-linear :size="40" color="error"></v-progress-linear>
+
+				<div class="error--text text-body-2 mt-2 d-flex align-center">
+					<v-icon color="error" class="mr-2">mdi-alert</v-icon>
+					Something went wrong: {{ importProgressText }}
+				</div>
+			</v-card-text>
+			<v-card-actions>
+				<v-spacer></v-spacer>
+				<v-btn text @click="cancelImport"> close </v-btn>
+			</v-card-actions>
+		</v-card>
+
+		<v-card class="pt-3 pb-3 pl-2 pr-2" v-else>
+			<v-card-title class="mt-0 pt-0 text-h6">
+				Importing metadata
+			</v-card-title>
+			<v-card-text class="mt-3">
 				<v-progress-linear :size="40" indeterminate></v-progress-linear>
 
-				<span style="color: #1565c0" class="text-body-2">
+				<div style="color: #1565c0" class="text-body-2">
 					{{ importProgressText }}
-				</span>
+				</div>
 			</v-card-text>
 			<v-card-actions>
 				<v-spacer></v-spacer>
@@ -27,6 +45,7 @@ export default {
 	computed: {
 		...mapGetters('observatory/evaluation/github/', {
 			dialogImportMetadata: 'getDialogImportMetadata',
+			importError: 'getImportError',
 			importProgressText: 'getImportProgressText',
 		}),
 	},

components/observatory/evaluation/GitHub/GitHubInput.vue

@@ -136,9 +136,15 @@ export default {
             If it is not installed, it opens a dialog to install it.
             */
 
-			// 1. Check if the app is installed
+			this.$store.dispatch(
+				'observatory/evaluation/github/updateDialogImportMetadata',
+				true
+			);
+
 			const owner = this.value.split('/')[3];
 			const repo = this.value.split('/')[4].split('.git')[0];
+
+			// 1. Check if the app is installed
 			this.$store.dispatch('observatory/evaluation/github/updateRepository', {
 				owner,
 				repo,

nuxt.config.js

@@ -202,6 +202,14 @@ export default {
 				path: '/observatory',
 				component: resolve(__dirname, 'pages/observatory/Trends.vue'),
 			});
+			routes.push({
+				name: 'post-github-app-install',
+				path: '/post-github-app-install',
+				component: resolve(
+					__dirname,
+					'pages/observatory/PostGitHubInstall.vue'
+				),
+			});
 			routes.push({
 				name: 'scientific-community',
 				path: '/scientific/:community',

pages/observatory/PostGitHubInstall.vue

@@ -1,41 +1,39 @@
 <template>
-	<v-row justify="center" class="mb-4">
+	<v-row justify="center" class="mb-8">
 		<v-col cols="5">
 			<v-card elevation="4" rounded="xl" class="pt-2 pb-7 pl-5 pr-5">
-				<v-card-title class="text-h4"> Successfull installation </v-card-title>
+				<v-card-title class="text-h4"> Setup Complete </v-card-title>
 				<v-row justify="space-between">
 					<v-col cols="6" class="d-flex flex-column">
-						<v-card-text class="text-subtitle subtitle">
+						<v-card-text>
 							The
 							<b>
 								<a
 									href="https://github.com/apps/oeb-fairsoft-evaluator"
 									target="_blank"
 								>
-									OEB FAIRsoft Evaluator App
+									FAIR Evaluator GitHub App
 								</a>
 							</b>
-							can now access your repository's metadata.
+							can now access your repository's metadata
 						</v-card-text>
-						<v-card-text class="text-subtitle subtitle">
-							If you were importing metadata at the FAIR4S Evaluator, the
-							importation will resume automatically.
+						<v-card-text class="font-weight-medium">
+							🚀 You can now import your repository's metadata at the
+							<a href="/observatory/Evaluation" target="_blank">
+								FAIR Evaluator</a
+							>
 						</v-card-text>
-						<v-card-text class="text-subtitle subtitle">
-							To go to the FAIR4S Evaluator, click the button below.
-						</v-card-text>
-						<v-btn
-							class="align-self-center"
-							small
-							@click="$router.push({ name: 'home' })"
-						>
-							Go To FAIR4S Evaluator
-						</v-btn>
+
+						<img
+							class="mb-0 mt-auto"
+							width="8%"
+							:src="require('~/static/OEB-minimal-logo-light-blue.svg')"
+						/>
 					</v-col>
 					<v-col cols="5">
 						<v-img
 							class="mt-7 mb-5"
-							max-width="90%"
+							max-width="80%"
 							:src="
 								require('~/static/illustrations/undraw_well_done_re_3hpo.svg')
 							"
@@ -59,9 +57,3 @@ export default {
 	},
 };
 </script>
-<style scoped>
-.subtitle {
-	font-size: 600 !important;
-	font-family: Roboto, sans-serif;
-}
-</style>

store/observatory/evaluation/github.js

@@ -2,6 +2,7 @@
 This store is used for the github integration.
 In Step 2: import of metadata from a github repository.
 */
+
 // state
 export const state = () => ({
 	// requested repository to import metadata from (as <owner>/<repo>)
@@ -12,6 +13,7 @@ export const state = () => ({
 	// opens/closes the main dialog for importing metadata from github
 	_dialogImportMetadata: false,
 	// text that appears in the ImportMetadata dialog
+	_importError: false,
 	_importProgressText: '',
 	// opens/closes the dialog for installing the app in the requester's github account
 	_dialogAppInstall: false,
@@ -29,6 +31,9 @@ export const getters = {
 	getDialogImportMetadata(state) {
 		return state._dialogImportMetadata;
 	},
+	getImportError(state) {
+		return state._importError;
+	},
 	getImportProgressText(state) {
 		return state._importProgressText;
 	},
@@ -57,27 +62,46 @@ export const actions = {
 			'Checking the permissions to read the repository ...'
 		);
 
-		// var URL = 'http://localhost:3500/installation/id' // temporary. Move to config file
-		const URL = 'installation/id';
-
-		const response = await this.$githubapp.$get(URL, {
-			params: { owner: repository.owner, repo: repository.repo },
-		});
-
-		let installationID = null;
-		if (response.status === 200) {
-			installationID = response.data.data.id;
+		try {
+			// var URL = 'http://localhost:3500/installation/id' // temporary. Move to config file
+			const URL = 'installation/id';
+
+			const response = await this.$githubapp.$get(URL, {
+				params: { owner: repository.owner, repo: repository.repo },
+			});
+
+			let installationID = null;
+			if (response.status === 200) {
+				installationID = response.data.data.id;
+			}
+
+			console.log('obtained installation ID: ' + installationID);
+			commit('setInstallationID', installationID);
+		} catch (error) {
+			console.log('Error while getting installation ID: ' + error);
+			commit(
+				'setImportProgressText',
+				"error while fetching the repositorie's installation ID"
+			);
+			commit('setImportError', true);
 		}
-
-		console.log('obtained installation ID: ' + installationID);
-		commit('setInstallationID', installationID);
 	},
 
 	updateInstallationID({ commit }, installationID) {
 		// This function updates the value of _installationID
 		commit('setInstallationID', installationID);
 	},
 
+	updateImportError({ commit }, value) {
+		// This function updates the value of _importError
+		commit('setImportError', value);
+	},
+
+	updateImportProgressText({ commit }, text) {
+		// This function updates the value of _importProgressText
+		commit('setImportProgressText', text);
+	},
+
 	updateDialogImportMetadata({ commit }, value) {
 		// This function updates the value of _dialogImportMetadata
 		commit('setDialogImportMetadata', value);
@@ -103,32 +127,38 @@ export const actions = {
 			installationID: state._installationID,
 		};
 
-		const response = await this.$githubapp.$post(URL, payload);
-
-		let result = response.data;
-
-		result = await dispatch(
-			'observatory/evaluation/metadata/prepareMetadata',
-			result,
-			{ root: true }
-		);
-
-		dispatch('observatory/evaluation/metadata/updateToolsMetadata', result, {
-			root: true,
-		});
-		dispatch('observatory/evaluation/metadata/updateLoadedMetadata', true, {
-			root: true,
-		});
-
-		commit('setImportProgressText', 'Importation finished');
-		commit('setDialogImportMetadata', false);
-
-		// change step to 3 after importing metadata
-		dispatch('observatory/evaluation/changeStep', 3, { root: true });
+		try {
+			const response = await this.$githubapp.$post(URL, payload);
+
+			let result = response.data;
+			result = await dispatch(
+				'observatory/evaluation/metadata/prepareMetadata',
+				result,
+				{ root: true }
+			);
+
+			dispatch('observatory/evaluation/metadata/updateToolsMetadata', result, {
+				root: true,
+			});
+			dispatch('observatory/evaluation/metadata/updateLoadedMetadata', true, {
+				root: true,
+			});
+
+			commit('setImportProgressText', 'Importation finished');
+			commit('setDialogImportMetadata', false);
+
+			// change step to 3 after importing metadata
+			dispatch('observatory/evaluation/changeStep', 3, { root: true });
+		} catch (error) {
+			console.log('Error while fetching metadata: ' + error);
+			commit('setImportProgressText', 'Error while fetching metadata');
+			commit('setImportError', true);
+		}
 	},
 
 	cancelImport({ commit, _state }) {
 		commit('setDialogImportMetadata', false);
+		commit('setImportError', false);
 		commit('setDialogAppInstall', false);
 		commit('setImportProgressText', '');
 	},
@@ -144,6 +174,9 @@ export const mutations = {
 	setRepository(state, repository) {
 		state._repository = repository;
 	},
+	setImportError(state, value) {
+		state._importError = value;
+	},
 	setImportProgressText(state, text) {
 		state._importProgressText = text;
 	},

store/observatory/evaluation/metadata.js

@@ -274,6 +274,7 @@ export const mutations = {
 	},
 
 	setToolMetadata(state, result) {
+		state._toolMetadata = {};
 		state._toolMetadata = result;
 	},