From fc3d727d93ba983f0e9447bc6062624bced56803 Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Fri, 15 Nov 2024 09:47:58 +1100
Subject: [PATCH 1/3] Add hint text for ref field

---
 src/ImageBuilder.jsx           |  1 +
 src/components/form/fields.jsx | 11 ++++++-----
 src/form.css                   |  9 ++++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/ImageBuilder.jsx b/src/ImageBuilder.jsx
index 64dddff..f98b3a1 100644
--- a/src/ImageBuilder.jsx
+++ b/src/ImageBuilder.jsx
@@ -178,6 +178,7 @@ export function ImageBuilder({ name, isActive }) {
         ref={branchFieldRef}
         id={`${name}--ref`}
         label="Git Ref"
+        hint="Branch, Tag or Commit to use. HEAD will use the default branch"
         value={ref}
         validate={
           isActive && {
diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
index c5d364e..e67bf1b 100644
--- a/src/components/form/fields.jsx
+++ b/src/components/form/fields.jsx
@@ -19,7 +19,7 @@ function validateField(value, validateConfig, touched) {
   return;
 }
 
-function Field({ id, label, children, error }) {
+function Field({ id, label, hint, children, error }) {
   return (
     <div className={`profile-option-container ${error ? "has-error" : ""}`}>
       <div className="profile-option-label-container">
@@ -27,7 +27,7 @@ function Field({ id, label, children, error }) {
       </div>
       <div className="profile-option-control-container">
         {children}
-
+        {(hint && !error) && <div className="profile-option-control-hint">{hint}</div>}
         {error && <div className="profile-option-control-error">{error}</div>}
       </div>
     </div>
@@ -37,6 +37,7 @@ function Field({ id, label, children, error }) {
 export function SelectField({
   id,
   label,
+  hint,
   options,
   defaultOption,
   onChange,
@@ -55,7 +56,7 @@ export function SelectField({
   );
 
   return (
-    <Field id={id} label={label} error={error}>
+    <Field id={id} label={label} hint={hint} error={error}>
       <CustomizedSelect
         options={options}
         id={id}
@@ -74,7 +75,7 @@ export function SelectField({
 }
 
 function _TextField(
-  { id, label, value, validate = {}, onChange, tabIndex },
+  { id, label, value, hint, validate = {}, onChange, tabIndex },
   ref,
 ) {
   const [touched, setTouched] = useState(false);
@@ -85,7 +86,7 @@ function _TextField(
   const error = validateField(value, validate, touched);
 
   return (
-    <Field id={id} label={label} error={touched && error}>
+    <Field id={id} label={label} hint={hint} error={touched && error}>
       <input
         ref={ref}
         type="text"
diff --git a/src/form.css b/src/form.css
index 4e729dc..15445ae 100644
--- a/src/form.css
+++ b/src/form.css
@@ -87,9 +87,16 @@
   border-color: red;
 }
 
+.profile-option-control-hint {
+  color: #555;
+  margin-top: 0.3rem;
+  font-size: .9rem;
+}
+
 .profile-option-control-error {
   color: red;
-  margin-top: 0.5rem;
+  margin-top: 0.3rem;
+  font-size: .9rem;
 }
 
 .profile-form-error {

From 85a80e858c467955b5f13e586e3d199f4dad00d5 Mon Sep 17 00:00:00 2001
From: "pre-commit-ci[bot]"
 <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:51:59 +0000
Subject: [PATCH 2/3] [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci
---
 src/components/form/fields.jsx | 4 +++-
 src/form.css                   | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
index e67bf1b..cbfb101 100644
--- a/src/components/form/fields.jsx
+++ b/src/components/form/fields.jsx
@@ -27,7 +27,9 @@ function Field({ id, label, hint, children, error }) {
       </div>
       <div className="profile-option-control-container">
         {children}
-        {(hint && !error) && <div className="profile-option-control-hint">{hint}</div>}
+        {hint && !error && (
+          <div className="profile-option-control-hint">{hint}</div>
+        )}
         {error && <div className="profile-option-control-error">{error}</div>}
       </div>
     </div>
diff --git a/src/form.css b/src/form.css
index 15445ae..b717ce1 100644
--- a/src/form.css
+++ b/src/form.css
@@ -90,13 +90,13 @@
 .profile-option-control-hint {
   color: #555;
   margin-top: 0.3rem;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 
 .profile-option-control-error {
   color: red;
   margin-top: 0.3rem;
-  font-size: .9rem;
+  font-size: 0.9rem;
 }
 
 .profile-form-error {

From e1a82a41226e4b7616bb8535da834487878c29b8 Mon Sep 17 00:00:00 2001
From: Oliver Roick <oliver@roick.email>
Date: Fri, 15 Nov 2024 10:48:34 +1100
Subject: [PATCH 3/3] Show both hint and error

---
 src/components/form/fields.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/form/fields.jsx b/src/components/form/fields.jsx
index cbfb101..741db52 100644
--- a/src/components/form/fields.jsx
+++ b/src/components/form/fields.jsx
@@ -27,10 +27,8 @@ function Field({ id, label, hint, children, error }) {
       </div>
       <div className="profile-option-control-container">
         {children}
-        {hint && !error && (
-          <div className="profile-option-control-hint">{hint}</div>
-        )}
         {error && <div className="profile-option-control-error">{error}</div>}
+        {hint && <div className="profile-option-control-hint">{hint}</div>}
       </div>
     </div>
   );