feat: agent management refactor & layout changes (#138)

decentralized-identity · Aug 24, 2023 · c7d0214 · c7d0214
1 parent b695c6f
commit c7d0214
Show file tree

Hide file tree

Showing 16 changed files with 539 additions and 559 deletions.
diff --git a/package.json b/package.json
@@ -118,7 +118,7 @@
   },
   "devDependencies": {
     "@ant-design/icons": "^5.1.4",
-    "@ant-design/pro-components": "^2.5.3",
+    "@ant-design/pro-components": "^2.6.13",
     "@babel/plugin-syntax-import-assertions": "^7.20.0",
     "@babel/preset-react": "^7.22.5",
     "@commitlint/cli": "^17.6.5",
@@ -169,7 +169,7 @@
     "@web3-react/types": "^8.2.0",
     "@web3-react/walletconnect": "^8.2.0",
     "@yudiel/react-qr-scanner": "^1.1.8",
-    "antd": "~5.5.2",
+    "antd": "~5.8.4",
     "assert": "npm:assert-browserify@^2.0.0",
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AgentDropdown.tsx b/src/components/AgentDropdown.tsx
@@ -2,30 +2,22 @@ import { Dropdown } from 'antd'
 import React from 'react'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { useNavigate } from 'react-router-dom'
-import { CheckCircleOutlined } from '@ant-design/icons'
 
 const AgentDropdown: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   const { agents, setActiveAgentId, activeAgentId } = useVeramo()
   const navigate = useNavigate()
-
   return (
     <Dropdown
+
       menu={{
+        selectedKeys: activeAgentId ? [activeAgentId] : [],
         items: [
-          ...agents.map((_agent: any, index: number) => {
+          ...agents.map((_agent: any) => {
             return {
-              key: index,
+              key: _agent.context?.id,
               onClick: () => setActiveAgentId(_agent.context?.id),
-              icon: (
-                <CheckCircleOutlined
-                  style={{
-                    fontSize: '17px',
-                    opacity: _agent.context?.id === activeAgentId ? 1 : 0.1,
-                  }}
-                />
-              ),
               label: _agent.context?.name,
             }
           }),
@@ -34,12 +26,7 @@ const AgentDropdown: React.FC<{ children: React.ReactNode }> = ({
             {
               key: 'manage',
               label: 'Magage',
-              onClick: () => navigate('/agents'),
-            },
-            {
-              key: 'connect',
-              label: 'Connect',
-              onClick: () => navigate('/connect'),
+              onClick: () => navigate('/settings/agents'),
             },
           ],
         ],

diff --git a/src/components/CreateRequest.tsx b/src/components/CreateRequest.tsx
@@ -7,7 +7,7 @@ import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons'
 import { v4 as uuidv4 } from 'uuid'
 import DIDDiscoveryBar from './DIDDiscoveryBar'
 
-interface CreateRequestProps {}
+
 
 interface SDRArgs {
   issuer: string
@@ -24,7 +24,7 @@ interface AddClaimArgs {
   reason?: string
 }
 
-const CreateRequest: React.FC<CreateRequestProps> = () => {
+const CreateRequest: React.FC = () => {
   const { agent } = useVeramo()
   const query = useQueryClient()
   const [subject, setSubject] = useState<string>('')
@@ -208,7 +208,7 @@ const CreateRequest: React.FC<CreateRequestProps> = () => {
                 </Form.Item>
               </Row>
               <Button
-                type="ghost"
+
                 disabled={!requiredIssuer}
                 onClick={() =>
                   addRequiredIssuer(requiredIssuer, requiredIssuerUrl)
@@ -218,7 +218,7 @@ const CreateRequest: React.FC<CreateRequestProps> = () => {
               </Button>
             </Card>
             <Button
-              type="ghost"
+
               disabled={!claimType}
               onClick={() =>
                 addClaim({

diff --git a/src/components/CredentialActionsDropdown.tsx b/src/components/CredentialActionsDropdown.tsx
@@ -1,4 +1,4 @@
-import { Dropdown, notification } from 'antd'
+import { Dropdown, App } from 'antd'
 import React from 'react'
 import { useVeramo } from '@veramo-community/veramo-react'
 import { useNavigate } from 'react-router-dom'
@@ -12,6 +12,7 @@ const CredentialActionsDropdown: React.FC<{
 }> = ({ children, credential }) => {
   const { agents, getAgent } = useVeramo<IDataStore>()
   const navigate = useNavigate()
+  const { notification } = App.useApp()
 
   const agentsToCopyTo = agents.filter((agent) =>
     agent.availableMethods().includes('dataStoreSaveVerifiableCredential'),

diff --git a/src/components/NewChatThreadModal.tsx b/src/components/NewChatThreadModal.tsx
@@ -7,7 +7,7 @@ import {
   Row,
   Button,
   Col,
-  notification,
+  App,
 } from 'antd'
 import { QrcodeOutlined } from '@ant-design/icons'
 import { useVeramo } from '@veramo-community/veramo-react'
@@ -28,6 +28,7 @@ const NewChatThreadModal: React.FC<NewChatThreadModalProps> = ({
   onCreate,
   onCancel,
 }) => {
+  const { notification } = App.useApp()
   const { agent } = useVeramo<IDIDDiscovery>()
   const [options, setOptions] = useState<SelectProps<object>['options']>([])
   const [did, setDid] = useState<string>('')

diff --git a/src/context/ThemeProvider.tsx b/src/context/ThemeProvider.tsx
@@ -1,4 +1,5 @@
-import { ConfigProvider, theme as antdTheme } from 'antd'
+import { ConfigProvider, theme as antdTheme, App } from 'antd'
+import { ProConfigProvider } from '@ant-design/pro-components'
 import React, { createContext, useState, useEffect, useContext } from 'react'
 import en_US from 'antd/es/locale/en_US'
 
@@ -78,18 +79,25 @@ const ThemeProvider = (props: any) => {
     <ThemeContext.Provider
       value={{ theme, switchTheme, isCompact, setIsCompact }}
     >
-      <ConfigProvider
-        locale={en_US}
-        theme={{
-          token: {
-            colorPrimary: '#1DA57A',
-            borderRadius: 3,
-          },
-          algorithm,
-        }}
+      <ProConfigProvider
+        hashed={false}
+
       >
-        {props.children}
-      </ConfigProvider>
+        <ConfigProvider
+          locale={en_US}
+          theme={{
+            token: {
+              colorPrimary: '#1DA57A',
+              borderRadius: 3,
+            },
+            algorithm,
+          }}
+          >
+          <App>
+            {props.children}
+          </App>
+        </ConfigProvider>
+      </ProConfigProvider>
     </ThemeContext.Provider>
   )
 }

diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -11,14 +11,12 @@ import {
   FileProtectOutlined,
 } from '@ant-design/icons'
 import { Routes, Route, useLocation, Link, Navigate } from 'react-router-dom'
-import Connect from '../pages/Connect'
+
 import Identifier from '../pages/Identifier'
 import Credentials from '../pages/Credentials'
 import Credential from '../pages/Credential'
 import Activity from '../pages/Messages'
 import Requests from '../pages/Requests'
-import Agents from '../pages/Agents'
-import Agent from '../pages/Agent'
 import Chats from '../pages/Chats'
 import { useVeramo } from '@veramo-community/veramo-react'
 import CreateResponse from '../components/CreateResponse'
@@ -33,6 +31,7 @@ import { Appearance } from '../pages/settings/Appearance'
 import { Plugins } from '../pages/settings/Plugins'
 import { Web3 } from '../pages/settings/Web3'
 import { Version } from '../pages/settings/Version'
+import { Agents } from '../pages/settings/Agents'
 
 const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'
 
@@ -42,7 +41,7 @@ const Layout = () => {
   const location = useLocation()
 
   const availableMethods = agent?.availableMethods() || []
-  const currentAgentName = agent?.context?.name || 'No Agent Connected'
+
 
   const uri =
     agent?.context?.name &&
@@ -126,6 +125,10 @@ const Layout = () => {
     name: 'Settings',
     icon: <SettingOutlined />,
     routes: [
+      {
+        name: 'Agents',
+        path: '/settings/agents',
+      },
       {
         name: 'Appearance',
         path: '/settings/appearance',
@@ -145,8 +148,6 @@ const Layout = () => {
     ]
   })
 
-
-
   return (
     <div
       style={{
@@ -157,8 +158,7 @@ const Layout = () => {
         locale="en-US"
         contentWidth="Fixed"
         title="Agent explorer"
-        logo={require('../assets/icon.png')}
-
+        logo={false}
         menuItemRender={(menuItemProps, defaultDom) => {
           if (menuItemProps.isUrl || menuItemProps.children) {
             return defaultDom
@@ -169,6 +169,7 @@ const Layout = () => {
               <Link
                 to={menuItemProps.path.replace('/*', '')}
                 target={menuItemProps.target}
+                state={menuItemProps.state}
               >
                 {defaultDom}
               </Link>
@@ -183,22 +184,18 @@ const Layout = () => {
         avatarProps={{
           src: uri,
           size: 'small',
-          title: currentAgentName,
           render: (props, children) => (
             <AgentDropdown>{children}</AgentDropdown>
           ),
         }}
         token={{
           pageContainer: {
-            paddingBlockPageContainerContent: 15,
-            paddingInlinePageContainerContent: 15,
+            paddingBlockPageContainerContent: 20,
+            paddingInlinePageContainerContent: 20,
           },
         }}
       >
         <Routes>
-          <Route path="/connect" element={<Connect />} />
-          <Route path="/agents" element={<Agents />} />
-          <Route path="/agent/:id" element={<Agent />} />
           <Route path="/chats/threads/:threadId" element={<Chats />} />
           <Route path="/chats/threads" element={<Chats />} />
           <Route path="/statistics" element={<Statistics />} />
@@ -212,12 +209,13 @@ const Layout = () => {
           <Route path="/requests" element={<Requests />} />
           <Route path="/requests/sdr/:messageId" element={<CreateResponse />} />
 
+          <Route path="/settings/agents" element={<Agents />} />
           <Route path="/settings/appearance" element={<Appearance />} />
           <Route path="/settings/plugins" element={<Plugins />} />
           <Route path="/settings/web3" element={<Web3 />} />
           <Route path="/settings/version" element={<Version />} />
           {!agent && (
-            <Route path="/" element={<Navigate replace to="/connect" />} />
+            <Route path="/" element={<Navigate replace to="/statistics" />} />
           )}
           {plugins.map((plugin) => {
             if (plugin.config.enabled && plugin.routes) {

diff --git a/src/pages/Agent.tsx b/src/pages/Agent.tsx