fix(projects): unified azure dev ops and github repositories

AxaFrance · Feb 17, 2021 · 7f0d8a5 · 7f0d8a5
1 parent 1e5d64b
commit 7f0d8a5
Show file tree

Hide file tree

Showing 33 changed files with 370 additions and 677 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
 		"@rollup/plugin-node-resolve": "^11.0.0",
 		"@rollup/plugin-typescript": "^8.0.0",
 		"@tsconfig/svelte": "^1.0.10",
+		"@types/marked": "^1.2.2",
 		"@types/node": "^14.14.13",
 		"@types/superagent": "^4.1.10",
 		"@types/superagent-proxy": "^2.0.0",
@@ -73,6 +74,7 @@
 		"electron-log": "^4.3.0",
 		"electron-updater": "4.3.5",
 		"ky": "^0.26.0",
+		"marked": "^2.0.0",
 		"sirv-cli": "^1.0.10",
 		"superagent": "^6.1.0",
 		"superagent-proxy": "^2.1.0",

diff --git a/public/global.css b/public/global.css
@@ -54,14 +54,15 @@ input:disabled {
 
 ::-webkit-scrollbar {
 	width: 10px;
+	background-color: #333;
 }
 
 ::-webkit-scrollbar-thumb {
-	background: #ccc;
+	background: #666;
 }
 
 ::-webkit-scrollbar-corner {
-	background-color: #fff;
+	background-color: #444;
 }
 
 .btn {
@@ -105,16 +106,4 @@ button.link:hover {
 	.skz-splashscreen__label {
 		color: #fff;
 	}
-
-	::-webkit-scrollbar-thumb {
-		background: #666;
-	}
-
-	::-webkit-scrollbar-corner {
-		background-color: #444;
-	}
-
-	::-webkit-scrollbar {
-		background-color: #333;
-	}
 }
diff --git a/src/components/AccountSummary/AccountSummary.svelte b/src/components/AccountSummary/AccountSummary.svelte
@@ -1,29 +1,17 @@
 <script>
-	import { Service } from 'services/Service';
 	import {
-		isFetchingData,
-		organizations,
-		projects,
+		offline,
 		pullRequests,
 		repositories,
 	} from 'shared/stores/default.store';
-	import Modale from 'components/Modale';
-	import AccountTitle from 'components/AccountTitle';
 	import Icons from 'components/icons';
-	import { checkOrganization } from 'utils';
 	import type { ProviderEnum } from 'models/skizzle/ProviderEnum';
 	import { client } from 'shared/stores/authentication.store';
 	import type { ProfileType } from 'models/skizzle/ProfileType';
 
 	export let profile: ProfileType;
-	export let withSettings:boolean = false;
-	let isSettingsDisplayed = false;
-
-	const onModaleClose = () => (isSettingsDisplayed = false);
 
 	const logout = (provider: ProviderEnum) => {
-		organizations.reset(provider);
-		projects.reset(provider);
 		repositories.reset(provider);
 		pullRequests.reset(provider);
 		client.update(n => ({
@@ -33,6 +21,17 @@
 	};
 </script>
 
+<div class="container">
+	<div class="avatar">
+		<img width="64" height="64" src={profile.avatar} alt={profile.name} />
+	</div>
+	<div class="user">
+		<span class="name">{profile.name}</span>
+		{#if profile.email}<span class="email">{profile.email}</span>{/if}
+	</div>
+	<button on:click={() => logout(profile.provider)} title="Déconnexion" disabled={$offline}><Icons.Delete /></button>
+</div>
+
 <style>
 	.container {
 		display: flex;
@@ -83,85 +82,7 @@
 		opacity: 0.5;
 	}
 
-	button + button {
-		margin-left: 1rem;
-	}
-
 	.user {
 		margin-right: auto;
 	}
-
-	.big {
-		width: 6rem;
-		height: 6rem;
-	}
-
-	.header {
-		margin: -2rem -2rem 2rem;
-		padding: 2rem 2rem 1rem;
-		border-bottom-right-radius: 0;
-		border-bottom-left-radius: 0;
-		background-color: #444;
-	}
-
-	.header .avatar {
-		margin-top: -2.5rem;
-	}
-
-	.organizations {
-		list-style: none;
-	}
-
-	.organizations li {
-		margin-bottom: 0.5rem;
-	}
-</style>
-
-<div class="container">
-	<div class="avatar">
-		<img width="64" height="64" src={profile.avatar} alt={profile.name} />
-	</div>
-	<div class="user">
-		<span class="name">{profile.name}</span>
-		{#if profile.email}<span class="email">{profile.email}</span>{/if}
-	</div>
-	{#if withSettings}
-		<button on:click={() => (isSettingsDisplayed = !isSettingsDisplayed)} title="Configuration"><Icons.AccountSettings /></button>
-	{/if}
-	<button on:click={() => logout(profile.provider)} title="Déconnexion"><Icons.Delete /></button>
-</div>
-{#if isSettingsDisplayed}
-	<Modale onClose={onModaleClose}>
-		{#await Service.getOrganizations(profile.provider, { profile })}
-			<p>Chargement...</p>
-		{:then organizations}
-			<div class="container header">
-				<div class="avatar big">
-					{#await Service.getAvatar(profile.provider, profile.descriptor, organizations[0].organizationName) then avatar}
-						<img width="64" height="64" src={avatar} alt={profile.name} />
-					{/await}
-				</div>
-				<div class="user">
-					<span class="name">{profile.name}</span>
-					<span class="email">{profile.email}</span>
-				</div>
-			</div>
-			<AccountTitle>Organisations</AccountTitle>
-			<ul class="organizations">
-				{#each organizations as organization}
-					<li>
-						<input
-							type="checkbox"
-							id={organization.organizationName}
-							checked={organization.checked}
-							on:change={event => checkOrganization(event, organization)}
-							disabled={$isFetchingData} />
-						<label for={organization.organizationName}>
-							{organization.organizationName}
-						</label>
-					</li>
-				{/each}
-			</ul>
-		{/await}
-	</Modale>
-{/if}
+</style>
diff --git a/src/components/AddAccount/AddAccount.svelte b/src/components/AddAccount/AddAccount.svelte
@@ -1,6 +1,6 @@
 <script>
 	import Icons from 'components/icons';
-	import { isFetchingData } from 'shared/stores/default.store';
+	import { isFetchingData, offline } from 'shared/stores/default.store';
 	
 	export let onClick: () => void;
 	export let text: string;
@@ -33,5 +33,5 @@
 </style>
 
 <div>
-	<button on:click={onClick} disabled={$isFetchingData}><Icons.AddAccount />{text}</button>
+	<button on:click={onClick} disabled={$isFetchingData || $offline}><Icons.AddAccount />{text}</button>
 </div>
diff --git a/src/components/AzureDevOps/AzureDevOps.svelte b/src/components/AzureDevOps/AzureDevOps.svelte
@@ -3,8 +3,7 @@
 	import { clientAuthenticated } from 'shared/stores/authentication.store';
 	import {
 		isFetchingData,
-		isLoading,
-		projects
+		isLoading
 	} from 'shared/stores/default.store';
 	import { authorize } from 'shared/token';
 	import { ProviderEnum } from 'models/skizzle/ProviderEnum';
@@ -14,20 +13,24 @@
 	import SearchResults from 'components/SearchResults';
 	import FollowedRepositories from 'components/FollowedRepositories';
 	import Search from 'components/Search';
+	import type { RepositoryType } from 'models/skizzle';
 
 	let search: string = '';
 
-	$: fetchedProjects = $projects.filter(x =>
-		x.name.toLocaleLowerCase().includes(search.toLocaleLowerCase()),
-	);
-
-	const onSearchSubmit = (query: string): void => {
+	const onSearchSubmit = (repositories: RepositoryType[]) => (query: string): void => {
 		search = query;
+
+		fetchedAzureDevOpsRepositories = repositories.filter(({projectName, name}) =>
+			name.toLocaleLowerCase().includes(search.toLocaleLowerCase()) ||
+			projectName.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+		)
 	};
 
 	const onSearchCancel = (): void => {
 		search = '';
 	};
+	
+	$: fetchedAzureDevOpsRepositories = [] as RepositoryType[];
 </script>
 
 <style>
@@ -61,35 +64,41 @@
 </style>
 
 {#if $isLoading}
-	<p>Chargement...</p>
+	<p>Chargement de l'application...</p>
 {:else if $clientAuthenticated.isAzureDevOpsAuthenticated}
 	{#await Service.getProfile(ProviderEnum.AzureDevOps)}
-		<p>Chargement...</p>
+		<p>Chargement du profile</p>
 	{:then profile}
-		<section>
-			<AccountTitle>Votre compte Azure DevOps</AccountTitle>
-			<AccountSummary {profile} withSettings={true} />
-		</section>
-		<div>
-			<section>
-				<AccountTitle>Suivre un nouveau repository</AccountTitle>
-				<p class="intro">Cherchez le nom de son projet associé.</p>
-				<Search
-					onSubmit={onSearchSubmit}
-					onCancel={onSearchCancel}
-					disabled={$isFetchingData}
-					placeholder="Rechercher un projet" />
-
-				{#if search}
-					<SearchResults
-						{search}
-						projects={fetchedProjects} />
-				{/if}
-			</section>
+		{#await Service.getRepositories(ProviderEnum.AzureDevOps, { profile })}
+			<p>Chargement de la liste des repositories</p>
+		{:then repositories}
 			<section>
-				<FollowedRepositories {profile} />
+				<AccountTitle>Votre compte Azure DevOps</AccountTitle>
+				<AccountSummary {profile} />
 			</section>
-		</div>
+			<div>
+				<section>
+					<AccountTitle>Suivre un nouveau repository</AccountTitle>
+					<p class="intro">Cherchez le nom de son projet et/ou repository associé.</p>
+					<Search
+						onSubmit={onSearchSubmit(repositories)}
+						onCancel={onSearchCancel}
+						disabled={$isFetchingData}
+						placeholder="Rechercher un projet ou un repos" />
+
+					{#if search}
+						<SearchResults
+							{search}
+							repos={fetchedAzureDevOpsRepositories} />
+					{/if}
+				</section>
+				<section>
+					<FollowedRepositories {profile} />
+				</section>
+			</div>
+		{:catch}
+			<p>Fetching profile failed.</p>
+		{/await}
 	{:catch}
 		<p>Fetching profile failed.</p>
 	{/await}

diff --git a/src/components/Comment/Comment.svelte b/src/components/Comment/Comment.svelte
@@ -1,8 +1,23 @@
 <script lang="ts">
+  import marked from 'marked'
 	import { Service } from 'services/Service';
-	export let comment;
+	import type { CommentType } from 'models/skizzle';
+
+	export let comment: CommentType;
 </script>
 
+<div class="comment">
+	{#await Service.getAvatar(comment.provider, comment.author.avatar, comment.organizationName) then avatar}
+		<div class="avatar">
+			<img width="64" height="64" src={avatar} alt={comment.author.displayName} />
+		</div>
+	{/await}
+	<div class="content">
+		<h2>{comment.author.displayName} <small>{comment.date}</small></h2>
+		<div>{@html marked(comment.text)}</div>
+	</div>
+</div>
+
 <style>
 	.avatar {
 		margin-right: 1rem;
@@ -51,21 +66,9 @@
 		font-weight: normal;
 	}
 
-	p {
+	h2 + div {
 		font-size: 0.9rem;
 		line-height: 1.3;
 		color: #ddd;
 	}
 </style>
-
-<div class="comment">
-	{#await Service.getAvatar(comment.provider, comment.author.avatar, comment.organizationName) then avatar}
-		<div class="avatar">
-			<img width="64" height="64" src={avatar} alt={comment.author.displayName} />
-		</div>
-	{/await}
-	<div class="content">
-		<h2>{comment.author.displayName} <small>{comment.date}</small></h2>
-		<p>{comment.text}</p>
-	</div>
-</div>
diff --git a/src/components/CustomListSettings/CustomListSettings.svelte b/src/components/CustomListSettings/CustomListSettings.svelte
@@ -122,7 +122,6 @@
 					{#if $repositories.filter(repo => repo.provider === ProviderEnum.AzureDevOps).length}
 						<optgroup label="Azure Devops">
 							{#each $repositories
-								.filter(({ checked }) => checked)
 								.filter(
 									repo => repo.provider === ProviderEnum.AzureDevOps,
 								) as repository}
@@ -140,7 +139,6 @@
 					{#if $repositories.filter(repo => repo.provider === ProviderEnum.Github).length}
 						<optgroup label="Github">
 							{#each $repositories
-								.filter(({ checked }) => checked)
 								.filter(repo => repo.provider === ProviderEnum.Github) as repository}
 								<option
 									disabled={repositoriesIds.includes(repository.repositoryId)}