Skip to content
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.

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

Remove gitlab and add others to origin filter #895

Merged
merged 1 commit into from
Apr 17, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
4 changes: 2 additions & 2 deletions dashboard/src/components/templates/app/AppNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { A } from '@solidjs/router'
import type { Component } from 'solid-js'
import type { Application, Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
import { providerToIcon, repositoryURLToProvider } from '/@/libs/application'
import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import { colorVars, textVars } from '/@/theme'
import { Nav } from '../Nav'

Expand Down Expand Up @@ -55,7 +55,7 @@ export const AppNav: Component<{
}}
>
<RepositoryInfo>
{providerToIcon(repositoryURLToProvider(props.repository.url), 20)}
{originToIcon(repositoryURLToOrigin(props.repository.url), 20)}
<RepositoryName>{props.repository.name}</RepositoryName>
</RepositoryInfo>
</A>
Expand Down
24 changes: 12 additions & 12 deletions dashboard/src/components/templates/app/AppsFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { type Component, For, type Setter, Show } from 'solid-js'
import { CheckBoxIcon } from '/@/components/UI/CheckBoxIcon'
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
import { RadioIcon } from '/@/components/UI/RadioIcon'
import { type ApplicationState, type Provider, providerToIcon } from '/@/libs/application'
import { allProviders, allStatuses, sortItems } from '/@/pages/apps'
import { type ApplicationState, type RepositoryOrigin, originToIcon } from '/@/libs/application'
import { allOrigins, allStatuses, sortItems } from '/@/pages/apps'
import { colorVars, textVars } from '/@/theme'
import { AppStatusIcon } from './AppStatusIcon'

Expand Down Expand Up @@ -154,15 +154,15 @@ const FilterIndicator = styled('div', {
const AppsFilter: Component<{
statuses: ApplicationState[]
setStatues: Setter<ApplicationState[]>
provider: Provider[]
setProvider: Setter<Provider[]>
origin: RepositoryOrigin[]
setOrigin: Setter<RepositoryOrigin[]>
sort: keyof typeof sortItems
setSort: Setter<keyof typeof sortItems>
includeNoApp: boolean
setIncludeNoApp: Setter<boolean>
}> = (props) => {
const filtered = () =>
props.statuses.length !== allStatuses.length || props.provider.length !== allProviders.length || props.includeNoApp
props.statuses.length !== allStatuses.length || props.origin.length !== allOrigins.length || props.includeNoApp

return (
<DropdownMenu.Root>
Expand Down Expand Up @@ -216,26 +216,26 @@ const AppsFilter: Component<{
'grid-area': 'provider',
}}
>
Provider
Origin
<ItemsContainer>
<For each={allProviders}>
<For each={allOrigins}>
{(s) => (
<Checkbox.Root
checked={props.provider.includes(s.value)}
checked={props.origin.includes(s.value)}
onChange={(selected) => {
if (selected) {
props.setProvider([...props.provider, s.value])
props.setOrigin([...props.origin, s.value])
} else {
props.setProvider(props.provider.filter((v) => v !== s.value))
props.setOrigin(props.origin.filter((v) => v !== s.value))
}
}}
>
<Checkbox.Input />
<Checkbox.Label class={SelectItemStyle}>
<Checkbox.Indicator forceMount class={indicatorStyle}>
<CheckBoxIcon checked={props.provider.includes(s.value)} />
<CheckBoxIcon checked={props.origin.includes(s.value)} />
</Checkbox.Indicator>
{providerToIcon(s.value)}
{originToIcon(s.value)}
{s.label}
</Checkbox.Label>
</Checkbox.Root>
Expand Down
24 changes: 12 additions & 12 deletions dashboard/src/components/templates/repo/ReposFilter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { styled } from '@macaron-css/solid'
import { type Component, For, type Setter, Show } from 'solid-js'
import { CheckBoxIcon } from '/@/components/UI/CheckBoxIcon'
import { MaterialSymbols } from '/@/components/UI/MaterialSymbols'
import { type Provider, providerToIcon } from '/@/libs/application'
import { allProviders } from '/@/pages/apps'
import { type RepositoryOrigin, originToIcon } from '/@/libs/application'
import { allOrigins } from '/@/pages/apps'
import { colorVars, textVars } from '/@/theme'

const contentShowKeyframes = keyframes({
Expand Down Expand Up @@ -133,10 +133,10 @@ const FilterIndicator = styled('div', {
})

const ReposFilter: Component<{
provider: Provider[]
setProvider: Setter<Provider[]>
origin: RepositoryOrigin[]
setOrigin: Setter<RepositoryOrigin[]>
}> = (props) => {
const filtered = () => props.provider.length !== allProviders.length
const filtered = () => props.origin.length !== allOrigins.length

return (
<DropdownMenu.Root>
Expand All @@ -154,26 +154,26 @@ const ReposFilter: Component<{
<DropdownMenu.Portal>
<DropdownMenu.Content class={contentStyle}>
<FilterItemContainer>
Provider
Origin
<ItemsContainer>
<For each={allProviders}>
<For each={allOrigins}>
{(s) => (
<Checkbox.Root
checked={props.provider.includes(s.value)}
checked={props.origin.includes(s.value)}
onChange={(selected) => {
if (selected) {
props.setProvider([...props.provider, s.value])
props.setOrigin([...props.origin, s.value])
} else {
props.setProvider(props.provider.filter((v) => v !== s.value))
props.setOrigin(props.origin.filter((v) => v !== s.value))
}
}}
>
<Checkbox.Input />
<Checkbox.Label class={SelectItemStyle}>
<Checkbox.Indicator forceMount class={indicatorStyle}>
<CheckBoxIcon checked={props.provider.includes(s.value)} />
<CheckBoxIcon checked={props.origin.includes(s.value)} />
</Checkbox.Indicator>
{providerToIcon(s.value)}
{originToIcon(s.value)}
{s.label}
</Checkbox.Label>
</Checkbox.Root>
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/components/templates/repo/RepositoryNav.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import type { Component } from 'solid-js'
import type { Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
import { providerToIcon, repositoryURLToProvider } from '/@/libs/application'
import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import { Nav } from '../Nav'

export interface Props {
repository: Repository
}

export const RepositoryNav: Component<Props> = (props) => {
return <Nav title={props.repository.name} icon={providerToIcon(repositoryURLToProvider(props.repository.url), 40)} />
return <Nav title={props.repository.name} icon={originToIcon(repositoryURLToOrigin(props.repository.url), 40)} />
}
4 changes: 2 additions & 2 deletions dashboard/src/components/templates/repo/RepositoryRow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import type { Repository } from '/@/api/neoshowcase/protobuf/gateway_pb'
import { Button } from '/@/components/UI/Button'
import Skeleton from '/@/components/UI/Skeleton'
import { user } from '/@/libs/api'
import { providerToIcon, repositoryURLToProvider } from '/@/libs/application'
import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import { colorVars, textVars } from '/@/theme'

const Container = styled('div', {
Expand Down Expand Up @@ -74,7 +74,7 @@ export const RepositoryRow: Component<Props> = (props) => {
<Show when={props.repository} fallback={<RepositoryRowSkeleton />}>
<Container>
<TitleContainer>
{providerToIcon(repositoryURLToProvider(props.repository!.url), 24)}
{originToIcon(repositoryURLToOrigin(props.repository!.url), 24)}
<A
href={`/repos/${props.repository?.id}`}
style={{
Expand Down
16 changes: 8 additions & 8 deletions dashboard/src/libs/application.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { PlainMessage } from '@bufbuild/protobuf'
import { AiFillGithub, AiFillGitlab } from 'solid-icons/ai'
import { RiDevelopmentGitRepositoryLine } from 'solid-icons/ri'
import { SiGitea } from 'solid-icons/si'
import type { JSXElement } from 'solid-js'
import {
Expand Down Expand Up @@ -82,25 +83,24 @@ export const applicationState = (app: Application): ApplicationState => {
}
}

export type Provider = 'GitHub' | 'GitLab' | 'Gitea'
export type RepositoryOrigin = 'GitHub' | 'Gitea' | 'Others'

export const repositoryURLToProvider = (url: string): Provider => {
export const repositoryURLToOrigin = (url: string): RepositoryOrigin => {
const normalizedURL = url.toLowerCase()
if (normalizedURL.includes('github')) return 'GitHub'
if (normalizedURL.includes('gitlab')) return 'GitLab'
if (normalizedURL.includes('gitea')) return 'Gitea'
if (normalizedURL.includes('git.trap.jp')) return 'Gitea'
return 'GitHub' // fallback?
return 'Others'
}

export const providerToIcon = (provider: Provider, size = 20): JSXElement => {
switch (provider) {
export const originToIcon = (origin: RepositoryOrigin, size = 20): JSXElement => {
switch (origin) {
case 'GitHub':
return <AiFillGithub size={size} color={colorVars.semantic.text.black} />
case 'GitLab':
return <AiFillGitlab size={size} color="#FC6D26" />
case 'Gitea':
return <SiGitea size={size} color={colorVars.semantic.text.black} />
case 'Others':
return <RiDevelopmentGitRepositoryLine size={size} color={colorVars.semantic.text.black} />
}
}

Expand Down
28 changes: 16 additions & 12 deletions dashboard/src/pages/apps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
} from '/@/api/neoshowcase/protobuf/gateway_pb'
import type { SelectOption } from '/@/components/templates/Select'
import { client, getRepositoryCommits, user } from '/@/libs/api'
import { ApplicationState, type Provider, applicationState, repositoryURLToProvider } from '/@/libs/application'
import { ApplicationState, type RepositoryOrigin, applicationState, repositoryURLToOrigin } from '/@/libs/application'
import { createSessionSignal } from '/@/libs/localStore'
import { Button } from '../components/UI/Button'
import { MaterialSymbols } from '../components/UI/MaterialSymbols'
Expand Down Expand Up @@ -114,16 +114,16 @@ export const allStatuses: SelectOption<ApplicationState>[] = [
{ label: 'Serving', value: ApplicationState.Serving },
{ label: 'Error', value: ApplicationState.Error },
]
export const allProviders: SelectOption<Provider>[] = [
export const allOrigins: SelectOption<RepositoryOrigin>[] = [
{ label: 'GitHub', value: 'GitHub' },
{ label: 'GitLab', value: 'GitLab' },
{ label: 'Gitea', value: 'Gitea' },
{ label: 'Others', value: 'Others' },
]

const AppsList: Component<{
scope: GetRepositoriesRequest_Scope
statuses: ApplicationState[]
provider: Provider[]
origins: RepositoryOrigin[]
query: string
sort: keyof typeof sortItems
includeNoApp: boolean
Expand All @@ -147,9 +147,9 @@ const AppsList: Component<{
(hashes) => getRepositoryCommits(hashes),
)

const filteredReposByProvider = createMemo(() => {
const p = props.provider
return repos()?.repositories.filter((r) => p.includes(repositoryURLToProvider(r.url))) ?? []
const filteredReposByOrigin = createMemo(() => {
const p = props.origins
return repos()?.repositories.filter((r) => p.includes(repositoryURLToOrigin(r.url))) ?? []
})
const filteredApps = createMemo(() => {
const s = props.statuses
Expand All @@ -161,7 +161,7 @@ const AppsList: Component<{
if (!appsMap[app.repositoryId]) appsMap[app.repositoryId] = []
appsMap[app.repositoryId].push(app)
}
const res = filteredReposByProvider().reduce<RepoWithApp[]>((acc, repo) => {
const res = filteredReposByOrigin().reduce<RepoWithApp[]>((acc, repo) => {
if (!props.includeNoApp && !appsMap[repo.id]) return acc
acc.push({ repo, apps: appsMap[repo.id] || [] })
return acc
Expand Down Expand Up @@ -252,7 +252,11 @@ export default () => {
'apps-statuses-v1',
allStatuses.map((s) => s.value),
)
const [provider, setProvider] = createSessionSignal<Provider[]>('apps-provider', ['GitHub', 'GitLab', 'Gitea'])
const [origin, setOrigin] = createSessionSignal<RepositoryOrigin[]>('apps-repository-origin', [
'GitHub',
'Gitea',
'Others',
])
const [query, setQuery] = createSessionSignal('apps-query', '')
const [sort, setSort] = createSessionSignal<keyof typeof sortItems>('apps-sort', sortItems.desc.value)
const [includeNoApp, setIncludeNoApp] = createSessionSignal('apps-include-no-app', false)
Expand Down Expand Up @@ -292,8 +296,8 @@ export default () => {
<AppsFilter
statuses={statuses()}
setStatues={setStatuses}
provider={provider()}
setProvider={setProvider}
origin={origin()}
setOrigin={setOrigin}
sort={sort()}
setSort={setSort}
includeNoApp={includeNoApp()}
Expand All @@ -316,7 +320,7 @@ export default () => {
<AppsList
scope={scope()}
statuses={statuses()}
provider={provider()}
origins={origin()}
query={query()}
sort={sort()}
includeNoApp={includeNoApp()}
Expand Down
18 changes: 9 additions & 9 deletions dashboard/src/pages/apps/new.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ import {
import { type WebsiteFormStatus, WebsiteSetting, newWebsite } from '/@/components/templates/app/WebsiteSettings'
import ReposFilter from '/@/components/templates/repo/ReposFilter'
import { client, handleAPIError, systemInfo } from '/@/libs/api'
import { type Provider, providerToIcon, repositoryURLToProvider } from '/@/libs/application'
import { type RepositoryOrigin, originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import { colorOverlay } from '/@/libs/colorOverlay'
import { colorVars, textVars } from '/@/theme'

Expand Down Expand Up @@ -196,11 +196,11 @@ const RepositoryStep: Component<{
const [apps] = createResource(() => client.getApplications({ scope: GetApplicationsRequest_Scope.ALL }))

const [query, setQuery] = createSignal('')
const [provider, setProvider] = createSignal<Provider[]>(['GitHub', 'GitLab', 'Gitea'])
const [origin, setOrigin] = createSignal<RepositoryOrigin[]>(['GitHub', 'Gitea', 'Others'])

const filteredReposByProvider = createMemo(() => {
const p = provider()
return repos()?.repositories.filter((r) => p.includes(repositoryURLToProvider(r.url)))
const filteredReposByOrigin = createMemo(() => {
const p = origin()
return repos()?.repositories.filter((r) => p.includes(repositoryURLToOrigin(r.url)))
})
const repoWithApps = createMemo(() => {
const appsMap = apps()?.applications.reduce(
Expand All @@ -213,7 +213,7 @@ const RepositoryStep: Component<{
)

return (
filteredReposByProvider()?.map(
filteredReposByOrigin()?.map(
(
repo,
): {
Expand Down Expand Up @@ -244,7 +244,7 @@ const RepositoryStep: Component<{
value={query()}
onInput={(e) => setQuery(e.currentTarget.value)}
leftIcon={<MaterialSymbols>search</MaterialSymbols>}
rightIcon={<ReposFilter provider={provider()} setProvider={setProvider} />}
rightIcon={<ReposFilter origin={origin()} setOrigin={setOrigin} />}
/>
<List.Container>
<A href="/repos/new">
Expand Down Expand Up @@ -272,7 +272,7 @@ const RepositoryStep: Component<{
type="button"
>
<RepositoryRow>
<RepositoryIcon>{providerToIcon(repositoryURLToProvider(repo.repo.url), 24)}</RepositoryIcon>
<RepositoryIcon>{originToIcon(repositoryURLToOrigin(repo.repo.url), 24)}</RepositoryIcon>
<RepositoryName>{repo.repo.name}</RepositoryName>
<AppCount>{repo.appCount > 0 && `${repo.appCount} apps`}</AppCount>
<RepositoryUrl>{repo.repo.htmlUrl}</RepositoryUrl>
Expand Down Expand Up @@ -342,7 +342,7 @@ const GeneralStep: Component<{
<FormContainer>
<FormTitle>
Create Application from
{providerToIcon(repositoryURLToProvider(props.repo.url), 24)}
{originToIcon(repositoryURLToOrigin(props.repo.url), 24)}
{props.repo.name}
</FormTitle>
{/*
Expand Down
4 changes: 2 additions & 2 deletions dashboard/src/pages/repos/[id]/settings/general.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { DataTable } from '/@/components/layouts/DataTable'
import FormBox from '/@/components/layouts/FormBox'
import { FormItem } from '/@/components/templates/FormItem'
import { client, handleAPIError } from '/@/libs/api'
import { providerToIcon, repositoryURLToProvider } from '/@/libs/application'
import { originToIcon, repositoryURLToOrigin } from '/@/libs/application'
import useModal from '/@/libs/useModal'
import { useRepositoryData } from '/@/routes'
import { colorVars, textVars } from '/@/theme'
Expand Down Expand Up @@ -159,7 +159,7 @@ const DeleteRepository: Component<{
<Modal.Header>Delete Repository</Modal.Header>
<Modal.Body>
<ModalDeleteConfirm>
{providerToIcon(repositoryURLToProvider(props.repo.url), 24)}
{originToIcon(repositoryURLToOrigin(props.repo.url), 24)}
{props.repo.name}
</ModalDeleteConfirm>
</Modal.Body>
Expand Down
Loading