fix: git config core.ignorecase false picked up these changes

frontend/src/lib/modules/alert.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { AlertTriangleIcon } from 'svelte-feather-icons';
+
+	export let visibleAlert = false;
+	export let alertTitle = 'Alert!';
+	export let alertMessage = 'Alert!';
+	export let alertVariant: string = 'variant-ghost-surface';
+</script>
+
+{#if visibleAlert}
+	<div class="flex w-full content-center p-10">
+		<aside class="alert {alertVariant} w-full">
+			<div class="flex">
+				<div class="row-span-2">
+					<AlertTriangleIcon />
+				</div>
+			</div>
+			<div class="grid grid-cols-2 grid-rows-2 w-full justify-between">
+				<div class="alert-message row-span-2 ml-10">
+					<div>
+						<h3 class="h3">{alertTitle}</h3>
+					</div>
+					<div>
+						{@html alertMessage}
+					</div>
+				</div>
+				<div class="alert-actions row-span-2 place-content-end">
+					<button
+						type="button"
+						class="btn btn-sm variant-filled"
+						on:click={() => {
+							visibleAlert = false;
+						}}>OK</button
+					>
+				</div>
+			</div>
+		</aside>
+	</div>
+{/if}

frontend/src/routes/artifacts/artifact.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { reactiveBuckets } from '$stores/stores';
+	import type { ArtifactHierarchyType } from '$typesdefinitions';
+
+	import Artifact from './artifact.svelte';
+	import SymbolForArtifact from './symbol-for-artifact.svelte';
+
+	export let artifact: ArtifactHierarchyType;
+
+	function toggleOpen(artifact: ArtifactHierarchyType): void {
+		// eslint-disable-next-line no-param-reassign
+		artifact.isExpanded = !artifact.isExpanded;
+		$reactiveBuckets = [...$reactiveBuckets]; // Trigger a re-render
+	}
+
+	function getArtifactHierarchyType(artifact: ArtifactHierarchyType): string {
+		return artifact.name.includes('.') ? 'file' : 'folder';
+	}
+</script>
+
+<li>
+	<div class="justify-self-start">
+		<div>
+			<button on:dblclick={() => toggleOpen(artifact)}>
+				<SymbolForArtifact {artifact} artifactType={getArtifactHierarchyType(artifact)} />
+				<span style="margin-left: 5px;">{artifact.name}</span>
+			</button>
+		</div>
+	</div>
+	{#if artifact.isExpanded && artifact.subfolders.length > 0}
+		<ul>
+			{#each artifact.subfolders as subfolder (subfolder.name)}
+				<Artifact artifact={subfolder} />
+			{/each}
+		</ul>
+	{/if}
+</li>
+
+<style>
+	ul {
+		list-style-type: none;
+		padding-left: 20px;
+		gap: 2px;
+	}
+	li {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		margin-left: 10px; /* Indentation */
+	}
+	button {
+		display: flex;
+		align-items: center;
+	}
+</style>

frontend/src/routes/artifacts/artifacts.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { ProgressBar } from '@skeletonlabs/skeleton';
+	import { onMount } from 'svelte';
+
+	import { requestGraphQLClient } from '$lib/graphqlUtils';
+	import allBucketsQuery from '$queries/get_all_buckets';
+	import allArtifactsQuery from '$queries/get_all_artifacts';
+
+	import { selectedBucket, reactiveBuckets, buckets } from '$stores/stores';
+	import Alert from '$lib/modules/alert.svelte';
+
+	// TODO: consolidate types in the types.d.ts file
+	//import type { ArtifactType, BucketType } from '$lib/folders_types';
+	import type { Bucket, Artifact, BucketWithArtifacts } from '$typesdefinitions';
+
+	import FolderStructure from './artifact-structure.svelte';
+
+	let requestsComplete = false;
+	let alertTitle: string = '';
+	let alertMessage: string = '';
+	let alertVariant: string = '';
+	let alertVisible: boolean = false;
+
+	async function getBuckets(): Promise<JSON> {
+		try {
+			const response = await fetch(`/api/minio/buckets`);
+			if (!response.ok) {
+				const data = (await response.json()) as JSON;
+				throw new Error(
+					`Request error! Failed to load data! ${response.statusText} ${JSON.stringify(data)}`
+				);
+			}
+			const data = (await response.json()) as JSON;
+			// console.log('getBuckets:', data);
+			return data;
+		} catch (error) {
+			alertVisible = true;
+			alertTitle = 'Request Error';
+			alertMessage = `${error as string}`;
+			alertVariant = 'variant-filled-error';
+			// console.error(error);
+			return {} as JSON;
+		}
+	}
+
+	async function getArtifacts(bucket: string): Promise<JSON> {
+		// console.log("fetching artifacts");
+		try {
+			const response = await fetch(`/api/minio/buckets/objects?bucketName=${bucket}`);
+			if (!response.ok) {
+				const data = (await response.json()) as JSON;
+				throw new Error(
+					`Request error! Failed to load data! ${response.statusText} ${JSON.stringify(data)}`
+				);
+			}
+			const data = (await response.json()) as JSON;
+			// console.log('getArtifacts:', data);
+			return data;
+		} catch (error) {
+			alertVisible = true;
+			alertTitle = 'Request Error';
+			alertMessage = `${error as string}`;
+			alertVariant = 'variant-filled-error';
+			// console.error(error);
+			return {} as JSON;
+		}
+	}
+
+	async function loadData2(): Promise<void> {
+		const buckets_response: { buckets: Bucket[] } = await requestGraphQLClient(allBucketsQuery);
+		const requests = buckets_response.buckets.map(async (bucket) => {
+			const artifacts: { artifacts: Artifact[] } = await requestGraphQLClient(allArtifactsQuery, {
+				bucketName: bucket.name
+			});
+			return { bucket, artifacts };
+		});
+		Promise.all(requests)
+			.then((results) => {
+				buckets.set(
+					results.map((result) => ({
+						bucket: result.bucket,
+						artifacts: result.artifacts.artifacts
+					})) as BucketWithArtifacts[]
+				);
+				requestsComplete = true;
+			})
+			.catch((error) => {
+				// console.error('A promise was rejected:', error);
+				alertVisible = true;
+				alertTitle = 'Request Error';
+				alertMessage = `${error}`;
+			});
+	}
+
+	// TODO: implement the downloadArtifacts function
+	// this requires a new API endpoint to be implemented in the api routes
+
+	onMount(async () => {
+		// await loadData();
+		await loadData2();
+		console.log('artifacts mounted');
+	});
+
+	/* eslint-disable no-console */
+	$: console.log('buckets:', buckets);
+	$: console.log('requests completed:', requestsComplete);
+	$: console.log('selected bucket:', selectedBucket);
+	// $: console.log('data', data);
+	/* eslint-enable no-console */
+</script>
+
+<div class="artifacts">
+	<div>
+		<h1>Buckets</h1>
+		{#if !requestsComplete}
+			<ProgressBar />
+		{:else}
+			<div class="p-2">
+				<FolderStructure buckets={$buckets} />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<Alert visibleAlert={alertVisible} {alertTitle} {alertMessage} {alertVariant} />
+
+<style>
+	.artifacts {
+		padding: 1rem;
+	}
+</style>