From 01d0519fe70aa91d9667fbfd249f00b967ccdb31 Mon Sep 17 00:00:00 2001
From: motoki317 <motoki317@gmail.com>
Date: Wed, 17 Apr 2024 16:40:04 +0900
Subject: [PATCH] Remove gitlab and add others to origin filter

---
 .../src/components/templates/app/AppNav.tsx   |  4 +--
 .../components/templates/app/AppsFilter.tsx   | 24 ++++++++--------
 .../components/templates/repo/ReposFilter.tsx | 24 ++++++++--------
 .../templates/repo/RepositoryNav.tsx          |  4 +--
 .../templates/repo/RepositoryRow.tsx          |  4 +--
 dashboard/src/libs/application.tsx            | 16 +++++------
 dashboard/src/pages/apps.tsx                  | 28 +++++++++++--------
 dashboard/src/pages/apps/new.tsx              | 18 ++++++------
 .../src/pages/repos/[id]/settings/general.tsx |  4 +--
 9 files changed, 65 insertions(+), 61 deletions(-)

diff --git a/dashboard/src/components/templates/app/AppNav.tsx b/dashboard/src/components/templates/app/AppNav.tsx
index 0e1ba43b..fae5d59a 100644
--- a/dashboard/src/components/templates/app/AppNav.tsx
+++ b/dashboard/src/components/templates/app/AppNav.tsx
@@ -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'
 
@@ -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>
diff --git a/dashboard/src/components/templates/app/AppsFilter.tsx b/dashboard/src/components/templates/app/AppsFilter.tsx
index ad2fa362..90a55ac9 100644
--- a/dashboard/src/components/templates/app/AppsFilter.tsx
+++ b/dashboard/src/components/templates/app/AppsFilter.tsx
@@ -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'
 
@@ -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>
@@ -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>
diff --git a/dashboard/src/components/templates/repo/ReposFilter.tsx b/dashboard/src/components/templates/repo/ReposFilter.tsx
index fe1f01dd..fa79717d 100644
--- a/dashboard/src/components/templates/repo/ReposFilter.tsx
+++ b/dashboard/src/components/templates/repo/ReposFilter.tsx
@@ -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({
@@ -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>
@@ -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>
diff --git a/dashboard/src/components/templates/repo/RepositoryNav.tsx b/dashboard/src/components/templates/repo/RepositoryNav.tsx
index 23242fa9..143c4d7c 100644
--- a/dashboard/src/components/templates/repo/RepositoryNav.tsx
+++ b/dashboard/src/components/templates/repo/RepositoryNav.tsx
@@ -1,6 +1,6 @@
 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 {
@@ -8,5 +8,5 @@ export interface Props {
 }
 
 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)} />
 }
diff --git a/dashboard/src/components/templates/repo/RepositoryRow.tsx b/dashboard/src/components/templates/repo/RepositoryRow.tsx
index e7401ee3..34386024 100644
--- a/dashboard/src/components/templates/repo/RepositoryRow.tsx
+++ b/dashboard/src/components/templates/repo/RepositoryRow.tsx
@@ -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', {
@@ -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={{
diff --git a/dashboard/src/libs/application.tsx b/dashboard/src/libs/application.tsx
index 562f016c..6b5e610f 100644
--- a/dashboard/src/libs/application.tsx
+++ b/dashboard/src/libs/application.tsx
@@ -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 {
@@ -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} />
   }
 }
 
diff --git a/dashboard/src/pages/apps.tsx b/dashboard/src/pages/apps.tsx
index 095c3e3a..6163af58 100644
--- a/dashboard/src/pages/apps.tsx
+++ b/dashboard/src/pages/apps.tsx
@@ -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'
@@ -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
@@ -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
@@ -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
@@ -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)
@@ -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()}
@@ -316,7 +320,7 @@ export default () => {
               <AppsList
                 scope={scope()}
                 statuses={statuses()}
-                provider={provider()}
+                origins={origin()}
                 query={query()}
                 sort={sort()}
                 includeNoApp={includeNoApp()}
diff --git a/dashboard/src/pages/apps/new.tsx b/dashboard/src/pages/apps/new.tsx
index 8db9b31c..88324647 100644
--- a/dashboard/src/pages/apps/new.tsx
+++ b/dashboard/src/pages/apps/new.tsx
@@ -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'
 
@@ -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(
@@ -213,7 +213,7 @@ const RepositoryStep: Component<{
     )
 
     return (
-      filteredReposByProvider()?.map(
+      filteredReposByOrigin()?.map(
         (
           repo,
         ): {
@@ -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">
@@ -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>
@@ -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>
           {/* 
diff --git a/dashboard/src/pages/repos/[id]/settings/general.tsx b/dashboard/src/pages/repos/[id]/settings/general.tsx
index 3585714e..e8b9a2c4 100644
--- a/dashboard/src/pages/repos/[id]/settings/general.tsx
+++ b/dashboard/src/pages/repos/[id]/settings/general.tsx
@@ -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'
@@ -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>