Merge pull request #72 from alpaca-tc/add-memo-to-module-list

Add memo to module list
alpaca-tc · Jul 25, 2024 · d13d198 · d13d198
2 parents f48de5e + 96f1f77
commit d13d198
Show file tree

Hide file tree

Showing 4 changed files with 141 additions and 16 deletions.
diff --git a/frontend/pages/Modules/Show.tsx b/frontend/pages/Modules/Show.tsx
@@ -15,9 +15,8 @@ import { stringify } from '@/utils/queryString'
 import { Params, useModuleParams } from './hooks/useModuleParams'
 
 export const Show: React.FC = () => {
-  const navigate = useNavigate()
   const pathModule = useParams()['*'] ?? ''
-  const { data, isLoading } = useModule(pathModule)
+  const { data, isLoading, mutate } = useModule(pathModule)
   const [params, setParams] = useModuleParams()
 
   const content = useMemo(() => {
@@ -27,7 +26,7 @@ export const Show: React.FC = () => {
 
     switch (params.tab) {
       case 'sources': {
-        return <SourcesContent sources={data.sources} filteredModule={params.filteredModule} />
+        return <SourcesContent mutate={mutate} sources={data.sources} filteredModule={params.filteredModule} />
       }
       case 'moduleDependencies': {
         return (
@@ -51,7 +50,11 @@ export const Show: React.FC = () => {
       }
       case 'sourceReverseDependencies': {
         return (
-          <SourceReverseDependenciesContent filteredModule={params.filteredModule} sources={data.sourceReverseDependencies} />
+          <SourceReverseDependenciesContent
+            mutate={mutate}
+            filteredModule={params.filteredModule}
+            sources={data.sourceReverseDependencies}
+          />
         )
       }
       default: {

diff --git a/.../Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx b/.../Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx
@@ -1,13 +1,32 @@
 import { Link } from '@/components/Link'
-import { EmptyTableBody, Table, Th, Text, Td, Button, Cluster, Chip } from '@/components/ui'
+import {
+  EmptyTableBody,
+  Table,
+  Th,
+  Text,
+  Td,
+  Button,
+  Cluster,
+  Chip,
+  Tooltip,
+  FaCircleInfoIcon,
+  FaPencilIcon,
+} from '@/components/ui'
 import { path } from '@/constants/path'
 import { Module, SpecificModule, SpecificModuleSource } from '@/models/module'
 import { FC, useCallback, useMemo, useState } from 'react'
 import { StickyThead } from '../StickyThead'
 import { SortTypes, ascNumber, ascString, sortTypes } from '@/utils/sort'
-
-const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null }> = ({ filteredModule, source }) => {
+import styled from 'styled-components'
+import { SourceMemoInput } from '@/components/SourceMemoInput'
+
+const SourceTr: FC<{ mutate: () => void; source: SpecificModuleSource; filteredModule: Module | null }> = ({
+  mutate,
+  filteredModule,
+  source,
+}) => {
   const [expanded, setExpanded] = useState<boolean>(false)
+  const [editingMemo, setEditingMemo] = useState<boolean>(false)
 
   const modules = useMemo(() => {
     const modules = new Set<Module>()
@@ -42,6 +61,38 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null
             <Link to={path.sources.show(source.sourceName)}>{source.sourceName}</Link>
           </Text>
         </Td>
+        <Td>
+          {editingMemo ? (
+            <SourceMemoInput
+              sourceName={source.sourceName}
+              initialMemo={source.memo}
+              onUpdate={() => {
+                setEditingMemo(false)
+                mutate()
+              }}
+              onClose={() => {
+                setEditingMemo(false)
+              }}
+            />
+          ) : (
+            <FixedWidthMemo align="center">
+              {source.memo !== '' ? (
+                <Tooltip message={source.memo} horizontal="center" vertical="bottom">
+                  <FaCircleInfoIcon />
+                </Tooltip>
+              ) : (
+                <Transparent>
+                  <FaCircleInfoIcon />
+                </Transparent>
+              )}
+              <div>
+                <Button square={true} onClick={() => setEditingMemo(true)} size="s">
+                  <FaPencilIcon alt="Edit" />
+                </Button>
+              </div>
+            </FixedWidthMemo>
+          )}
+        </Td>
         <Td>
           {modules.map((module) => (
             <Text key={module} as="div" whiteSpace="nowrap">
@@ -123,11 +174,12 @@ type SortType = {
 }
 
 type Props = {
+  mutate: () => void
   sources: SpecificModule['sourceReverseDependencies']
   filteredModule: Module | null
 }
 
-export const SourceReverseDependenciesContent: FC<Props> = ({ filteredModule, sources }) => {
+export const SourceReverseDependenciesContent: FC<Props> = ({ mutate, filteredModule, sources }) => {
   const [sort, setSort] = useState<SortType>({ key: 'sourceName', sort: 'none' })
 
   const sortedSources = useMemo(() => {
@@ -179,10 +231,18 @@ export const SourceReverseDependenciesContent: FC<Props> = ({ filteredModule, so
       ) : (
         <tbody>
           {sortedSources.map((source) => (
-            <SourceTr filteredModule={filteredModule} key={source.sourceName} source={source} />
+            <SourceTr mutate={mutate} filteredModule={filteredModule} key={source.sourceName} source={source} />
           ))}
         </tbody>
       )}
     </Table>
   )
 }
+
+const Transparent = styled.span`
+  opacity: 0;
+`
+
+const FixedWidthMemo = styled(Cluster)`
+  width: 4em;
+`
diff --git a/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx b/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx
@@ -1,13 +1,32 @@
 import { Link } from '@/components/Link'
-import { EmptyTableBody, Table, Th, Text, Td, Button, Chip, Cluster } from '@/components/ui'
+import {
+  EmptyTableBody,
+  Table,
+  Th,
+  Text,
+  Td,
+  Button,
+  Chip,
+  Cluster,
+  FaPencilIcon,
+  FaCircleInfoIcon,
+  Tooltip,
+} from '@/components/ui'
 import { path } from '@/constants/path'
 import { Module, SpecificModule, SpecificModuleSource } from '@/models/module'
 import { FC, useCallback, useMemo, useState } from 'react'
 import { StickyThead } from '../StickyThead'
 import { SortTypes, ascNumber, ascString, sortTypes } from '@/utils/sort'
-
-const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null }> = ({ source, filteredModule }) => {
+import styled from 'styled-components'
+import { SourceMemoInput } from '@/components/SourceMemoInput'
+
+const SourceTr: FC<{ mutate: () => void; source: SpecificModuleSource; filteredModule: Module | null }> = ({
+  mutate,
+  source,
+  filteredModule,
+}) => {
   const [expanded, setExpanded] = useState<boolean>(false)
+  const [editingMemo, setEditingMemo] = useState<boolean>(false)
 
   const modules = useMemo(() => {
     const modules = new Set<Module>()
@@ -42,6 +61,38 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null
             <Link to={path.sources.show(source.sourceName)}>{source.sourceName}</Link>
           </Text>
         </Td>
+        <Td>
+          {editingMemo ? (
+            <SourceMemoInput
+              sourceName={source.sourceName}
+              initialMemo={source.memo}
+              onUpdate={() => {
+                setEditingMemo(false)
+                mutate()
+              }}
+              onClose={() => {
+                setEditingMemo(false)
+              }}
+            />
+          ) : (
+            <FixedWidthMemo align="center">
+              {source.memo !== '' ? (
+                <Tooltip message={source.memo} horizontal="center" vertical="bottom">
+                  <FaCircleInfoIcon />
+                </Tooltip>
+              ) : (
+                <Transparent>
+                  <FaCircleInfoIcon />
+                </Transparent>
+              )}
+              <div>
+                <Button square={true} onClick={() => setEditingMemo(true)} size="s">
+                  <FaPencilIcon alt="Edit" />
+                </Button>
+              </div>
+            </FixedWidthMemo>
+          )}
+        </Td>
         <Td>
           {modules.map((module) => (
             <Text key={module} as="div" whiteSpace="nowrap">
@@ -58,6 +109,7 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null
         dependencies.map((dependency) =>
           dependency.methodIds.map((methodId, index) => (
             <tr key={`${dependency.sourceName}-${methodId.context}-${methodId.name}`}>
+              <Td></Td>
               <Td></Td>
               <Td></Td>
               <Td>
@@ -123,11 +175,12 @@ type SortType = {
 }
 
 type Props = {
+  mutate: () => void
   sources: SpecificModule['sources']
   filteredModule: Module | null
 }
 
-export const SourcesContent: FC<Props> = ({ filteredModule, sources }) => {
+export const SourcesContent: FC<Props> = ({ mutate, filteredModule, sources }) => {
   const [sort, setSort] = useState<SortType>({ key: 'sourceName', sort: 'none' })
 
   const sortedSources = useMemo(() => {
@@ -164,6 +217,7 @@ export const SourcesContent: FC<Props> = ({ filteredModule, sources }) => {
           <Th sort={sort.key === 'sourceName' ? sort.sort : 'none'} onSort={() => setNextSort('sourceName')}>
             Source
           </Th>
+          <Th>Memo</Th>
           <Th>Dependency Module</Th>
           <Th sort={sort.key === 'dependency' ? sort.sort : 'none'} onSort={() => setNextSort('dependency')}>
             Dependency
@@ -179,10 +233,18 @@ export const SourcesContent: FC<Props> = ({ filteredModule, sources }) => {
       ) : (
         <tbody>
           {sortedSources.map((source) => (
-            <SourceTr key={source.sourceName} filteredModule={filteredModule} source={source} />
+            <SourceTr key={source.sourceName} mutate={mutate} filteredModule={filteredModule} source={source} />
           ))}
         </tbody>
       )}
     </Table>
   )
 }
+
+const Transparent = styled.span`
+  opacity: 0;
+`
+
+const FixedWidthMemo = styled(Cluster)`
+  width: 4em;
+`
diff --git a/frontend/repositories/moduleRepository.ts b/frontend/repositories/moduleRepository.ts
@@ -53,7 +53,7 @@ type SpecificModuleResponse = {
 }
 
 export const useModule = (module: string) => {
-  const { data, isLoading } = useSWR<SpecificModule>(path.api.modules.show(module), async (): Promise<SpecificModule> => {
+  const { data, isLoading, mutate } = useSWR<SpecificModule>(path.api.modules.show(module), async (): Promise<SpecificModule> => {
     const response = await get<SpecificModuleResponse>(path.api.modules.show(module))
 
     return {
@@ -91,5 +91,5 @@ export const useModule = (module: string) => {
     }
   })
 
-  return { data, isLoading }
+  return { data, isLoading, mutate }
 }