🚀 progress work on project and secrets page

frontend-dev/src/queries/create_project.ts

@@ -1,8 +1,11 @@
 import { gql } from 'graphql-request';
 
 const createProjectMutation = gql`
-  mutation createProject($project: CreateProjectInput) {
-    createProject(project: $project)
+  mutation createProject($project: CreateProjectInput!) {
+    createProject(project: $project) {
+      name
+      id
+      }
   }
 `;
 

frontend-dev/src/queries/delete_project.ts

@@ -1,7 +1,7 @@
 import { gql } from 'graphql-request';
 
 const deleteProjectMutation = gql`
-  mutation deleteProject($projectId: String) {
+  mutation deleteProject($projectId: String!) {
     deleteProject(projectId: $projectId)
   }
 `;

frontend-dev/src/queries/get_all_credentials.ts

@@ -2,7 +2,11 @@ import { gql } from 'graphql-request';
 
 const allCredentialsQuery = gql`
   query dockerRegistryCredentials {
-    dockerRegistryCredentials
+    dockerRegistryCredentials {
+      name
+      server
+      username
+    }
   }
 `;
 

frontend-dev/src/routes/projects/+page.svelte

@@ -9,6 +9,7 @@
     import { graphQLClient } from '../../stores/stores.js';
     import allProjectsQuery from '../../queries/get_all_projects.js';
     import { get } from 'svelte/store';
+    import deleteProjectMutation from '../../queries/delete_project.js';
 
 	const getProjectsList = async (): Promise<Project[]> => {
 		await initKeycloak();
@@ -17,10 +18,7 @@
 		 	projects: Project[];
 		};
 		}>(allProjectsQuery);
-        //console.log(response.projects);
 		return response.projects;
-        // TODO:replace with graphql call
-        return projects;
 	};
 	const projectsPromise = getProjectsList();
     let checkboxes: Record<string, boolean> = {};
@@ -30,7 +28,8 @@
 		.then((value) => {
 		$projectsList = value;
         $projectsList.forEach((element) => {
-			checkboxes[element.name] = false;
+            console.log(element)
+			checkboxes[element.id] = false;
 		});
 		})
 		.catch(() => {
@@ -49,10 +48,15 @@
 		body: 'Enter details of project',
 	};
 
-    // TODO: replace with actual api call
-    function onDeleteSelected() {
+    async function onDeleteSelected() {
         console.log('Deleting ', Object.keys(checkboxes).filter((item) => checkboxes[item]));
-        console.log('To be implemented');
+        Object.keys(checkboxes).filter((item) => checkboxes[item]).forEach(async (element) => {
+            const variables = {
+			    projectId: element
+		    }
+            console.log(element)
+		    const response = await get(graphQLClient).request(deleteProjectMutation, variables);
+        });
     }
     
     // to disable onclick propogation for checkbox input
@@ -97,7 +101,7 @@
                     {#each projectsList as project}
                         <tr id="clickable_row" class="clickable table-row-checked"  onclick="window.location=`/projects/[project_id]/{project.project_id}`">
                             <td >
-                                <input type="checkbox" class="checkbox variant-filled"  bind:checked={checkboxes[project.name]} on:click={(event) => handleCheckboxClick(event)} />
+                                <input type="checkbox" class="checkbox variant-filled"  bind:checked={checkboxes[project.id]} on:click={(event) => handleCheckboxClick(event)} />
                             </td>
                             <td>{project.name}</td>
                             <td>{project.createdAt}</td>

frontend-dev/src/routes/projects/modal-submit-new-project.svelte

@@ -1,20 +1,26 @@
 <script lang="ts">
 	import {cBase, cHeader, cForm} from '../../styles/styles.js';
+	import { graphQLClient } from '../../stores/stores.js';
+	import createProjectMutation from '../../queries/create_project.js';
+	import { get } from 'svelte/store';
+
 	export let parent: any;
 
 	// Stores
 	import { modalStore } from '@skeletonlabs/skeleton';
 
-	// Form Data
+	// TODO: Add all required user inputs (id (? create automatically) and argo workflow template)
 	const formData = {
 		name: '',		
 	};
 
-	// TODO: replace with actual api call
-	function onCreateProjectSubmit(): void {
-		console.log('to be implemented');
+	async function onCreateProjectSubmit(): Promise<void>{
+		const variables = {
+			project: {name: formData.name}
+		};
+		const response = await get(graphQLClient).request(createProjectMutation, variables);
 		modalStore.close();
-	}	
+	}
 
 </script>
 

frontend-dev/src/routes/secrets/+page.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import secrets from '../../stores/secrets.json';
+	//import secrets from '../../stores/secrets.json';
 	// import KubernetesSecret from './kubernetes-secret.svelte';
 	import { Modal, modalStore } from '@skeletonlabs/skeleton';
 	import type { ModalSettings, ModalComponent } from '@skeletonlabs/skeleton';
 	import ModalSubmitNewSecret from './modal-submit-new-secret.svelte';
-
-	let password_values = new Array(secrets.length).fill('show');
+	import allCredentialsQuery from '../../queries/get_all_credentials.js';
+	import type { DockerRegistryCredential } from '../../types.js'
+	import { get } from 'svelte/store';
+	import { graphQLClient } from '../../stores/stores.js';
+	import { credentialsList } from '../../stores/stores.js';
 
 	const modalComponent: ModalComponent = {
 		ref: ModalSubmitNewSecret
@@ -17,52 +20,43 @@
 		title: 'Add new secret',
 		body: 'Provide a name and username for the new secret at given host.\nSecret will be automatically generated.',
 		//response: (r: string) => console.log('response:', r),
-		response: (r) => updateSecret(r.name, r.username, r.host)
+		//response: (r) => updateSecret(r.name, r.username, r.host)
 	};
 
-	// Create a new secret in the database
-	let passwordLength: number = 10;
-	// write a function that updates the values of the secret object and stores it in a json file
-	function updateSecret(newName: string, newUserName: string, newHostName: string) {
-		// update the secret object
-		const secret = {
-			name: newName,
-			username: newUserName,
-			host: newHostName,
-			password: generateRandomString(passwordLength)
-		};
-		secrets.concat(secret);
-		console.log(secrets);
-		// TODO: write the secret object to json file or database
-	}
+	const getCredentialsList = async (): Promise<DockerRegistryCredential[]> => {
+		console.log(get(graphQLClient))
+		const response = await get(graphQLClient).request<{
+			All_Credentials: {
+				dockerRegistryCredentials: DockerRegistryCredential[];
+			}
+		}>(allCredentialsQuery);
+		console.log(response);
+		return response.dockerRegistryCredentials;
+	};	
 
-	function generateRandomString(length: number) {
-		let result = '';
-		let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-		let charactersLength = characters.length;
-		for (let i = 0; i < length; i++) {
-			result += characters.charAt(Math.floor(Math.random() * charactersLength));
-		}
-		return result;
-	}
+	const credentialsPromise = getCredentialsList();
 
-	// // function redirect to add new secret page
-	// function redirectToAddNewSecretPage() {
-	// 	window.location.href = "/new_secret"
-	// }
-	function onmousedown(password: string, i: number) {
-		password_values[i] = password;
-	}
-	function onmouseup(i: number) {
-		password_values[i] = 'show';
-	}
+	credentialsPromise
+		.then((value) => {
+		$credentialsList = value;
+        $credentialsList.forEach((element) => {
+            console.log(element)
+		});
+		})
+		.catch(() => {
+		$credentialsList = undefined;
+		});
+	
 </script>
 
 <!-- Page Header -->
 <div class="flex-col p-5">
 	<h1>Secrets</h1>
 	<div class="flex-col">
 		<div class="table-container table-fixed p-5 pr-40">
+			{#await credentialsPromise}
+            <p style="font-size:20px;">Loading credentials...</p>
+            {:then credentialsPromise}
 			<!-- Native Table Element -->
 			<!-- TODO: add margin/padding for table elements -->
 			<table class="w-half table table-interactive">
@@ -71,26 +65,21 @@
 						<th />
 						<th>Name</th>
 						<th>Username</th>
-						<th>Host</th>
-						<!-- to keep column width same when password is shown, TODO: make it proper -->
-						<th width="20%">Password</th>
+						<th>Server</th>
 					</tr>
 				</thead>
 				<tbody>
-					{#each secrets as secret, i}
+					{#each credentialsList as secret}
 						<tr class="table-row-checked">
 							<td><input type="checkbox" class="checkbox variant-filled" /></td>
 							<td>{secret.name}</td>
 							<td>{secret.username}</td>
-							<td>{secret.host}</td>
-							<td
-								on:mousedown={() => onmousedown(secret.password, i)}
-								on:mouseup={() => onmouseup(i)}><i>{password_values[i]}</i></td
-							>
+							<td>{secret.server}</td>
 						</tr>
 					{/each}
 				</tbody>
 			</table>
+			{/await}
 		</div>
 		<div class="p-2">
 			<div class="p-2">

frontend-dev/src/routes/secrets/modal-submit-new-secret.svelte

@@ -23,7 +23,8 @@
 </script>
 
 <!-- @component This example creates a simple form modal. -->
-
+<!-- TODO: Aleena; help users provide correct kubernetes name (pattern on the HTML5 input tag perhaps may be used to only allow valid kubernetes names)-->
+<!-- TODO: Aleena; Gøran has come up with suggestion for pattern in inputs for secret name, username and hostname. Check that this works as expected. -->
 {#if $modalStore[0]}
 	<div class="modal-example-form {cBase}">
 		<header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
@@ -32,15 +33,15 @@
 		<form class="modal-form {cForm}">
 			<label class="label">
 				<span>Secret name</span>
-				<input class="input" type="text" bind:value={formData.name} placeholder="Enter name..." />
+				<input class="input" type="text" bind:value={formData.name} placeholder="Enter name..." pattern="^[a-z0-9.,_,-]+$"/>
 			</label>
 			<label class="label">
 				<span>Username</span>
-				<input class="input" type="text" bind:value={formData.username} placeholder="Enter username..." />
+				<input class="input" type="text" bind:value={formData.username} placeholder="Enter username..." pattern="^[a-z0-9.,_,-]+$"/>
 			</label>
 			<label class="label">
 				<span>Hostname</span>
-				<input class="input" type="text" bind:value={formData.host} placeholder="Enter hostname..." />
+				<input class="input" type="text" bind:value={formData.host} placeholder="Enter hostname..." pattern="^[a-z0-9.,\/,:_,-]+$"/>
 			</label>
 		</form>
 		<!-- prettier-ignore -->

frontend-dev/src/stores/stores.ts

@@ -1,12 +1,13 @@
 import { writable } from 'svelte/store';
 import type { GraphQLClient } from 'graphql-request';
 import type Keycloak from 'keycloak-js';
-import type { Project } from '../types.js';
+import type { Project, DockerRegistryCredential } from '../types.js';
 
 export const graphQLClient = writable<GraphQLClient>();
 
 export const keycloakHandler = writable<Keycloak>();;
 export const projectsList = writable<Project[]|undefined>();
+export const credentialsList = writable<DockerRegistryCredential[]|undefined>();
 
 export const username = writable<string>("username");