#1275 Editing properties

nemerosa · Jun 2, 2024 · b89429b · b89429b
1 parent e551887
commit b89429b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 6 deletions.
diff --git a/ontrack-web-core/components/core/model/properties/PropertyAddButton.js b/ontrack-web-core/components/core/model/properties/PropertyAddButton.js
@@ -1,6 +1,6 @@
-import {Button} from "antd";
 import {FaPlus} from "react-icons/fa";
 import PropertyDialog, {usePropertyDialog} from "@components/core/model/properties/PropertyDialog";
+import InlineCommand from "@components/common/InlineCommand";
 
 export default function PropertyAddButton({entityType, entityId, propertyList}) {
 
@@ -12,7 +12,11 @@ export default function PropertyAddButton({entityType, entityId, propertyList})
 
     return (
         <>
-            <Button size="small" icon={<FaPlus/>} title="Add a property" onClick={startDialog}/>
+            <InlineCommand
+                icon={<FaPlus/>}
+                title="Add a property"
+                onClick={startDialog}
+            />
             <PropertyDialog dialog={dialog}/>
         </>
     )

diff --git a/ontrack-web-core/components/core/model/properties/PropertyDialog.js b/ontrack-web-core/components/core/model/properties/PropertyDialog.js
@@ -18,10 +18,11 @@ export const usePropertyDialog = () => {
     const [entity, setEntity] = useState({})
 
     return useFormDialog({
-        init: (form, {entityType, entityId, propertyList}) => {
-            // TODO form.setFieldValue("propertyType", null)
+        init: (form, {entityType, entityId, propertyList, initialProperty}) => {
+            form.setFieldValue("propertyType", initialProperty?.type?.typeName)
+            form.setFieldValue("value", initialProperty?.value)
             setEntity({entityType, entityId})
-            setSelectedProperty(null)
+            setSelectedProperty(initialProperty)
             setOptions(
                 propertyList.map(property => (
                     {
@@ -109,6 +110,9 @@ export default function PropertyDialog({dialog}) {
                         <Form.Item>
                             <Typography.Text code>{dialog.selectedProperty.type.typeName}</Typography.Text>
                         </Form.Item>
+                        <Form.Item>
+                            <Typography.Text type="secondary">{dialog.selectedProperty.type.description}</Typography.Text>
+                        </Form.Item>
                         {
                             !dialog.selectedProperty.editable && <>
                                 <Space direction="vertical" className="ot-line">

diff --git a/ontrack-web-core/components/core/model/properties/PropertyEditButton.js b/ontrack-web-core/components/core/model/properties/PropertyEditButton.js
@@ -0,0 +1,24 @@
+import InlineCommand from "@components/common/InlineCommand";
+import {FaPencilAlt} from "react-icons/fa";
+import PropertyDialog, {usePropertyDialog} from "@components/core/model/properties/PropertyDialog";
+
+export default function PropertyEditButton({entityType, entityId, property}) {
+
+    const dialog = usePropertyDialog({})
+
+    const startDialog = () => {
+        const propertyList = [property]
+        dialog.start({entityType, entityId, propertyList, initialProperty: property})
+    }
+
+    return (
+        <>
+            <InlineCommand
+                icon={<FaPencilAlt/>}
+                title="Edit this property"
+                onClick={startDialog}
+            />
+            <PropertyDialog dialog={dialog}/>
+        </>
+    )
+}
diff --git a/ontrack-web-core/components/framework/properties/PropertiesSection.js b/ontrack-web-core/components/framework/properties/PropertiesSection.js
@@ -7,6 +7,7 @@ import {useEffect, useState} from "react";
 import {useGraphQLClient} from "@components/providers/ConnectionContextProvider";
 import {gql} from "graphql-request";
 import {useEventForRefresh} from "@components/common/EventsContext";
+import PropertyTitle from "@components/framework/properties/PropertyTitle";
 
 export default function PropertiesSection({entityType, entityId}) {
 
@@ -60,7 +61,7 @@ export default function PropertiesSection({entityType, entityId}) {
                     .filter(it => it.value)
                     .map(property => {
                         return {
-                            title: property.type.name,
+                            title: <PropertyTitle entityType={entityType} entityId={entityId} property={property}/>,
                             icon: <PropertyIcon property={property}/>,
                             content: <PropertyComponent property={property}/>,
                         }

diff --git a/ontrack-web-core/components/framework/properties/PropertyTitle.js b/ontrack-web-core/components/framework/properties/PropertyTitle.js
@@ -0,0 +1,19 @@
+import {Space, Typography} from "antd";
+import PropertyEditButton from "@components/core/model/properties/PropertyEditButton";
+
+export default function PropertyTitle({entityType, entityId, property}) {
+    return (
+        <>
+            <Space>
+                <Typography.Text>{property.type.name}</Typography.Text>
+                {
+                    property.editable && <PropertyEditButton
+                        entityType={entityType}
+                        entityId={entityId}
+                        property={property}
+                    />
+                }
+            </Space>
+        </>
+    )
+}