From 53c1276704f0931b2e712a2fba7e7b09572690ef Mon Sep 17 00:00:00 2001 From: davelopez <46503462+davelopez@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:05:01 +0200 Subject: [PATCH 1/3] Refactor types around export records --- client/src/api/histories.export.ts | 9 +++++--- .../components/Common/ExportRecordDetails.vue | 15 ++++++------ .../components/Common/ExportRecordTable.vue | 16 ++++++------- client/src/components/Common/index.ts | 2 ++ .../Common/models/exportRecordModel.ts | 23 ++++++++++++------- .../History/Export/ExportOptions.vue | 13 +++++------ .../components/Workflow/WorkflowActions.vue | 4 +++- 7 files changed, 48 insertions(+), 34 deletions(-) create mode 100644 client/src/components/Common/index.ts diff --git a/client/src/api/histories.export.ts b/client/src/api/histories.export.ts index 03f7d339eb85..8a8e11f6a8be 100644 --- a/client/src/api/histories.export.ts +++ b/client/src/api/histories.export.ts @@ -1,7 +1,10 @@ import type { components } from "@/api/schema"; import { fetcher } from "@/api/schema"; -import type { ObjectExportTaskResponse } from "@/components/Common/models/exportRecordModel"; -import { ExportRecordModel } from "@/components/Common/models/exportRecordModel"; +import { + type ExportRecord, + ExportRecordModel, + type ObjectExportTaskResponse, +} from "@/components/Common/models/exportRecordModel"; import { DEFAULT_EXPORT_PARAMS } from "@/composables/shortTermStorage"; type ModelStoreFormat = components["schemas"]["ModelStoreFormat"]; @@ -69,7 +72,7 @@ export async function exportHistoryToFileSource( * @param record The export record to be imported * @returns A promise with the request response */ -export async function reimportHistoryFromRecord(record: ExportRecordModel) { +export async function reimportHistoryFromRecord(record: ExportRecord) { return _importFromStoreAsync({ store_content_uri: record.importUri, model_store_format: record.modelStoreFormat, diff --git a/client/src/components/Common/ExportRecordDetails.vue b/client/src/components/Common/ExportRecordDetails.vue index e520a8995825..2846093230ec 100644 --- a/client/src/components/Common/ExportRecordDetails.vue +++ b/client/src/components/Common/ExportRecordDetails.vue @@ -11,17 +11,18 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { BAlert, BButton, BCard, BCardTitle } from "bootstrap-vue"; import { computed } from "vue"; -import { ExportRecordModel } from "./models/exportRecordModel"; +import type { ColorVariant } from "."; +import { ExportRecord } from "./models/exportRecordModel"; import LoadingSpan from "@/components/LoadingSpan.vue"; library.add(faCheckCircle, faClock, faExclamationCircle, faExclamationTriangle, faLink); interface Props { - record: ExportRecordModel; + record: ExportRecord; objectType: string; actionMessage?: string; - actionMessageVariant?: string; + actionMessageVariant?: ColorVariant; } const props = withDefaults(defineProps(), { @@ -31,9 +32,9 @@ const props = withDefaults(defineProps(), { const emit = defineEmits<{ (e: "onActionMessageDismissed"): void; - (e: "onReimport", record: ExportRecordModel): void; - (e: "onDownload", record: ExportRecordModel): void; - (e: "onCopyDownloadLink", record: ExportRecordModel): void; + (e: "onReimport", record: ExportRecord): void; + (e: "onDownload", record: ExportRecord): void; + (e: "onCopyDownloadLink", record: ExportRecord): void; }>(); const title = computed(() => (props.record.isReady ? `Exported` : `Export started`)); @@ -112,7 +113,7 @@ function onMessageDismissed() {

You can do the following actions with this {{ props.objectType }} export:

(); const emit = defineEmits<{ - (e: "onReimport", record: ExportRecordModel): void; - (e: "onDownload", record: ExportRecordModel): void; - (e: "onCopyDownloadLink", record: ExportRecordModel): void; + (e: "onReimport", record: ExportRecord): void; + (e: "onDownload", record: ExportRecord): void; + (e: "onCopyDownloadLink", record: ExportRecord): void; }>(); const fields = [ @@ -40,15 +40,15 @@ const isExpanded = ref(false); const title = computed(() => (isExpanded.value ? `Hide old export records` : `Show old export records`)); -async function reimportObject(record: ExportRecordModel) { +async function reimportObject(record: ExportRecord) { emit("onReimport", record); } -function downloadObject(record: ExportRecordModel) { +function downloadObject(record: ExportRecord) { emit("onDownload", record); } -function copyDownloadLink(record: ExportRecordModel) { +function copyDownloadLink(record: ExportRecord) { emit("onCopyDownloadLink", record); } diff --git a/client/src/components/Common/index.ts b/client/src/components/Common/index.ts new file mode 100644 index 000000000000..3c9557801eac --- /dev/null +++ b/client/src/components/Common/index.ts @@ -0,0 +1,2 @@ +// TODO: Not sure if this is the best place for this type +export type ColorVariant = "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"; diff --git a/client/src/components/Common/models/exportRecordModel.ts b/client/src/components/Common/models/exportRecordModel.ts index 10a8da3d3bab..cb218818f879 100644 --- a/client/src/components/Common/models/exportRecordModel.ts +++ b/client/src/components/Common/models/exportRecordModel.ts @@ -29,7 +29,7 @@ export interface ExportRecord { readonly stsDownloadId?: string; readonly isStsDownload: boolean; readonly canDownload: boolean; - readonly modelStoreFormat: string; + readonly modelStoreFormat: ModelStoreFormat; readonly exportParams?: ExportParams; readonly duration?: number | null; readonly canExpire: boolean; @@ -62,17 +62,24 @@ export class ExportParamsModel implements ExportParams { return Boolean(this._params?.include_hidden); } - public equals(otherExportParams?: ExportParamsModel) { + public equals(otherExportParams?: ExportParams) { if (!otherExportParams) { return false; } - return ( - this.modelStoreFormat === otherExportParams.modelStoreFormat && - this.includeFiles === otherExportParams.includeFiles && - this.includeDeleted === otherExportParams.includeDeleted && - this.includeHidden === otherExportParams.includeHidden - ); + return sameExportParams(this, otherExportParams); + } +} + +export function sameExportParams(params1?: ExportParams, params2?: ExportParams): boolean { + if (!params1 || !params2) { + return false; } + return ( + params1.modelStoreFormat === params2.modelStoreFormat && + params1.includeFiles === params2.includeFiles && + params1.includeDeleted === params2.includeDeleted && + params1.includeHidden === params2.includeHidden + ); } export class ExportRecordModel implements ExportRecord { diff --git a/client/src/components/History/Export/ExportOptions.vue b/client/src/components/History/Export/ExportOptions.vue index 7a12c293de72..8b03d8533bc5 100644 --- a/client/src/components/History/Export/ExportOptions.vue +++ b/client/src/components/History/Export/ExportOptions.vue @@ -3,14 +3,13 @@ import { BCard, BCollapse, BFormCheckbox, BFormGroup, BFormSelect, BLink } from import { computed, reactive, ref } from "vue"; import { AVAILABLE_EXPORT_FORMATS } from "@/api/histories.export"; -import { ExportParamsModel } from "@/components/Common/models/exportRecordModel"; +import type { ExportParams } from "@/components/Common/models/exportRecordModel"; -const props = defineProps({ - exportParams: { - type: ExportParamsModel, - required: true, - }, -}); +interface Props { + exportParams: ExportParams; +} + +const props = defineProps(); const emit = defineEmits(["onValueChanged"]); diff --git a/client/src/components/Workflow/WorkflowActions.vue b/client/src/components/Workflow/WorkflowActions.vue index 52d6037ff89b..be67fccc429a 100644 --- a/client/src/components/Workflow/WorkflowActions.vue +++ b/client/src/components/Workflow/WorkflowActions.vue @@ -20,6 +20,8 @@ import { useConfirmDialog } from "@/composables/confirmDialog"; import { Toast } from "@/composables/toast"; import { useUserStore } from "@/stores/userStore"; +import type { ColorVariant } from "../Common"; + import AsyncButton from "@/components/Common/AsyncButton.vue"; library.add(faCaretDown, faExternalLinkAlt, faEye, faFileExport, farStar, faStar, faTrash); @@ -41,7 +43,7 @@ type BaseAction = { target?: "_blank"; size: "sm" | "md" | "lg"; component: "async" | "button"; - variant: "primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark" | "link"; + variant: ColorVariant | "link"; onClick?: (e?: MouseEvent | KeyboardEvent) => void; }; From df3becf9ad0925119ff6b283203fd07daf35b7ab Mon Sep 17 00:00:00 2001 From: davelopez <46503462+davelopez@users.noreply.github.com> Date: Thu, 18 Apr 2024 15:08:31 +0200 Subject: [PATCH 2/3] Refactor HistoryExport and convert to Typescript --- .../History/Export/HistoryExport.vue | 77 ++++++++++--------- 1 file changed, 39 insertions(+), 38 deletions(-) diff --git a/client/src/components/History/Export/HistoryExport.vue b/client/src/components/History/Export/HistoryExport.vue index ae1b55dae7d2..fb6d7a9d47bd 100644 --- a/client/src/components/History/Export/HistoryExport.vue +++ b/client/src/components/History/Export/HistoryExport.vue @@ -1,15 +1,9 @@ -