feat: Plugin Information & InstallModal components

src/components/organisms/PluginManagerPane/PluginInformation.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import {MonoklePlugin} from '@models/plugin';
+
+function PluginInformation(props: {plugin: MonoklePlugin}) {
+  const {plugin} = props;
+  return (
+    <div>
+      <p>{plugin.name}</p>
+    </div>
+  );
+}
+
+export default PluginInformation;

src/components/organisms/PluginManagerPane/PluginInstallModal.tsx

@@ -0,0 +1,16 @@
+import React, {useState} from 'react';
+import {Input, Modal} from 'antd';
+
+function PluginInstallModal(props: {isVisible: boolean; onClose: () => void}) {
+  const {isVisible, onClose} = props;
+  const [pluginUrl, setPluginUrl] = useState<string>();
+
+  return (
+    <Modal visible={isVisible} onCancel={onClose}>
+      <p>Plugin URL:</p>
+      <Input value={pluginUrl} onChange={e => setPluginUrl(e.target.value)} />
+    </Modal>
+  );
+}
+
+export default PluginInstallModal;

src/components/organisms/PluginManagerPane/PluginManagerPane.tsx

@@ -1,19 +1,55 @@
-import React, {useState} from 'react';
-import {Input} from 'antd';
+import React, {useMemo, useState} from 'react';
 import {TitleBar} from '@components/molecules';
+import {useAppSelector} from '@redux/hooks';
+import {PlusOutlined} from '@ant-design/icons';
+import {Button} from 'antd';
+import PluginInformation from './PluginInformation';
+import PluginInstallModal from './PluginInstallModal';
 import * as S from './styled';
 
 function PluginManagerPane() {
-  const [pluginUrl, setPluginUrl] = useState<string>();
+  const plugins = useAppSelector(state => state.main.plugins);
+
+  const activePlugins = useMemo(() => plugins.filter(p => p.isActive), [plugins]);
+  const inactivePlugins = useMemo(() => plugins.filter(p => !p.isActive), [plugins]);
+
+  const [isInstallModalVisible, setInstallModalVisible] = useState<boolean>(false);
+  const onClickInstallPlugin = () => {
+    setInstallModalVisible(true);
+  };
+  const onCloseInstallPlugin = () => {
+    setInstallModalVisible(false);
+  };
 
   return (
     <div>
-      <TitleBar title="Plugin Manager" />
+      <PluginInstallModal isVisible={isInstallModalVisible} onClose={onCloseInstallPlugin} />
+      <TitleBar title="Plugin Manager">
+        <Button onClick={onClickInstallPlugin} type="link" size="small" icon={<PlusOutlined />} />
+      </TitleBar>
       <S.Container>
-        <p>Enter plugin URL:</p>
-        <Input onChange={e => setPluginUrl(e.target.value)} />
-        <h2>Active plugins</h2>
-        <h2>Inactive plugins</h2>
+        {plugins.length === 0 ? (
+          <p>No plugins installed yet.</p>
+        ) : (
+          <>
+            {activePlugins.length > 0 && (
+              <>
+                <h2>Active plugins</h2>
+                {activePlugins.map(activePlugin => (
+                  <PluginInformation plugin={activePlugin} />
+                ))}
+              </>
+            )}
+            {inactivePlugins.length > 0 && (
+              <>
+                <h2>Inactive plugins</h2>
+                {inactivePlugins.map(inactivePlugin => (
+                  <PluginInformation plugin={inactivePlugin} />
+                ))}
+              </>
+            )}
+          </>
+        )}
       </S.Container>
     </div>
   );