[UI] Add comment management to the Version Details page (#4944)

* Auto format mappedqueryimpl

* Fix kafkasql stapshotting

* Code formatting

* Added Comment management on the Version Details page (UI)

Author: EricWittmann

ui/ui-app/src/app/components/modals/CreateCommentModal.tsx

@@ -0,0 +1,56 @@
+import { FunctionComponent, useEffect, useState } from "react";
+import { Button, Form, FormGroup, Modal, TextArea } from "@patternfly/react-core";
+import { NewComment } from "@sdk/lib/generated-client/models";
+
+
+/**
+ * Properties
+ */
+export type CreateCommentModalProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    onCreateComment: (value: NewComment) => void;
+};
+
+export const CreateCommentModal: FunctionComponent<CreateCommentModalProps> = (props: CreateCommentModalProps) => {
+    const [value, setValue] = useState<string>("");
+
+    const isValid: boolean = value !== undefined && value.trim().length > 0;
+
+    useEffect(() => {
+        if (props.isOpen) {
+            setValue("");
+        }
+    }, [props.isOpen]);
+
+    return (
+        <Modal
+            title="Add comment"
+            variant="medium"
+            isOpen={props.isOpen}
+            onClose={props.onClose}
+            className="add-comment pf-m-redhat-font"
+            actions={[
+                <Button key="add" variant="primary" data-testid="modal-btn-add" onClick={() => { props.onCreateComment({ value }); }} isDisabled={!isValid}>Add</Button>,
+                <Button key="cancel" variant="link" data-testid="modal-btn-cancel" onClick={props.onClose}>Cancel</Button>
+            ]}
+        >
+            <Form>
+                <FormGroup label="Comment" fieldId="form-comment" isRequired={true}>
+                    <TextArea
+                        style={{ height: "100px" }}
+                        isRequired={false}
+                        id="form-comment"
+                        data-testid="edit-metadata-modal-comment"
+                        name="form-comment"
+                        aria-describedby="form-comment-helper"
+                        value={value}
+                        placeholder="Enter a new comment"
+                        onChange={(evt, newValue) => setValue(newValue)}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    );
+
+};

ui/ui-app/src/app/components/modals/EditCommentModal.tsx

@@ -0,0 +1,58 @@
+import { FunctionComponent, useEffect, useState } from "react";
+import { Button, Form, FormGroup, Modal, TextArea } from "@patternfly/react-core";
+import { Comment, NewComment } from "@sdk/lib/generated-client/models";
+
+
+/**
+ * Properties
+ */
+export type EditCommentModalProps = {
+    comment: Comment;
+    isOpen: boolean;
+    onClose: () => void;
+    onEditComment: (commentId: string, value: NewComment) => void;
+};
+
+export const EditCommentModal: FunctionComponent<EditCommentModalProps> = (props: EditCommentModalProps) => {
+    const [value, setValue] = useState<string>("");
+
+    const isValid: boolean = value !== undefined && value.trim().length > 0;
+
+    useEffect(() => {
+        if (props.isOpen) {
+            setValue(props.comment.value!);
+        }
+    }, [props.isOpen]);
+
+    return (
+        <Modal
+            title="Edit comment"
+            variant="medium"
+            isOpen={props.isOpen}
+            onClose={props.onClose}
+            className="edit-comment pf-m-redhat-font"
+            actions={[
+                <Button key="edit" variant="primary" data-testid="modal-btn-edit" onClick={() => {
+                    props.onEditComment(props.comment.commentId!, { value }); }} isDisabled={!isValid}>Edit</Button>,
+                <Button key="cancel" variant="link" data-testid="modal-btn-cancel" onClick={props.onClose}>Cancel</Button>
+            ]}
+        >
+            <Form>
+                <FormGroup label="Comment" fieldId="form-comment" isRequired={true}>
+                    <TextArea
+                        style={{ height: "100px" }}
+                        isRequired={false}
+                        id="form-comment"
+                        data-testid="edit-metadata-modal-comment"
+                        name="form-comment"
+                        aria-describedby="form-comment-helper"
+                        value={value}
+                        placeholder="Edit the comment"
+                        onChange={(evt, newValue) => setValue(newValue)}
+                    />
+                </FormGroup>
+            </Form>
+        </Modal>
+    );
+
+};

ui/ui-app/src/app/components/modals/index.ts

@@ -2,8 +2,10 @@ export * from "./ChangeOwnerModal";
 export * from "./ConfirmDeleteModal";
 export * from "./CreateArtifactModal";
 export * from "./CreateBranchModal";
+export * from "./CreateCommentModal";
 export * from "./CreateGroupModal";
 export * from "./CreateVersionModal";
+export * from "./EditCommentModal";
 export * from "./EditMetaDataModal";
 export * from "./InvalidContentModal";
 export * from "./LabelsFormGroup";