Add custom input fields for editing metadata

packages/core/components/ChoiceGroup/ChoiceGroup.module.css

@@ -8,7 +8,7 @@
 }
 
 .choice-group label > span {
-  font-size: var(--l-paragraph-size);
+  font-size: var(--s-paragraph-size);
   margin-right: 5px;
   margin-top: 1px;
   padding-left: 24px !important;

packages/core/components/ComboBox/index.tsx

@@ -12,7 +12,6 @@ interface Props {
     multiSelect?: boolean;
     options: IComboBoxOption[];
     placeholder: string;
-    useComboBoxAsMenuWidth?: boolean;
     onChange?: (option: IComboBoxOption | undefined, value?: string | undefined) => void;
 }
 
@@ -67,7 +66,7 @@ export default function BaseComboBox(props: Props) {
             comboBoxOptionStyles={{
                 rootChecked: styles.comboBoxItemChecked,
             }}
-            useComboBoxAsMenuWidth={props?.useComboBoxAsMenuWidth}
+            useComboBoxAsMenuWidth={true}
         />
     );
 }

packages/core/components/DurationForm/DurationForm.module.css

@@ -0,0 +1,14 @@
+.input-wrapper {
+  display: flex;
+}
+
+.input-field {
+  margin-right: 3px;
+  max-height: fit-content;
+}
+
+.input-field > input {
+  padding: 6px;
+  font-size: var(--s-paragraph-size);
+  max-width: 70px; 
+}

packages/core/components/DurationForm/index.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+
+import NumberField from "../NumberRangePicker/NumberField";
+import annotationFormatterFactory, { AnnotationType } from "../../entity/AnnotationFormatter";
+
+import styles from "./DurationForm.module.css";
+
+interface DurationFormProps {
+    className?: string;
+    defaultValue?: number;
+    onChange: (totalDuration: number) => void;
+    title?: string;
+}
+
+/**
+ * This component renders a simple form for entering durations
+ */
+export default function DurationForm(props: DurationFormProps) {
+    const { onChange } = props;
+    const [days, setDurationDays] = React.useState<string>("0");
+    const [hours, setDurationHours] = React.useState<string>("0");
+    const [minutes, setDurationMinutes] = React.useState<string>("0");
+    const [seconds, setDurationSeconds] = React.useState<string>("0");
+    const durationFormatter = annotationFormatterFactory(AnnotationType.DURATION);
+
+    React.useEffect(() => {
+        const durationString = `${Number(days) || 0}D ${Number(hours) || 0}H ${
+            Number(minutes) || 0
+        }M ${Number(seconds) || 0}S`;
+        const totalDurationInMs = Number(durationFormatter.valueOf(durationString));
+        onChange(totalDurationInMs);
+    }, [days, hours, minutes, seconds, durationFormatter, onChange]);
+
+    return (
+        <div>
+            <h3 className={styles.title}>{props?.title}</h3>
+            <div className={styles.inputWrapper}>
+                <NumberField
+                    aria-label="Days"
+                    className={styles.inputField}
+                    id="durationDays"
+                    label="Days"
+                    onChange={(event) => setDurationDays(event?.target?.value || "")}
+                    defaultValue={days}
+                    min={0}
+                />
+                <NumberField
+                    aria-label="Hours"
+                    className={styles.inputField}
+                    id="durationHours"
+                    label="Hrs"
+                    onChange={(event) => setDurationHours(event?.target?.value || "")}
+                    defaultValue={hours}
+                    min={0}
+                    max={23}
+                />
+                <NumberField
+                    aria-label="Minutes"
+                    className={styles.inputField}
+                    id="durationMinutes"
+                    label="Mins"
+                    onChange={(event) => setDurationMinutes(event?.target?.value || "")}
+                    defaultValue={minutes}
+                    min={0}
+                    max={59}
+                />
+                <NumberField
+                    aria-label="Seconds"
+                    className={styles.inputField}
+                    id="durationSeconds"
+                    label="Secs"
+                    onChange={(event) => setDurationSeconds(event?.target?.value || "")}
+                    defaultValue={seconds}
+                    min={0}
+                    max={59}
+                />
+            </div>
+        </div>
+    );
+}

packages/core/components/EditMetadata/EditMetadata.module.css

@@ -81,7 +81,7 @@
 
 .text-field {
   padding-bottom: var(--margin);
-  max-width: 300px;;
+  width: 300px;;
 }
 
 .text-field > div > label, .text-field > div > label::after {

packages/core/components/EditMetadata/ExistingAnnotationPathway.tsx

@@ -5,13 +5,14 @@ import * as React from "react";
 import MetadataDetails, { ValueCountItem } from "./MetadataDetails";
 import { PrimaryButton, SecondaryButton } from "../Buttons";
 import ComboBox from "../ComboBox";
+import { AnnotationType } from "../../entity/AnnotationFormatter";
 
 import styles from "./EditMetadata.module.css";
 
 interface ExistingAnnotationProps {
     onDismiss: () => void;
     annotationValueMap: Map<string, any> | undefined;
-    annotationOptions: IComboBoxOption[];
+    annotationOptions: { key: string; text: string; data: string }[];
     selectedFileCount: number;
 }
 
@@ -23,6 +24,7 @@ export default function ExistingAnnotationPathway(props: ExistingAnnotationProps
     const [newValues, setNewValues] = React.useState<string>();
     const [valueCount, setValueCount] = React.useState<ValueCountItem[]>();
     const [selectedAnnotation, setSelectedAnnotation] = React.useState<string | undefined>();
+    const [annotationType, setAnnotationType] = React.useState<AnnotationType | undefined>();
 
     const onSelectMetadataField = (
         option: IComboBoxOption | undefined,
@@ -61,6 +63,7 @@ export default function ExistingAnnotationPathway(props: ExistingAnnotationProps
             ];
         }
         setSelectedAnnotation(selectedFieldName);
+        setAnnotationType(option?.data);
         setValueCount(valueMap);
     };
 
@@ -74,16 +77,16 @@ export default function ExistingAnnotationPathway(props: ExistingAnnotationProps
             <ComboBox
                 className={styles.comboBox}
                 label="Select a metadata field"
-                placeholder="Select a field"
+                placeholder="Select a field..."
                 selectedKey={selectedAnnotation}
                 options={props.annotationOptions}
-                useComboBoxAsMenuWidth
                 onChange={onSelectMetadataField}
             />
             {!!selectedAnnotation && (
                 <MetadataDetails
                     onChange={(value) => setNewValues(value)}
                     items={valueCount || []}
+                    fieldType={annotationType}
                 />
             )}
             <div className={classNames(styles.footer, styles.footerAlignRight)}>

packages/core/components/EditMetadata/MetadataDetails.module.css

@@ -43,7 +43,12 @@
 }
 
 .table-title {
-  padding-bottom: 5px
+  padding-bottom: 5px;
+}
+
+.values-title {
+  padding-bottom: 5px;
+  padding-left: 35px;
 }
 
 .stack {
@@ -62,3 +67,64 @@
 .stack-item-right {
   width: 275px;
 }
+
+.read-only-placeholder {
+  margin-right: 20px;
+  font-style: italic;
+  color: var(--primary-text-color);
+}
+
+.input-field input {
+  background-color: var(--secondary-background-color);
+  border-radius: var(--small-border-radius);
+  border: 1px solid var(--border-color);
+  color: var(--secondary-text-color);
+  outline: none;
+  padding: 6px;
+  font-size: var(--s-paragraph-size);
+  width: 100%;
+  min-width: fit-content;
+}
+
+.input-field:active > input, .input-field > input:active, 
+.input-field:focus > input, .input-field > input:focus,
+.input-field:focus-within > input, .input-field > input:focus-within  {
+  border: 1px solid var(--aqua);
+}
+
+.input-wrapper {
+  margin-top: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.date-range-root {
+  width: 300px;
+}
+
+.date-range-text-field div {
+  background-color: var(--secondary-background-color);
+  border: none;
+  border-radius: var(--small-border-radius);
+  color: var(--primary-text-color);
+}
+
+.date-range-text-field div::after {    
+  border: 1px solid var(--aqua)
+}
+
+.date-range-text-field > div {
+  border: 1px solid var(--border-color)
+}
+
+.date-range-text-field i {
+  color: var(--primary-text-color)
+}
+
+.no-padding {
+  padding-bottom: 0;
+}
+
+.forward-icon {
+ padding-right: 20px;
+}