Skip to content

DRAFT: Suggested rules in repo view #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
karlclement wants to merge 4 commits into
base: development
Choose a base branch
from
Open

DRAFT: Suggested rules in repo view #78

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dab81b0
Suggested rules
karlclement Nov 13, 2024
688f400
Accept or reject suggested rules
karlclement Nov 13, 2024
19c5a35
Suggestion
karlclement Nov 13, 2024
968f78a
Fix borders
karlclement Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions src/lib/components/lists/ListItem.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,29 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { twMerge } from "tailwind-merge";

export let href: string | null = null;
export let href: string | undefined = undefined;
export let borderColor: string | undefined = undefined;
let classes: string = 'px-4 py-3 flex justify-between items-center first:rounded-t last:rounded-b border-b border-b-neutral-800 last:border-b-0';

const getBorderColor = () => {
if (!borderColor) return 'border-l-0 ml-0.5';
return `border-l-2 ml-0 ${borderColor}`;
};

const handleClick = () => {
if (!href) return;
goto(href);
};
</script>

<div class={`px-4 py-3 flex justify-between items-center ${href ? 'cursor-pointer' : ''}`} on:click={handleClick}>
<div class="flex items-center space-x-2">
<div class={twMerge(classes, getBorderColor())} class:cursor-pointer={href} on:click={handleClick}>
<div class="flex-1 items-center space-x-2">
<slot />
</div>
{#if href}
<iconify-icon icon="lucide:chevron-right" class="text-xl" />
<div class="pl-4 flex flex-row items-center">
<iconify-icon icon="lucide:chevron-right" class="text-xl" />
</div>
{/if}
</div>
13 changes: 11 additions & 2 deletions src/lib/styles/buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,17 @@
@apply text-neutral-900 font-display font-normal;
@apply border border-electric;
@apply hover:border-electric;
@apply hover:to-electric-700 hover:from-electric-600;
@apply transition ease-in-out duration-150;
@apply hover:to-electric-500 hover:from-electric-500;
@apply transition-all ease-in-out duration-150;
}

.btn-dark {
@apply bg-gradient-to-b from-neutral-600 to-neutral-800;
@apply text-neutral-100 font-display font-normal;
@apply border border-neutral-600;
@apply hover:border-neutral-600;
@apply hover:to-neutral-600 hover:from-neutral-600;
@apply transition-all ease-in-out duration-150;
}

.btn-transparent {
Expand Down
151 changes: 102 additions & 49 deletions src/routes/(app)/org/[orgId]/repos/[repositoryId]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,33 @@
<script lang="ts">
import { invalidateAll } from "$app/navigation";
import { page } from "$app/stores";
import CollapsibleListItem from '$lib/components/lists/CollapsibleListItem.svelte';
import ListItem from '$lib/components/lists/ListItem.svelte';
import StatGroup from '$lib/components/stats/StatGroup.svelte';
import StatGroupItem from '$lib/components/stats/StatGroupItem.svelte';
import Tag from '$lib/components/Tag.svelte';
import { ORGANIZATION_ROUTES } from "$lib/constants/routeConstants";
import { errorMessage, successMessage } from "$lib/toast";
import 'iconify-icon';

$: ({ orgId, repository, rules, customRules } = $page.data);

const getNewRuleRoute = (): string => {
return ORGANIZATION_ROUTES.REPOSITORY_RULE_NEW(orgId, repository.public_id);
}

const addressSuggestion = (event: Event, publicId: string, accept: boolean) => {
event.stopPropagation();

if (accept) {
console.log('Accepting', publicId);
successMessage('Rule accepted');
} else {
console.log('Rejecting', publicId);
errorMessage('Rule rejected');
}
invalidateAll();
};
</script>

<div class="py-10 px-4 space-y-6">
Expand All @@ -27,22 +42,66 @@
<StatGroupItem title={'Coding Standards'} value={28} />
</StatGroup> -->

<div class="flex flex-row justify-between items-center">
<h2 class="text-xl font-semibold">Custom Rules</h2>
{#if customRules?.length}
<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
{/if}
</div>
<!-- SUGGESTED -->
{#if customRules?.length}
<div class="flex flex-row items-center space-x-4">
<h2 class="text-xl font-semibold">Suggested Rules</h2>
<Tag clazz="bg-electric">{customRules?.length}</Tag>
</div>

<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
{#if customRules?.length}
<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
{#each customRules as rule}
<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
<span>{rule.title}</span>
<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
<div class="flex-1 flex flex-row">
<div class="flex-1 flex flex-col justify-center space-y-1">
<div>
<span>{rule.title}</span>
</div>
{#if rule.tags?.length}
<div class="space-x-1 pb-1">
{#each rule.tags as tag}
<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
{/each}
</div>
{/if}
</div>
<div class="flex flex-row items-center space-x-2">
<div class="lg:tooltip" data-tip="Reject">
<button
class="btn btn-sm btn-circle w-12 btn-dark"
on:click={(e) => addressSuggestion(e, rule.public_id, false)}
>
<iconify-icon icon="lucide:x" class="text-xl"></iconify-icon>
</button>
</div>
<div class="lg:tooltip" data-tip="Accept">
<button
class="btn btn-sm btn-circle w-12 btn-electric"
on:click={(e) => addressSuggestion(e, rule.public_id, true)}
>
<iconify-icon icon="lucide:check" class="text-xl"></iconify-icon>
</button>
</div>
</div>
</div>
</ListItem>
{/each}
{:else}
<div class="p-6 flex flex-col items-center space-y-2">
</div>
{/if}

<div class="divider"></div>

{#if rules?.length}
<div class="flex flex-row justify-between items-center">
<h2 class="text-xl font-semibold">Code Review Rules</h2>
{#if customRules?.length}
<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
{/if}
</div>

<div class="space-y-2">
{#if !customRules?.length}
<div class="p-6 flex flex-col items-center space-y-2 bg-neutral-900 rounded border border-neutral-800">
<span>
<iconify-icon icon="lucide:file-check" class="text-5xl text-neutral-100"></iconify-icon>
</span>
Expand All @@ -52,54 +111,48 @@
<a href={getNewRuleRoute()} class="btn btn-sm btn-electric rounded-full">Create a Rule</a>
</div>
</div>
{/if}
</div>
{/if}

{#if rules?.length}
<h2 class="text-xl font-semibold">Code Review Rules</h2>
<div class="bg-neutral-900 rounded border border-neutral-800">

<div class="space-y-2">
<div class="bg-neutral-900 divide-y divide-neutral-800 rounded border border-neutral-800">
<!-- CUSTOM -->
{#if customRules?.length}
{#each customRules as rule}
<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-electric">
<div class="space-y-1">
<div>
<span>{rule.title}</span>
</div>
{#if rule.tags?.length}
<div class="space-x-1 pb-1">
{#each rule.tags as tag}
<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
{/each}
</div>
{/if}
</div>
</ListItem>
{/each}
{/if}

<!-- SQUIRE -->
{#each rules as rule}
<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)}>
<ListItem href={ORGANIZATION_ROUTES.REPOSITORY_RULE(orgId, repository.public_id, rule.public_id)} borderColor="border-l-icey">
<div class="space-y-1">
<div>
<span>{rule.title}</span>
</div>
<div class="space-x-1 pb-1">
{#each rule.tags as tag}
<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
{/each}
</div>
{#if rule.tags?.length}
<div class="space-x-1 pb-1">
{#each rule.tags as tag}
<Tag clazz="bg-neutral-700 text-neutral-200">{tag.name}</Tag>
{/each}
</div>
{/if}
</div>
</ListItem>
{/each}
</div>

<!-- {#each frameworks as framework}
<CollapsibleListItem>
<div slot="top" class="flex-1">
<div class="w-full flex flex-row items-center space-x-2">
<div class="flex-1">{framework.name}</div>
{#if framework.comments > 0}
<div class="flex items-center space-x-1 text-gray-400">
<iconify-icon icon="lucide:message-square-code" class="text-xl" />
<span>{framework.comments}</span>
</div>
{/if}
</div>

</div>
<div slot="bottom" class="divide-y divide-neutral-800">
{#each framework.standards as standard}
<ListItem href={ORGANIZATION_ROUTES.STANDARD(orgId, repository.public_id, framework.public_id, standard.public_id)}>
<Tag clazz="bg-electric">{standard.key}</Tag>
<span>{standard.title}</span>
</ListItem>
{/each}
</div>
</CollapsibleListItem>
{/each} -->
</div>
{/if}
</div>
14 changes: 14 additions & 0 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,20 @@ export default {
800: '#005753',
900: '#001F1D',
950: '#000302'
},
icey: {
DEFAULT: '#7B61FF',
50: '#EEEBFF',
100: '#E1DBFF',
200: '#C8BDFF',
300: '#AE9EFF',
400: '#9580FF',
500: '#7B61FF',
600: '#3F1AFF',
700: '#2200D1',
800: '#17008A',
900: '#0B0042',
950: '#05001F'
}
}
}
Expand Down