Separate the state from the repoLock view

ui/.eslintrc.js

@@ -10,6 +10,7 @@ module.exports = {
     ],
     rules: {
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-empty-interface": "off"
     },
   };
 

ui/src/views/Repo.tsx

@@ -10,7 +10,7 @@ import { init, activate, repoSlice as slice } from '../redux/repo'
 import ActivateButton from "../components/ActivateButton"
 import Main from './main'
 import RepoHome from './repoHome'
-import RepoLock from "./RepoLock";
+import RepoLock from "./repoLock"
 import RepoDeploy from './RepoDeploy'
 import RepoRollabck from './RepoRollback'
 import RepoSettings from "./repoSettings"

ui/src/components/LockList.tsx → ui/src/views/repoLock/LockList.tsx

@@ -6,10 +6,10 @@ import {
 import { LockOutlined, UnlockOutlined } from "@ant-design/icons"
 import moment from 'moment'
 
-import { Env, Lock } from "../models"
-import UserAvatar from './UserAvatar'
+import { Env, Lock } from "../../models"
+import UserAvatar from '../../components/UserAvatar'
 
-interface LockListProps {
+export interface LockListProps {
     envs: Env[]
     locks: Lock[]
     onClickLock(env: string): void

ui/src/views/RepoLock.tsx → ui/src/views/repoLock/index.tsx

@@ -4,18 +4,18 @@ import { useParams } from "react-router-dom";
 import { PageHeader, Button } from 'antd'
 import { Result } from "antd"
 
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { fetchConfig, listLocks, lock, unlock, repoLockSlice as slice, setAutoUnlock} from "../redux/repoLock"
-import LockList from '../components/LockList'
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { fetchConfig, listLocks, lock, unlock, repoLockSlice as slice, setAutoUnlock} from "../../redux/repoLock"
+import LockList, { LockListProps } from "./LockList"
 
-interface Params {
-    namespace: string
-    name: string
-}
+export default (): JSX.Element => {
+    const { namespace, name } = useParams<{
+        namespace: string
+        name: string
+    }>()
 
-export default function RepoLock(): JSX.Element {
-    const { namespace, name } = useParams<Params>()
     const { display, config, locks } = useAppSelector(state => state.repoLock, shallowEqual)
+
     const dispatch = useAppDispatch()
 
     useEffect(() => {
@@ -29,6 +29,18 @@ export default function RepoLock(): JSX.Element {
         // eslint-disable-next-line 
     }, [dispatch])
 
+    const onClickLock = (env: string) => {
+        dispatch(lock(env))
+    }
+
+    const onClickUnlock = (env: string) => {
+        dispatch(unlock(env))
+    }
+
+    const onChangeExpiredAt = (env: string, expiredAt: Date) => {
+        dispatch(setAutoUnlock({env, expiredAt}))
+    }
+
     if (!display) {
         return <></>
     } 
@@ -50,25 +62,34 @@ export default function RepoLock(): JSX.Element {
         )
     }
 
-    const onClickLock = (env: string) => {
-        dispatch(lock(env))
-    }
+    return (
+        <RepoLock 
+            envs={(config)? config.envs : []}
+            locks={locks}
+            onClickLock={onClickLock}
+            onClickUnlock={onClickUnlock}
+            onChangeExpiredAt={onChangeExpiredAt}
+        />
+    )
+}
 
-    const onClickUnlock = (env: string) => {
-        dispatch(unlock(env))
-    }
+interface RepoLockProps extends LockListProps {}
 
-    const onChangeExpiredAt = (env: string, expiredAt: Date) => {
-        dispatch(setAutoUnlock({env, expiredAt}))
-    }
+function RepoLock({
+    envs,
+    locks,
+    onChangeExpiredAt,
+    onClickLock,
+    onClickUnlock
+}: RepoLockProps): JSX.Element {
 
     return <div>
         <div>
             <PageHeader title="Lock" subTitle="Lock the environment."/>
         </div>
         <div style={{padding: "16px 24px"}}>
             <LockList
-                envs={(config)? config.envs:[]}
+                envs={envs}
                 locks={locks}
                 onClickLock={onClickLock}
                 onClickUnlock={onClickUnlock}

ui/src/views/repoSettings/index.tsx

@@ -50,7 +50,6 @@ export default (): JSX.Element => {
     )
 }
 
-// eslint-disable-next-line
 interface RepoSettingsProps extends SettingFormProps {}
 
 function RepoSettings({