Added description panel

caprover · Sep 29, 2024 · c7f277b · c7f277b
1 parent 1ba3379
commit c7f277b
Showing 1 changed file with 52 additions and 1 deletion.
diff --git a/src/containers/apps/AppsTable.tsx b/src/containers/apps/AppsTable.tsx
@@ -10,7 +10,18 @@ import {
 } from '@ant-design/icons'
 
 import type { TreeDataNode, TreeProps } from 'antd'
-import { Button, Card, Col, Input, Row, Table, Tag, Tooltip, Tree } from 'antd'
+import {
+    Button,
+    Card,
+    Col,
+    ConfigProvider,
+    Input,
+    Row,
+    Table,
+    Tag,
+    Tooltip,
+    Tree,
+} from 'antd'
 import { ColumnProps } from 'antd/lib/table'
 import { History } from 'history'
 import React, { Component, Fragment } from 'react'
@@ -496,6 +507,8 @@ class AppsTable extends Component<
                                         }}
                                     />
 
+                                    {self.createDescriptionPanel()}
+
                                     {self.createProjectTiles()}
                                 </Col>
                             </Row>
@@ -506,6 +519,44 @@ class AppsTable extends Component<
         )
     }
 
+    private createDescriptionPanel() {
+        const self = this
+        const selectedProject = self.props.projects.find(
+            (it) => it.id === self.state.selectedProjectId
+        )
+
+        if (!selectedProject || !selectedProject.description) return <div />
+
+        const description = selectedProject.description
+        return (
+            <ConfigProvider.ConfigContext.Consumer>
+                {({ theme }) => (
+                    <Card style={{ marginTop: 24 }}>
+                        <span
+                            style={{
+                                position: 'absolute',
+                                paddingRight: 8,
+                                paddingLeft: 8,
+                                paddingBottom: 0,
+                                marginTop: -36,
+                                marginLeft: -15,
+                            }}
+                        >
+                            <h4 style={{ margin: 0 }}>Notes</h4>
+                        </span>
+                        <div
+                            style={{
+                                whiteSpace: 'pre-wrap',
+                            }}
+                        >
+                            {description}
+                        </div>
+                    </Card>
+                )}
+            </ConfigProvider.ConfigContext.Consumer>
+        )
+    }
+
     createProjectTiles(): React.ReactNode {
         const self = this
         const selectedProjectId =