Skip to content

Commit

Permalink
Remove gitlab and add others to origin filter
Browse files Browse the repository at this point in the history
  • Loading branch information
motoki317 committed Apr 17, 2024
1 parent c854b45 commit 01d0519
Show file tree
Hide file tree
Showing 9 changed files with 65 additions and 61 deletions.
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

0 comments on commit 01d0519

Please sign in to comment.