feat(kgm): kgm v5 (aka. kgg) support

src/components/AddKey.tsx

@@ -0,0 +1,47 @@
+import {
+  Button,
+  ButtonGroup,
+  HStack,
+  Icon,
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuDivider,
+  MenuItem,
+  MenuList,
+} from '@chakra-ui/react';
+import { MdAdd, MdDeleteForever, MdExpandMore, MdFileUpload } from 'react-icons/md';
+
+export interface AddKeyProps {
+  addKey: () => void;
+  importKeyFromFile?: () => void;
+  clearKeys?: () => void;
+}
+
+export function AddKey({ addKey, importKeyFromFile, clearKeys }: AddKeyProps) {
+  return (
+    <HStack pb={2} pt={2}>
+      <ButtonGroup isAttached colorScheme="purple" variant="outline">
+        <Button onClick={addKey} leftIcon={<Icon as={MdAdd} />}>
+          添加一条密钥
+        </Button>
+        <Menu>
+          <MenuButton as={IconButton} icon={<MdExpandMore />}></MenuButton>
+          <MenuList>
+            {importKeyFromFile && (
+              <MenuItem onClick={importKeyFromFile} icon={<Icon as={MdFileUpload} boxSize={5} />}>
+                从文件导入密钥…
+              </MenuItem>
+            )}
+            {importKeyFromFile && clearKeys && <MenuDivider />}
+            {clearKeys && (
+              <MenuItem color="red" onClick={clearKeys} icon={<Icon as={MdDeleteForever} boxSize={5} />}>
+                清空密钥
+              </MenuItem>
+            )}
+          </MenuList>
+        </Menu>
+      </ButtonGroup>
+    </HStack>
+  );
+}

src/components/ImportSecretModal.tsx

@@ -18,11 +18,19 @@ export interface ImportSecretModalProps {
   children: React.ReactNode;
   show: boolean;
   onClose: () => void;
-  onImport: (file: File) => void;
+  onImport: (file: File) => void|Promise<void>;
 }
 
 export function ImportSecretModal({ clientName, children, show, onClose, onImport }: ImportSecretModalProps) {
-  const handleFileReceived = (files: File[]) => onImport(files[0]);
+  const handleFileReceived = (files: File[]) => {
+    const promise = onImport(files[0]);
+    if (promise instanceof Promise) {
+      promise.catch(err => {
+        console.error('could not import: ', err);
+      });
+    }
+    return promise;
+  };
 
   return (
     <Modal isOpen={show} onClose={onClose} closeOnOverlayClick={false} scrollBehavior="inside" size="xl">