feat: upload resources modal

packages/client/hmi-client/src/components/documents/tera-external-publication.vue

@@ -147,13 +147,22 @@
 				</template>
 				<ul>
 					<li class="extracted-item" v-for="(url, index) in githubUrls" :key="index">
-						<tera-import-github-file
-							:urlString="url"
-							:show-import-button="!featureConfig.isPreview"
-							@open-code="openCode"
+						<Button
+							v-if="!featureConfig.isPreview"
+							label="Import"
+							class="p-button-sm p-button-outlined"
+							icon="pi pi-cloud-download"
+							@click="openImportGithubFileModal(url)"
 						/>
+						<a :href="url" rel="noreferrer noopener">{{ url }}</a>
 					</li>
 				</ul>
+				<tera-import-github-file
+					:visible="isImportGithubFileModalVisible"
+					:url-string="openedUrl"
+					@close="isImportGithubFileModalVisible = false"
+					@open-code="openCode"
+				/>
 			</AccordionTab>
 			<AccordionTab v-if="!isEmpty(otherUrls)">
 				<template #header>
@@ -237,7 +246,7 @@ import Message from 'primevue/message';
 import { getDocumentById, getXDDArtifacts } from '@/services/data';
 import { XDDExtractionType } from '@/types/XDD';
 import { getDocumentDoi, isModel, isDataset, isDocument } from '@/utils/data-util';
-import { CodeRequest, ResultType, FeatureConfig } from '@/types/common';
+import { ResultType, FeatureConfig, CodeRequest } from '@/types/common';
 import { getRelatedArtifacts } from '@/services/provenance';
 import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
 import TeraImportGithubFile from '@/components/widgets/tera-import-github-file.vue';
@@ -275,6 +284,8 @@ const props = defineProps({
 const doc = ref<Document | null>(null);
 const pdfLink = ref<string | null>(null);
 const documentView = ref(DocumentView.EXRACTIONS);
+const isImportGithubFileModalVisible = ref(false);
+const openedUrl = ref('');
 
 const emit = defineEmits(['open-code', 'close-preview', 'asset-loaded']);
 
@@ -458,6 +469,11 @@ const formatCitation = (obj: { [key: string]: string }) => {
 	return highlightSearchTerms(citation);
 };
 
+function openImportGithubFileModal(url: string) {
+	openedUrl.value = url;
+	isImportGithubFileModalVisible.value = true;
+}
+
 onMounted(async () => {
 	fetchDocumentArtifacts();
 	fetchAssociatedResources();
@@ -490,6 +506,9 @@ onUpdated(() => {
 	border: 1px solid var(--surface-border-light);
 	padding: 1rem;
 	border-radius: var(--border-radius);
+	gap: 1rem;
+	display: flex;
+	align-items: center;
 }
 
 .extracted-item > .extracted-image {

packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-file-previewer.vue

@@ -21,32 +21,27 @@
 				<ProgressBar :value="props.progress"></ProgressBar>
 			</div>
 		</template>
-		<template v-else-if="props.showPreview">
-			<template v-if="file && file.type === AcceptedTypes.PDF">
-				<embed :src="getSrc(file)" />
-			</template>
-		</template>
 		<template v-else-if="props.showError">
 			<div>Error Please Try Again</div>
 		</template>
+		<template v-else>
+			<div class="ready">
+				<i class="pi pi-check-circle" />
+				<span>Ready</span>
+			</div>
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button';
 import ProgressBar from 'primevue/progressbar';
-import { AcceptedTypes } from '@/types/common';
 
 const props = defineProps({
 	file: {
 		type: File,
 		default: undefined
 	},
-	showPreview: {
-		type: Boolean,
-		default: true,
-		required: true
-	},
 	isProcessing: {
 		type: Boolean,
 		required: true
@@ -60,13 +55,12 @@ const props = defineProps({
 	}
 });
 
-const getSrc = (file) => URL.createObjectURL(file);
-
 const emit = defineEmits(['remove-file']);
 </script>
 <style scoped>
 .file-preview {
 	overflow: hidden !important;
+	margin-top: 0.5rem;
 }
 
 .file-title-container {
@@ -100,4 +94,15 @@ const emit = defineEmits(['remove-file']);
 	background-color: var(--surface-border-warning);
 	height: 100%;
 }
+
+.ready {
+	color: var(--primary-color);
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+}
+
+.ready i {
+	align-self: end;
+}
 </style>

packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue

@@ -17,45 +17,37 @@
 			/>
 			<label for="fileInput" class="file-label">
 				<div v-if="dragOver">Release mouse button to add files to import</div>
-				<div v-else>Drop resources here or <span class="text-link">upload a file</span>.</div>
-			</label>
-			<br />
-
-			<div v-if="importFiles.length > 0">
-				<div class="preview-container mt-4" v-if="importFiles.length">
-					<div v-for="file in importFiles" :key="file.name" class="file-preview" scrolling="no">
-						<TeraDragAndDropFilePreviewer
-							:file="file"
-							:show-preview="props.showPreview"
-							:is-processing="isProcessing"
-							:progress="props.progress"
-							@remove-file="removeFile(importFiles.indexOf(file))"
-						>
-						</TeraDragAndDropFilePreviewer>
+				<div v-else class="drop-zone">
+					<div><i class="pi pi-file" style="font-size: 2.5rem" /></div>
+					<div>
+						Drop resources here or <span class="text-link">click to open a file browser</span>
 					</div>
 				</div>
-				<br />
+			</label>
+		</div>
+		<div v-if="importFiles.length > 0">
+			<div class="preview-container mt-4" v-if="importFiles.length">
+				<div v-for="file in importFiles" :key="file.name" class="file-preview" scrolling="no">
+					<TeraDragAndDropFilePreviewer
+						:file="file"
+						:is-processing="isProcessing"
+						:progress="props.progress"
+						@remove-file="removeFile(importFiles.indexOf(file))"
+					>
+					</TeraDragAndDropFilePreviewer>
+				</div>
 			</div>
-			<br />
-			<Button
-				v-if="canImport"
-				type="button"
-				class="import-button"
-				@click="processFiles(importFiles)"
-				label="Import data"
-			></Button>
 		</div>
 	</section>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, watch } from 'vue';
 import API from '@/api/api';
-import Button from 'primevue/button';
 import { AcceptedExtensions, AcceptedTypes } from '@/types/common';
 import TeraDragAndDropFilePreviewer from './tera-drag-n-drop-file-previewer.vue';
 
-const emit = defineEmits(['import-completed']);
+const emit = defineEmits(['import-completed', 'imported-files-updated']);
 const importFiles = ref(<File[]>[]);
 const fileInput = ref(<HTMLInputElement | null>null);
 const dragOver = ref(false);
@@ -65,11 +57,6 @@ const processResponse = ref(<{ file: string; response: { text: string } }[]>[]);
 const csvDescription = ref('');
 
 const props = defineProps({
-	// show preview
-	showPreview: {
-		type: Boolean,
-		required: true
-	},
 	progress: {
 		type: Number,
 		default: undefined
@@ -156,6 +143,7 @@ const addFiles = (addedFiles: File[] | undefined) => {
 			}
 		}
 	}
+	processFiles(importFiles.value);
 };
 
 /**
@@ -218,7 +206,12 @@ async function processFiles(files) {
 	files.value = [];
 }
 
-const canImport = computed(() => importFiles.value.length > 0);
+watch(
+	() => importFiles.value.length,
+	() => {
+		emit('imported-files-updated', importFiles.value);
+	}
+);
 </script>
 
 <style scoped>
@@ -262,7 +255,7 @@ const canImport = computed(() => importFiles.value.length > 0);
 	flex-direction: column;
 	cursor: pointer;
 	align-items: center;
-	padding-top: 2.5rem;
+	padding: 2.5rem 0 2.5rem 0;
 }
 
 .text-link {
@@ -297,4 +290,18 @@ const canImport = computed(() => importFiles.value.length > 0);
 	cursor: pointer;
 	border: 1px solid var(--surface-border);
 }
+
+.drop-zone {
+	display: flex;
+	gap: 1rem;
+	align-items: center;
+}
+
+i {
+	color: var(--text-color-secondary);
+}
+
+.modal label {
+	margin: 0;
+}
 </style>

packages/client/hmi-client/src/components/widgets/tera-import-github-file.vue

@@ -1,15 +1,7 @@
 <template>
 	<main>
-		<Button
-			v-if="showImportButton"
-			label="Import"
-			class="p-button-sm p-button-outlined"
-			icon="pi pi-cloud-download"
-			@click="initializeCodeBrowser"
-		/>
-		<a :href="urlString" rel="noreferrer noopener">{{ urlString }}</a>
 		<Teleport to="body">
-			<tera-modal v-if="isModalVisible" class="modal" @modal-mask-clicked="!isModalVisible">
+			<tera-modal v-if="visible" class="modal" @modal-mask-clicked="emit('close')">
 				<template #header>
 					<h2>
 						https://github.com/{{ repoOwnerAndName
@@ -167,15 +159,15 @@
 							selectedFiles.length == 1 ? '' : 's'
 						}}</Button
 					>
-					<Button class="p-button-outlined" label="Cancel" @click="isModalVisible = false" />
+					<Button class="p-button-outlined" label="Cancel" @click="emit('close')" />
 				</template>
 			</tera-modal>
 		</Teleport>
 	</main>
 </template>
 
 <script setup lang="ts">
-import { computed, ComputedRef, ref, Ref } from 'vue';
+import { computed, ComputedRef, ref, Ref, watch } from 'vue';
 import Button from 'primevue/button';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import { isEmpty } from 'lodash';
@@ -193,16 +185,18 @@ import { useProjects } from '@/composables/project';
 import { uploadCodeToProjectFromGithub } from '@/services/code';
 import { createNewDocumentFromGithubFile } from '@/services/document-assets';
 import { createNewDatasetFromGithubFile } from '@/services/dataset';
+import { useToastService } from '@/services/toast';
 
 const props = defineProps<{
+	visible: boolean;
 	urlString: string;
-	showImportButton: boolean;
 }>();
 
+const emit = defineEmits(['close']);
+
 const repoOwnerAndName: Ref<string> = ref('');
 const currentDirectory: Ref<string> = ref('');
 const directoryContent: Ref<GithubRepo | null> = ref(null);
-const isModalVisible: Ref<boolean> = ref(false);
 const selectedFiles: Ref<GithubFile[]> = ref([]);
 const selectedUnknownFiles: Ref<GithubFile[]> = ref([]);
 const editor: Ref<VAceEditorInstance['_editor'] | null> = ref(null);
@@ -240,7 +234,6 @@ const hasOther: ComputedRef<boolean> = computed(
 );
 
 async function initializeCodeBrowser() {
-	isModalVisible.value = true;
 	repoOwnerAndName.value = new URL(props.urlString).pathname.substring(1); // owner/repo
 	await openDirectory(''); // Goes back to root directory if modal is closed then opened again
 }
@@ -294,8 +287,16 @@ async function openSelectedFiles() {
 		await importDocumentFiles(selectedDocumentFiles);
 	}
 
+	// TODO: make this number account for files that were not succussfully imported
+	const numUploadedFiles =
+		selectedCodeFiles.length + selectedDataFiles.length + selectedDocumentFiles.length;
+	const resourceMsg = numUploadedFiles > 1 ? 'resources were' : 'resource was';
+	useToastService().success(
+		'Success!',
+		`${numUploadedFiles} ${resourceMsg} successfuly added to this project`
+	);
 	// FIXME: Files aren't opening
-	isModalVisible.value = false;
+	emit('close');
 }
 
 /**
@@ -377,6 +378,15 @@ async function openCodeFiles(githubFiles: GithubFile[]) {
 		}
 	});
 }
+
+watch(
+	() => props.visible,
+	() => {
+		if (props.visible) {
+			initializeCodeBrowser();
+		}
+	}
+);
 </script>
 
 <style scoped>