From ce9f35acb574bd45dc90599bf511cbb1714a3c76 Mon Sep 17 00:00:00 2001
From: David Radley <dgradley@gmail.com>
Date: Wed, 19 Jan 2022 15:33:58 +0000
Subject: [PATCH] git325 fix quick terms

Signed-off-by: David Radley <dgradley@gmail.com>
---
 cra-client/src/app.scss                       |  30 ++++
 .../components/GlossaryQuickTerms.js          | 138 +++++++++++++-----
 .../components/authoringforms/NodeInput.js    |  81 ++++++++--
 .../components/properties/NodeTypes.js        |   8 +
 .../properties/RelationshipTypes.js           |   1 +
 .../components/update/UpdateNode.js           |  57 ++++----
 6 files changed, 240 insertions(+), 75 deletions(-)

diff --git a/cra-client/src/app.scss b/cra-client/src/app.scss
index 11baa9f4..e745b114 100644
--- a/cra-client/src/app.scss
+++ b/cra-client/src/app.scss
@@ -78,3 +78,33 @@ body {
 .time-picker__width {
   width: 18rem;
 }
+
+// body {
+//   font-size: 14px;
+//   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+//     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+// }
+
+.auto-grow-input {
+}
+
+.auto-grow-input:focus-within {
+  outline: -webkit-focus-ring-color auto 1px;
+}
+
+textarea {
+  outline: 0;
+  width: auto;
+  min-width: 1em;
+  // font-size: 14px;
+  // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+  //   Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  padding: 0;
+  margin: 0;
+  resize: none;
+  background: none;
+  appearance: none;
+  border: none;
+}
+
+
diff --git a/cra-client/src/components/GlossaryAuthor/components/GlossaryQuickTerms.js b/cra-client/src/components/GlossaryAuthor/components/GlossaryQuickTerms.js
index de6db14a..e8f471e3 100644
--- a/cra-client/src/components/GlossaryAuthor/components/GlossaryQuickTerms.js
+++ b/cra-client/src/components/GlossaryAuthor/components/GlossaryQuickTerms.js
@@ -6,14 +6,32 @@ import { IdentificationContext } from "../../../contexts/IdentificationContext";
 import getPathTypesAndGuids from "./properties/PathAnalyser";
 import Add32 from "../../../images/carbon/Egeria_add_32";
 import getNodeType from "./properties/NodeTypes.js";
-import { Button, Form, FormGroup, TextInput, Loading } from "carbon-components-react";
+import {
+  Button,
+  Form,
+  FormGroup,
+  TextInput,
+  TextArea,
+  Loading,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableHeader,
+  TableBody,
+} from "carbon-components-react";
 
 import { issueRestCreate } from "../../common/RestCaller";
 import { useHistory, withRouter } from "react-router-dom";
 
 function GlossaryQuickTerms(props) {
   const identificationContext = useContext(IdentificationContext);
-  const glossaryNodeType = getNodeType(identificationContext.getRestURL("glossary-author"), "glossary");
+  const glossaryNodeType = getNodeType(
+    identificationContext.getRestURL("glossary-author"),
+    "glossary"
+  );
   const [terms, setTerms] = useState([]);
   const [termsWithStatus, setTermsWithStatus] = useState([]);
   const [errorMsg, setErrorMsg] = useState();
@@ -30,6 +48,21 @@ function GlossaryQuickTerms(props) {
   });
 
 
+  const headerData = [
+    {
+      text: "Term Name ",
+      key: "name",
+    },
+    {
+      text: "Term Description",
+      key: "description",
+    },
+    {
+      text: "Status",
+      key: "status",
+    },
+  ];
+
   function getUrl() {
     return glossaryNodeType.url + "/" + glossaryGuid + "/terms";
   }
@@ -74,6 +107,7 @@ function GlossaryQuickTerms(props) {
       } else {
         workingTermWithStatus.status = "Error";
       }
+      workingTermWithStatus.id=i;
       workingTermsWithStatus[i] = workingTermWithStatus;
     }
     setTermsWithStatus(workingTermsWithStatus);
@@ -113,7 +147,12 @@ function GlossaryQuickTerms(props) {
           Back
         </button>
       </div>
-      {restCallInProgress && <Loading description="Waiting for network call to the server to complete" withOverlay={true} />}
+      {restCallInProgress && (
+        <Loading
+          description="Waiting for network call to the server to complete"
+          withOverlay={true}
+        />
+      )}
       {!restCallInProgress && termsWithStatus.length === 0 && (
         <div>
           <div className="row-container">
@@ -136,7 +175,7 @@ function GlossaryQuickTerms(props) {
                           setTermName(index, e.target.value);
                         }}
                       />
-                      <TextInput
+                      <TextArea
                         type="text"
                         placeholder="Term description"
                         defaultValue={item.description}
@@ -162,63 +201,92 @@ function GlossaryQuickTerms(props) {
           </Form>
         </div>
       )}
-       {!restCallInProgress && termsWithStatus.length > 0 && (
+      {!restCallInProgress && termsWithStatus.length > 0 && (
         <div>
           <div className="row-container">
             <h3>Terms Added.</h3>
           </div>
-          <Form>
+          <div className="search-item">
+            <DataTable
+              isSortable
+              rows={termsWithStatus}
+              headers={headerData}
+              render={({
+                rows,
+                headers,
+                getHeaderProps,
+              }) => (
+                <TableContainer>
+                  <Table>
+                    <TableHead>
+                      <TableRow>
+                        {headers.map((header) => (
+                          <TableHeader
+                            {...getHeaderProps({ header })}
+                            key={header.key}
+                            id={header.key}
+                          >
+                            {header.text}
+                          </TableHeader>
+                        ))}
+                      </TableRow>
+                    </TableHead>
+                    <TableBody>
+                      {rows.map((row) => (
+                        <TableRow key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value}</TableCell>
+                          ))}
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </TableContainer>
+              )}
+            />
+          </div>
+
+          {/* <Form>
             <FormGroup>
               <div className="bx--form-item">
                 <div className="row-container">
-                  <TextInput
-                    type="text"
-                    defaultValue="Name"
-                    style={{ color: "grey" }}
-                    readOnly
-                  />
-                  <TextInput
-                    type="text"
-                    defaultValue="Description"
-                    style={{ color: "grey" }}
-                    readOnly
-                  />
+                  <TextInput type="text" defaultValue="Name" readOnly />
+                  <TextInput type="text" defaultValue="Description" readOnly />
 
-                  <TextInput
-                    type="text"
-                    defaultValue="Status"
-                    style={{ color: "grey" }}
-                    readOnly
-                  />
+                  <TextInput type="text" defaultValue="Status" readOnly />
                 </div>
               </div>
               {termsWithStatus.map((item, index) => {
                 return (
                   <div className="bx--form-item" key={index}>
                     <div className="row-container">
-                      <TextInput
-                        type="text"
-                        defaultValue={item.name}
-                        readOnly
-                      />
-                      <TextInput
+                      <TextArea type="text" defaultValue={item.name} readOnly />
+                      <TextArea
                         type="text"
                         defaultValue={item.description}
                         readOnly
                       />
                       {item.status === "Success" && (
                         <div className="row-container">
-                          <TextInput
+                          <TextArea
                             type="text"
                             defaultValue={item.status}
                             readOnly
                           />
-                          <span role="img" aria-label="When present, this image indicates that the Term has been successfully created" className="left-20" alias="white_check_mark" src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png">✅</span>
+                          <span
+                            role="img"
+                            aria-label="When present, this image indicates that the Term has been successfully created"
+                            className="left-20"
+                            alias="white_check_mark"
+                            src="https://github.githubassets.com/images/icons/emoji/unicode/2705.png"
+                          >
+                            ✅
+                          </span>
                         </div>
                       )}
                       {item.status !== "Success" && (
                         <div>
-                          <TextInput
+                          <TextArea
                             type="text"
                             defaultValue={item.status}
                             readOnly
@@ -230,7 +298,7 @@ function GlossaryQuickTerms(props) {
                 );
               })}
             </FormGroup>
-          </Form>
+          </Form> */}
           <article style={{ color: "red" }}>{errorMsg}</article>
         </div>
       )}
@@ -238,4 +306,4 @@ function GlossaryQuickTerms(props) {
   );
 }
 
-export default withRouter(GlossaryQuickTerms);
\ No newline at end of file
+export default withRouter(GlossaryQuickTerms);
diff --git a/cra-client/src/components/GlossaryAuthor/components/authoringforms/NodeInput.js b/cra-client/src/components/GlossaryAuthor/components/authoringforms/NodeInput.js
index 11d4fbcf..cec731a3 100644
--- a/cra-client/src/components/GlossaryAuthor/components/authoringforms/NodeInput.js
+++ b/cra-client/src/components/GlossaryAuthor/components/authoringforms/NodeInput.js
@@ -1,9 +1,15 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* Copyright Contributors to the ODPi Egeria project. */
 import React, { useState, useEffect } from "react";
-import { Accordion, AccordionItem, TextInput } from "carbon-components-react";
+import {
+  Accordion,
+  AccordionItem,
+  TextInput,
+  TextArea,
+} from "carbon-components-react";
 import DateTimePicker from "../../../common/DateTimePicker";
 import Info16 from "@carbon/icons-react/lib/information/16";
+import { Html16 } from "@carbon/icons-react";
 
 /**
  * Component to take user input for node page as part of a wizard.
@@ -126,6 +132,33 @@ export default function NodeInput(props) {
       key: "value",
     },
   ];
+  const showInputforItem = (item) => {
+    if (item.type === "longtext") {
+      return (
+        <TextArea
+          id={labelIdForAttribute(item.key)}
+          type={getInputType(item)}
+          value={item.value}
+          invalid={item.invalid}
+          invalidText={item.invalidText}
+          onChange={(e) => setAttribute(item, e.target.value)}
+          placeholder={item.label}
+        ></TextArea>
+      );
+    } else {
+      return (
+        <TextInput
+          id={labelIdForAttribute(item.key)}
+          type={getInputType(item)}
+          value={item.value}
+          invalid={item.invalid}
+          invalidText={item.invalidText}
+          onChange={(e) => setAttribute(item, e.target.value)}
+          placeholder={item.label}
+        ></TextInput>
+      );
+    }
+  };
 
   return (
     <div>
@@ -142,8 +175,28 @@ export default function NodeInput(props) {
                 }
                 return allow;
               })
-              .map((item) => {
-                return (
+              .map((item) =>
+                item.type === "longtext" ? (
+                  <div className="bx--form-item" key={item.key}>
+                    <label
+                      htmlFor={labelIdForAttribute(item.key)}
+                      className="bx--label"
+                    >
+                      {item.label} <Info16 />
+                    </label>
+                    <div className="fullwidth">
+                        <TextArea
+                          id={labelIdForAttribute(item.key)}
+                          type={getInputType(item)}
+                          value={item.value}
+                          invalid={item.invalid}
+                          invalidText={item.invalidText}
+                          onChange={(e) => setAttribute(item, e.target.value)}
+                          placeholder={item.label}
+                        ></TextArea>
+                    </div>
+                  </div>
+                ) : (
                   <div className="bx--form-item" key={item.key}>
                     <label
                       htmlFor={labelIdForAttribute(item.key)}
@@ -152,19 +205,19 @@ export default function NodeInput(props) {
                       {item.label} <Info16 />
                     </label>
                     <div className="fullwidth">
-                      <TextInput
-                        id={labelIdForAttribute(item.key)}
-                        type={getInputType(item)}
-                        value={item.value}
-                        invalid={item.invalid}
-                        invalidText={item.invalidText}
-                        onChange={(e) => setAttribute(item, e.target.value)}
-                        placeholder={item.label}
-                      ></TextInput>
+                        <TextInput
+                          id={labelIdForAttribute(item.key)}
+                          type={getInputType(item)}
+                          value={item.value}
+                          invalid={item.invalid}
+                          invalidText={item.invalidText}
+                          onChange={(e) => setAttribute(item, e.target.value)}
+                          placeholder={item.label}
+                        ></TextInput>
                     </div>
                   </div>
-                );
-              })}
+                )
+              )}
           <Accordion>
             <AccordionItem title="Limit when active">
               <DateTimePicker
diff --git a/cra-client/src/components/GlossaryAuthor/components/properties/NodeTypes.js b/cra-client/src/components/GlossaryAuthor/components/properties/NodeTypes.js
index 1dc622d7..b65f1ed2 100644
--- a/cra-client/src/components/GlossaryAuthor/components/properties/NodeTypes.js
+++ b/cra-client/src/components/GlossaryAuthor/components/properties/NodeTypes.js
@@ -18,6 +18,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "description",
           label: "Description",
+          type:"longtext"
         },
         {
           key: "qualifiedName",
@@ -45,6 +46,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "description",
           label: "Description",
+          type:"longtext"
         },
         {
           key: "qualifiedName",
@@ -53,6 +55,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "summary",
           label: "Summary",
+          type:"longtext"
         },
         {
           key: "abbreviation",
@@ -61,10 +64,12 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "examples",
           label: "Examples",
+          type:"longtext"
         },
         {
           key: "usage",
           label: "Usage",
+          type:"longtext"
         },
         {
           key: "isSpineObject",
@@ -116,6 +121,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "description",
           label: "Description",
+          type:"longtext"
         },
         {
           key: "qualifiedName",
@@ -143,6 +149,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "description",
           label: "Description",
+          type:"longtext"
         },
         {
           key: "qualifiedName",
@@ -181,6 +188,7 @@ const getNodeType = (GlossaryAuthorURL, key) => {
         {
           key: "description",
           label: "Description",
+          type:"longtext"
         },
         {
           key: "qualifiedName",
diff --git a/cra-client/src/components/GlossaryAuthor/components/properties/RelationshipTypes.js b/cra-client/src/components/GlossaryAuthor/components/properties/RelationshipTypes.js
index aff06a72..8b8fbf8e 100644
--- a/cra-client/src/components/GlossaryAuthor/components/properties/RelationshipTypes.js
+++ b/cra-client/src/components/GlossaryAuthor/components/properties/RelationshipTypes.js
@@ -6,6 +6,7 @@ const getRelationshipType = (GlossaryAuthorURL, key) => {
     {
       key: "description",
       label: "Description",
+      type:"longtext"
     },
     {
       key: "steward",
diff --git a/cra-client/src/components/GlossaryAuthor/components/update/UpdateNode.js b/cra-client/src/components/GlossaryAuthor/components/update/UpdateNode.js
index 6f1500c7..3d4459d1 100644
--- a/cra-client/src/components/GlossaryAuthor/components/update/UpdateNode.js
+++ b/cra-client/src/components/GlossaryAuthor/components/update/UpdateNode.js
@@ -4,6 +4,7 @@ import React, { useState, useContext, useEffect } from "react";
 import getPathTypesAndGuids from "../properties/PathAnalyser";
 import { IdentificationContext } from "../../../../contexts/IdentificationContext";
 import getNodeType from "../properties/NodeTypes.js";
+import UpdateNodePropertiesWizard from "./UpdateNodePropertiesWizard";
 import {
   Accordion,
   AccordionItem,
@@ -288,7 +289,6 @@ export default function UpdateNode(props) {
     return rows;
   };
   const renderRelationships = () => {
-   
     return Object.entries(relationshipsMap).map(([key], i) => {
       return (
         <Accordion>
@@ -340,31 +340,37 @@ export default function UpdateNode(props) {
     // go  back
     history.goBack();
   };
+  // const onUpdated = (payLoad) => {
+  //   setUpdateBody(payLoad);
+  //   // if (payLoad.node !== undefined) {
+  //   //   const nodeTypeName = payLoad.node.nodeType.toLowerCase();
+  //   //   const nodeType = getNodeType(
+  //   //     identificationContext.getRestURL("glossary-author"),
+  //   //     nodeTypeName
+  //   //   );
+  //   //   instancesContext.updateNodeInstance(payLoad.node, nodeType);
+  //   // }
+  //   // if (payLoad.relationship !== undefined) {
+  //   //   const relationshipTypeName =
+  //   //     payLoad.relationship.relationshipType.toLowerCase();
+  //   //   instancesContext.updateRelationshipInstance(
+  //   //     payLoad.relationship,
+  //   //     payLoad.relationship.relationshipTypeName
+  //   //   );
+  //   // }
+  // };
   return (
     <div>
-      {/* the useEffect will run after the render and set the nodeType, allowing the initalGet to run and set currentNode */}
       {currentNode === undefined && nodeType && initialGet()}
-      {currentNode !== undefined &&
-        nodeType.attributes.map((item) => {
-          return (
-            <div className="bx--form-item" key={item.key}>
-              <label htmlFor={updateLabelId(item.key)} className="bx--label">
-                {item.label} <Info16 />
-              </label>
-              <input
-                id={updateLabelId(item.key)}
-                type="text"
-                className="bx--text-input"
-                defaultValue={currentNode[item.key]}
-                disabled={isDisabled()}
-                key={currentNode[item.key]}
-                onChange={(e) => setAttribute(item, e.target.value)}
-                placeholder={item.label}
-              ></input>
-            </div>
-          );
-        })}
-      {/* {currentNode !== undefined && (
+      {currentNode !== undefined && (
+        <UpdateNodePropertiesWizard
+          onUpdated={setUpdateBody}
+          // onModalContentRequestedClose={props.onModalContentRequestedClose}
+          currentNode={currentNode}
+        />
+      )}
+      {/*   )} 
+       {currentNode !== undefined && (
         <Accordion>
           <AccordionItem title="Advanced options">
             <DatePicker dateFormat="m/d/Y" datePickerType="range">
@@ -383,7 +389,7 @@ export default function UpdateNode(props) {
             </DatePicker>
           </AccordionItem>
         </Accordion>
-      )} */}
+      )} (*/}
       {currentNode !== undefined && (
         <Accordion>
           <AccordionItem title="System Attributes">
@@ -424,6 +430,7 @@ export default function UpdateNode(props) {
           </AccordionItem>
         </Accordion>
       )}
+      )
       {currentNode !== undefined && (
         <Accordion>
           <AccordionItem title="Relationships">
@@ -451,9 +458,7 @@ export default function UpdateNode(props) {
           </AccordionItem>
         </Accordion>
       )}
-
       <div style={{ color: "red" }}>{errorMsg}</div>
-
       <Button
         className="bx--btn bx--btn--primary"
         onClick={handleClickUpdate}