No longer support submodule for frontend

frontend/components/DefinitionSources/DefinitionSources.tsx

@@ -21,9 +21,9 @@ import { color } from '@/constants/theme'
 import { CombinedDefinition } from '@/models/combinedDefinition'
 
 import { Source, sortSources } from '@/models/source'
-import { RecentModulesContext } from '@/context/RecentModulesContext'
-import { SourceModulesComboBox } from '@/components/SourceModulesComboBox'
-import { UpdateSourceModulesButton } from '@/components/UpdateSourceModulesButton'
+import { RecentModuleContext } from '@/context/RecentModuleContext'
+import { SourceModuleComboBox } from '@/components/SourceModuleComboBox'
+import { UpdateSourceModuleButton } from '@/components/UpdateSourceModuleButton'
 import { SourceMemoInput } from '@/components/SourceMemoInput'
 import React from 'react'
 import { HoverDotMetadataContext } from '@/context/HoverMetadataContext'
@@ -33,7 +33,7 @@ const sortTypes = ['asc', 'desc', 'none'] as const
 type SortTypes = (typeof sortTypes)[number]
 
 type SortState = {
-  key: 'sourceName' | 'modules'
+  key: 'sourceName' | 'module'
   sort: SortTypes
 }
 
@@ -52,7 +52,7 @@ const isTr = (event: MouseEvent, trRef: HTMLTableRowElement): boolean => {
 
 const DefinitionSourceTr: FC<DefinitionSourceTrProps> = ({ source, combinedDefinition, mutateCombinedDefinition }) => {
   const ref = createRef<HTMLTableRowElement>()
-  const { recentModules, setRecentModules } = useContext(RecentModulesContext)
+  const { recentModule, setRecentModule } = useContext(RecentModuleContext)
   const { setHoverDotMetadata } = useContext(HoverDotMetadataContext)
   const [editingMemo, setEditingMemo] = useState<boolean>(false)
   const [editingModules, setEditingModules] = useState<boolean>(false)
@@ -125,11 +125,11 @@ const DefinitionSourceTr: FC<DefinitionSourceTrProps> = ({ source, combinedDefin
       </Td>
       {!editingMemo && editingModules ? (
         <Td fixed colSpan={2}>
-          <SourceModulesComboBox
+          <SourceModuleComboBox
             sourceName={source.sourceName}
-            initialModules={source.modules}
-            onUpdate={(modules) => {
-              setRecentModules(modules)
+            initialModule={source.module}
+            onUpdate={(module) => {
+              setRecentModule(module)
               setEditingModules(false)
               mutateCombinedDefinition()
             }}
@@ -142,23 +142,23 @@ const DefinitionSourceTr: FC<DefinitionSourceTrProps> = ({ source, combinedDefin
         <Td fixed>
           <Cluster align="bottom">
             <div>
-              {source.modules.map((module, index) => (
-                <Text key={index} as="div" whiteSpace="nowrap">
-                  <Link to={path.modules.show(source.modules.slice(0, index + 1))}>{module}</Link>
+              {source.module && (
+                <Text as="div" whiteSpace="nowrap">
+                  <Link to={path.modules.show(source.module)}>{source.module}</Link>
                 </Text>
-              ))}
+              )}
             </div>
             <div>
               <Button square={true} onClick={() => setEditingModules(true)} size="s">
                 <FaPencilIcon alt="Edit" />
               </Button>
             </div>
 
-            {source.modules.length === 0 && (
+            {source.module === null && (
               <div>
-                <UpdateSourceModulesButton
+                <UpdateSourceModuleButton
                   sourceName={source.sourceName}
-                  newModules={recentModules}
+                  newModule={recentModule}
                   onSaved={mutateCombinedDefinition}
                 />
               </div>
@@ -209,8 +209,8 @@ export const DefinitionSources: FC<DefinitionSourcesProps> = ({ combinedDefiniti
                   Source name
                 </Th>
                 <Th>Memo</Th>
-                <Th fixed sort={sortState.key === 'modules' ? sortState.sort : 'none'} onSort={() => setNextSortType('modules')}>
-                  Modules
+                <Th fixed sort={sortState.key === 'module' ? sortState.sort : 'none'} onSort={() => setNextSortType('module')}>
+                  Module
                 </Th>
               </tr>
             </thead>

frontend/components/DotMetadataDialog/DotMetadataDialog.tsx

@@ -19,8 +19,8 @@ import { path } from '@/constants/path'
 import { spacing } from '@/constants/theme'
 import { DotDependencyMetadata, DotMetadata, DotModuleMetadata, DotSourceMetadata } from '@/models/combinedDefinition'
 
-import { SourceModulesComboBox } from '@/components/SourceModulesComboBox'
-import { RecentModulesContext } from '@/context/RecentModulesContext'
+import { SourceModuleComboBox } from '@/components/SourceModuleComboBox'
+import { RecentModuleContext } from '@/context/RecentModuleContext'
 import { SourceMemoInput } from '@/components/SourceMemoInput'
 
 export type DotMetadataDialogProps = {
@@ -41,7 +41,7 @@ const SourceDotMetadataContent: FC<{ dotMetadata: DotSourceMetadata } & Pick<Pro
   dotMetadata,
   mutateCombinedDefinition,
 }) => {
-  const { setRecentModules } = useContext(RecentModulesContext)
+  const { setRecentModule } = useContext(RecentModuleContext)
   const [editingModules, setEditingModules] = useState<boolean>(false)
   const [editingMemo, setEditingMemo] = useState<boolean>(false)
   const items: ComponentProps<typeof DefinitionList>['items'] = [
@@ -83,15 +83,15 @@ const SourceDotMetadataContent: FC<{ dotMetadata: DotSourceMetadata } & Pick<Pro
       ),
     },
     {
-      term: 'Modules',
+      term: 'Module',
       description: (
         <Cluster>
           {editingModules ? (
-            <SourceModulesComboBox
+            <SourceModuleComboBox
               sourceName={dotMetadata.sourceName}
-              initialModules={dotMetadata.modules}
-              onUpdate={(modules) => {
-                setRecentModules(modules)
+              initialModule={dotMetadata.module}
+              onUpdate={(module) => {
+                setRecentModule(module)
                 setEditingModules(false)
                 mutateCombinedDefinition()
               }}
@@ -102,9 +102,7 @@ const SourceDotMetadataContent: FC<{ dotMetadata: DotSourceMetadata } & Pick<Pro
           ) : (
             <>
               <div>
-                {dotMetadata.modules.map((module) => (
-                  <p key={module}>{module}</p>
-                ))}
+                <p key={dotMetadata.module}>{dotMetadata.module}</p>
               </div>
               <Button
                 square={true}
@@ -156,7 +154,7 @@ const ModuleDotMetadataContent: FC<{ dotMetadata: DotModuleMetadata }> = ({ dotM
   const items: ComponentProps<typeof DefinitionList>['items'] = [
     {
       term: 'Module Name',
-      description: <Link to={path.modules.show(dotMetadata.modules)}>{dotMetadata.modules.join(' / ')}</Link>,
+      description: <Link to={path.modules.show(dotMetadata.module)}>{dotMetadata.module}</Link>,
     },
   ]
 

frontend/components/SourceModulesComboBox/SourceModulesComboBox.tsx → frontend/components/SourceModuleComboBox/SourceModuleComboBox.tsx

@@ -1,43 +1,41 @@
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { Button, Cluster, ComboBoxItem, FaXmarkIcon, FormControl, SingleComboBox } from '@/components/ui'
 import { Module } from '@/models/module'
 import { useModules } from '@/repositories/moduleRepository'
-import { useSourceModules } from '@/repositories/sourceModulesRepository'
+import { useSourceModule } from '@/repositories/sourceModuleRepository'
 
-type Item = ComboBoxItem<Module[]>
+type Item = ComboBoxItem<Module>
 
 type Props = {
   sourceName: string
-  initialModules: Module[]
+  initialModule: Module | null
   onClose: () => void
-  onUpdate: (modules: Module[]) => void
+  onUpdate: (module: Module | null) => void
 }
 
-const equalModules = (a: Module[], b: Module[]) => a.every((module, index) => module === (b[index] ?? ''))
-
-const convertModulesToItem = (modules: Module[]): Item => ({
-  label: modules.join(' / '),
-  value: modules.join('/'),
-  data: modules,
+const convertModuleToItem = (module: Module): Item => ({
+  label: module,
+  value: module,
+  data: module,
 })
 
-const DELIMITER_RE = /\s*\/\s*/
-
-export const SourceModulesComboBox: FC<Props> = ({ sourceName, initialModules, onClose, onUpdate }) => {
+export const SourceModuleComboBox: FC<Props> = ({ sourceName, initialModule, onClose, onUpdate }) => {
   const { data, isLoading, mutate } = useModules()
-  const { trigger } = useSourceModules(sourceName)
+  const { trigger } = useSourceModule(sourceName)
 
   const [temporaryItem, setTemporaryItem] = useState<Item | null>(null)
   const [selectedItem, setSelectedItem] = useState<Item | null>(null)
+  const initializedInitialModule = useRef<boolean>(false)
 
-  const defaultItems: Item[] = useMemo(() => (data ?? []).map((modules) => convertModulesToItem(modules)), [data])
+  const defaultItems: Item[] = useMemo(() => (data ?? []).map((module) => convertModuleToItem(module)), [data])
 
   useEffect(() => {
-    if (selectedItem || !isLoading) return
+    if (selectedItem || isLoading || defaultItems.length === 0 || initializedInitialModule.current) return
 
-    setSelectedItem(defaultItems.find((item) => equalModules(item.data!, initialModules)) ?? null)
-  }, [isLoading, defaultItems, selectedItem, initialModules])
+    setSelectedItem(defaultItems.find((item) => item.data! === initialModule) ?? null)
+    initializedInitialModule.current = true
+  }, [isLoading, defaultItems, selectedItem, initialModule, initializedInitialModule])
 
   const handleSelectItem = useCallback(
     (item: Item) => {
@@ -56,8 +54,8 @@ export const SourceModulesComboBox: FC<Props> = ({ sourceName, initialModules, o
 
   const handleAddItem = useCallback(
     (label: string) => {
-      const temporaryModules: Module[] = label.split(DELIMITER_RE)
-      const newItem = convertModulesToItem(temporaryModules)
+      const temporaryModule: Module = label
+      const newItem = convertModuleToItem(temporaryModule)
 
       setTemporaryItem(newItem)
       setSelectedItem(newItem)
@@ -66,10 +64,10 @@ export const SourceModulesComboBox: FC<Props> = ({ sourceName, initialModules, o
   )
 
   const handleUpdate = useCallback(async () => {
-    const modules = selectedItem?.data ?? []
-    await trigger({ modules })
+    const module = selectedItem?.data ?? null
+    await trigger({ module })
     mutate()
-    onUpdate(modules)
+    onUpdate(module)
   }, [mutate, trigger, selectedItem, onUpdate])
 
   const items = useMemo(() => {
@@ -85,7 +83,7 @@ export const SourceModulesComboBox: FC<Props> = ({ sourceName, initialModules, o
   return (
     <Cluster>
       <div>
-        <FormControl title="Modules" helpMessage="Submodules are separated by slash">
+        <FormControl title="Module">
           <SingleComboBox
             items={items}
             selectedItem={selectedItem}

frontend/components/SourceModuleComboBox/index.ts

@@ -0,0 +1 @@
+export { SourceModuleComboBox } from './SourceModuleComboBox'

frontend/components/UpdateSourceModulesButton/UpdateSourceModulesButton.tsx → frontend/components/UpdateSourceModuleButton/UpdateSourceModuleButton.tsx

@@ -1,27 +1,27 @@
 import { FC, useCallback } from 'react'
 import { Button, FaCopyIcon, Tooltip } from '@/components/ui'
 import { Module } from '@/models/module'
-import { useSourceModules } from '@/repositories/sourceModulesRepository'
+import { useSourceModule } from '@/repositories/sourceModuleRepository'
 
 type Props = {
   sourceName: string
-  newModules: Module[]
+  newModule: Module | null
   onSaved: () => void
 }
 
-export const UpdateSourceModulesButton: FC<Props> = ({ sourceName, newModules, onSaved }) => {
-  const { trigger } = useSourceModules(sourceName)
+export const UpdateSourceModuleButton: FC<Props> = ({ sourceName, newModule, onSaved }) => {
+  const { trigger } = useSourceModule(sourceName)
 
   const updateSourceModules = useCallback(async () => {
-    await trigger({ modules: newModules })
+    await trigger({ module: newModule })
     onSaved()
-  }, [newModules, onSaved, trigger])
+  }, [newModule, onSaved, trigger])
 
-  if (newModules.length === 0) {
+  if (newModule === null) {
     return (
       <Button square={true} variant="primary" disabled onClick={() => {}} size="s">
         <Tooltip
-          message={`Once you update source's modules, you can save it with the same modules.`}
+          message={`Once you update source's module, you can save it with the same module.`}
           horizontal="center"
           vertical="bottom"
         >
@@ -32,7 +32,7 @@ export const UpdateSourceModulesButton: FC<Props> = ({ sourceName, newModules, o
   } else {
     return (
       <Button square={true} variant="primary" onClick={updateSourceModules} size="s">
-        <Tooltip message={`Save "${newModules.join('/')}"`} horizontal="center" vertical="bottom">
+        <Tooltip message={`Save "${newModule}"`} horizontal="center" vertical="bottom">
           <FaCopyIcon />
         </Tooltip>
       </Button>

frontend/components/UpdateSourceModuleButton/index.ts

@@ -0,0 +1 @@
+export { UpdateSourceModuleButton } from './UpdateSourceModuleButton'

frontend/constants/path.ts

@@ -14,10 +14,10 @@ export const path = {
   },
   modules: {
     index: () => '/modules',
-    show: (moduleNames: string[]) => `/modules/${moduleNames.join('/')}`,
+    show: (module: string) => `/modules/${module}`,
   },
   moduleDefinitions: {
-    show: (moduleNames: string[]) => `/module_definitions/${moduleNames.join('/')}`,
+    show: (module: string) => `/module_definitions/${module}`,
   },
   licenses: {
     index: () => '/licenses',
@@ -35,8 +35,8 @@ export const path = {
       memo: {
         update: (sourceName: string) => `/api/sources/${sourceName}/memo.json`,
       },
-      modules: {
-        update: (sourceName: string) => `/api/sources/${sourceName}/modules.json`,
+      module: {
+        update: (sourceName: string) => `/api/sources/${sourceName}/module.json`,
       },
     },
     sourceAliases: {
@@ -45,7 +45,7 @@ export const path = {
     },
     modules: {
       index: () => '/api/modules.json',
-      show: (moduleNames: string[]) => `/api/modules/${moduleNames.join('/')}.json`,
+      show: (module: string) => `/api/modules/${module}.json`,
     },
     moduleDefinitions: {
       show: (moduleNames: string[]) => `/api/module_definitions/${moduleNames.join('/')}.json`,

frontend/context/RecentModuleContext.ts

@@ -0,0 +1,12 @@
+import { Module } from '@/models/module'
+import React from 'react'
+
+export type RecentModuleProps = {
+  recentModule: Module | null
+  setRecentModule: React.Dispatch<React.SetStateAction<Module | null>>
+}
+
+export const RecentModuleContext = React.createContext<RecentModuleProps>({
+  recentModule: null,
+  setRecentModule: () => {},
+})

frontend/main.tsx

@@ -22,9 +22,9 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
           <Route path={path.sources.show(':sourceName')} element={<SourceShow />} />
           <Route path={path.sourceAliases.index()} element={<SourceAliasIndex />} />
           <Route path={path.modules.index()} element={<ModuleIndex />} />
-          <Route path={path.modules.show(['*'])} element={<ModuleShow />} />
+          <Route path={path.modules.show('*')} element={<ModuleShow />} />
           <Route path={path.licenses.index()} element={<LicenseIndex />} />
-          <Route path={path.moduleDefinitions.show(['*'])} element={<ModuleDefinitionShow />} />
+          <Route path={path.moduleDefinitions.show('*')} element={<ModuleDefinitionShow />} />
           <Route path="*" element={<NotFound />} />
         </Route>
       </Routes>

frontend/models/combinedDefinition.ts

@@ -15,7 +15,7 @@ export type DotSourceMetadata = {
   type: 'source'
   sourceName: string
   memo: string
-  modules: Module[]
+  module: Module | null
 } & BaseDotMetadata
 
 export type DotDependencyMetadata = {
@@ -32,7 +32,7 @@ export type DotDependencyMetadata = {
 
 export type DotModuleMetadata = {
   type: 'module'
-  modules: Module[]
+  module: Module
 } & BaseDotMetadata
 
 export type DotMetadata = DotSourceMetadata | DotDependencyMetadata | DotModuleMetadata

frontend/models/module.ts

@@ -1,7 +1,7 @@
 export type Module = string
 
 export type SpecificModule = {
-  modules: Module[]
+  module: Module
   sources: Array<{
     sourceName: string
     memo: string