From fd1429e2da7b93a9f34f59b6eaf206a5102157da Mon Sep 17 00:00:00 2001
From: Mike Simpson <mike.simpson@ncl.ac.uk>
Date: Wed, 28 Jun 2023 16:40:45 +0100
Subject: [PATCH] Disable free-text boxes on Team category

Edit Multi Data Entry to display something when editing and the box is disabled when it has no data.
---
 .../multi-data-entry/multi-data-entry.tsx     | 142 +++++++++---------
 .../building/data-containers/team.tsx         |   5 +-
 app/src/frontend/config/data-fields-config.ts |   6 +-
 3 files changed, 81 insertions(+), 72 deletions(-)

diff --git a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
index 318debf1..6c1565c6 100644
--- a/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
+++ b/app/src/frontend/building/data-components/multi-data-entry/multi-data-entry.tsx
@@ -69,83 +69,89 @@ export const MultiDataEntry: React.FC<MultiDataEntryProps> = ({
             copy={copyable ? props.copy : undefined}
         />
         <div id={`${props.slug}-wrapper`}>
+        {
+            values.length === 0 && !isEditing &&
+            <div className="input-group">
+                <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
+            </div>
+        }
+        <ul className="data-entry-list">
             {
-                values.length === 0 && !isEditing &&
+                isEditing && isDisabled && values.length === 0 &&
                 <div className="input-group">
                     <input className="form-control no-entries" type="text" value="No entries" disabled={true} />
                 </div>
             }
-            <ul className="data-entry-list">
-                {
-                    values.map((val, i) => (
-                        <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
-                            <DataEntryInput
-                                slug={props.slug}
-                                name={`${slugWithModifier}-${i}`}
-                                id={`${slugWithModifier}-${i}`}
-                                value={val}
-                                disabled={!editableEntries || isDisabled}
-                                onChange={(_key, val) => edit(i, val)}
+            {
+                values.map((val, i) => (
+                    <li className="input-group" key={i /* i as key prevents input component recreation on edit */}>
+                        <DataEntryInput
+                            slug={props.slug}
+                            name={`${slugWithModifier}-${i}`}
+                            id={`${slugWithModifier}-${i}`}
+                            value={val}
+                            disabled={!editableEntries || isDisabled}
+                            onChange={(_key, val) => edit(i, val)}
 
-                                maxLength={props.maxLength}
-                                isUrl={props.isUrl}
-                                valueTransform={props.valueTransform}
+                            maxLength={props.maxLength}
+                            isUrl={props.isUrl}
+                            valueTransform={props.valueTransform}
 
-                                autofill={props.autofill}
-                                showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
-                            />
-                            {
-                                !isDisabled &&
-                                <div className="input-group-append">
-                                    <button type="button" onClick={() => remove(i)}
-                                        title="Remove"
-                                        data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
-                                </div>
-                            }
-                        </li>
-                    ))
-                }
-                {
-                    !isDisabled &&
-                        <li className="input-group">
-                            <DataEntryInput
-                                slug={props.slug}
-                                name={slugWithModifier}
-                                id={slugWithModifier}
-                                value={newValue}
-                                disabled={props.disabled}
-                                required={props.required && values.length < 1}
-                                onChange={(_key, val) => setNewValue(val)}
-                                onConfirm={(_key, val) => addNew(val)}
+                            autofill={props.autofill}
+                            showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
+                        />
+                        {
+                            !isDisabled &&
+                            <div className="input-group-append">
+                                <button type="button" onClick={() => remove(i)}
+                                    title="Remove"
+                                    data-index={i} className="btn btn-outline-dark data-entry-list-button"><CloseIcon /></button>
+                            </div>
+                        }
+                    </li>
+                ))
+            }
+            {
+                !isDisabled &&
+                    <li className="input-group">
+                        <DataEntryInput
+                            slug={props.slug}
+                            name={slugWithModifier}
+                            id={slugWithModifier}
+                            value={newValue}
+                            disabled={props.disabled}
+                            required={props.required && values.length < 1}
+                            onChange={(_key, val) => setNewValue(val)}
+                            onConfirm={(_key, val) => addNew(val)}
 
-                                maxLength={props.maxLength}
-                                placeholder={props.placeholder}
-                                isUrl={props.isUrl}
-                                valueTransform={props.valueTransform}
-                                confirmOnEnter={confirmOnEnter}
+                            maxLength={props.maxLength}
+                            placeholder={props.placeholder}
+                            isUrl={props.isUrl}
+                            valueTransform={props.valueTransform}
+                            confirmOnEnter={confirmOnEnter}
 
-                                autofill={props.autofill}
-                                showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
-                                confirmOnAutofillSelect={true}
-                            />
-                            {
-                                newValue != undefined &&
-                                    <>
-                                        <div className="input-group-append">
-                                            <button type="button"
-                                                className="btn btn-primary data-entry-list-button"
-                                                title="Confirm new value"
-                                                onClick={() => addNew()}
-                                            ><SaveIcon /></button>
-                                        </div>
-                                        <div className="input-group-append">
-                                            <button type="button" onClick={() => clearNew()}
-                                                title="Clear new value"
-                                                className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
-                                        </div>
-                                    </>
-                            }
-                        </li>
+                            autofill={props.autofill}
+                            showAllOptionsOnEmpty={props.showAllOptionsOnEmpty}
+                            confirmOnAutofillSelect={true}
+                        />
+                        {
+                            newValue != undefined &&
+                                <>
+                                    <div className="input-group-append">
+                                        <button type="button"
+                                            className="btn btn-primary data-entry-list-button"
+                                            title="Confirm new value"
+                                            onClick={() => addNew()}
+                                        ><SaveIcon /></button>
+                                    </div>
+                                    <div className="input-group-append">
+                                        <button type="button" onClick={() => clearNew()}
+                                            title="Clear new value"
+                                            className="btn btn-warning data-entry-list-button"><CloseIcon /></button>
+                                    </div>
+                                </>
+                        }
+                    </li>
                 }
             </ul>
         </div>
diff --git a/app/src/frontend/building/data-containers/team.tsx b/app/src/frontend/building/data-containers/team.tsx
index 4cd78237..cf9773ef 100644
--- a/app/src/frontend/building/data-containers/team.tsx
+++ b/app/src/frontend/building/data-containers/team.tsx
@@ -146,6 +146,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     tooltip={dataFields.landowner.tooltip}
                     placeholder=""
                     editableEntries={true}
+                    disabled={true}
                     />
                 <Verification
                     slug="landowner"
@@ -213,6 +214,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     tooltip={dataFields.developer_name.tooltip}
                     placeholder=""
                     editableEntries={true}
+                    disabled={true}
                     />
                 <Verification
                     slug="developer_name"
@@ -263,6 +265,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     tooltip={dataFields.designers.tooltip}
                     placeholder=""
                     editableEntries={true}
+                    disabled={true}
                     />
                 <Verification
                     slug="designers"
@@ -272,7 +275,6 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     user_verified_as={props.user_verified.designers}
                     verified_count={props.building.verified.designers}
                     />
-
                 <SelectDataEntry
                     slug='lead_designer_type'
                     title={dataFields.lead_designer_type.title}
@@ -330,6 +332,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
                     onChange={props.onChange}
                     placeholder=""
                     editableEntries={true}
+                    disabled={true}
                     />
                 <Verification
                     slug="builder"
diff --git a/app/src/frontend/config/data-fields-config.ts b/app/src/frontend/config/data-fields-config.ts
index 6838613d..c579d52f 100644
--- a/app/src/frontend/config/data-fields-config.ts
+++ b/app/src/frontend/config/data-fields-config.ts
@@ -969,7 +969,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     landowner: {
         category: Category.Team,
         title: "Landowner(s) at time of construction",
-        tooltip: "Land owner when the building was constructed.<br/>For info on current land ownership, see 'Planning Controls'.",
+        tooltip: "Land owner when the building was constructed.<br/><br/>Free-text entry disabled for security reasons.<br/><br/>For info on current land ownership, see 'Planning Controls'.",
         example: ["", "", ""],
     },
     landowner_source_type: {
@@ -988,7 +988,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     designers: {
         category: Category.Team,
         title: "Who were the main designer(s)?",
-        tooltip: "Free text. First name, space, then Last name",
+        tooltip: "First name, space, then Last name.<br/><br/>Free-text entry disabled for security reasons.",
         example: ["", "", ""],
     },
     designers_source_type: {
@@ -1031,7 +1031,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
     },
     builder: {
         category: Category.Team,
-        title: "Name of builder/construction team",
+        title: "Name of builder/construction team.<br/><br/>Free-text entry disabled for security reasons.",
         example: ["", "", ""],
     },
     builder_source_type: {