@oneuptime/common 8.0.5414 → 8.0.5438

package/UI/Components/Dictionary/Dictionary.tsx

@@ -1,6 +1,5 @@
 import Button, { ButtonSize, ButtonStyleType } from "../Button/Button";
 import Dropdown, { DropdownOption, DropdownValue } from "../Dropdown/Dropdown";
-import Icon, { SizeProp } from "../Icon/Icon";
 import Input, { InputType } from "../Input/Input";
 import Dictionary from "../../../Types/Dictionary";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -10,8 +9,8 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import NumberUtil from "../../../Utils/Number";
-import BooleanUtil from "../../../Utils/Boolean";
+import AutocompleteTextInput from "../AutocompleteTextInput/AutocompleteTextInput";
+import FieldLabelElement from "../Forms/Fields/FieldLabel";
 
 export enum ValueType {
   Text = "Text",
@@ -28,7 +27,6 @@ export interface ComponentProps {
   valuePlaceholder?: string;
   addButtonSuffix?: string | undefined;
   valueTypes?: Array<ValueType>; // by default it'll be Text
-  autoConvertValueTypes?: boolean | undefined;
   keys?: Array<string> | undefined;
 }
 
@@ -83,9 +81,11 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
         }
       }
 
+      const value: string | number | boolean | undefined = json[key];
+
       return {
         key: key,
-        value: json[key] || "",
+        value: value === undefined || value === null ? "" : value,
         type: valueType,
       };
     });
@@ -109,15 +109,6 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
   const onDataChange: OnDataChangeFunction = (data: Array<Item>): void => {
     const result: Dictionary<string | number | boolean> = {};
     data.forEach((item: Item) => {
-      if (props.autoConvertValueTypes) {
-        if (NumberUtil.canBeConvertedToNumber(item.value)) {
-          item.value = Number(item.value);
-        }
-
-        if (BooleanUtil.canBeConvertedToBoolean(item.value)) {
-          item.value = Boolean(item.value);
-        }
-      }
       result[item.key] = item.value;
     });
     if (props.onChange) {
@@ -135,68 +126,55 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
     value: "False",
   };
 
-  const dropdownOptionsForKeys: Array<DropdownOption> = props.keys
-    ? props.keys.map((key: string) => {
-        return {
-          label: key,
-          value: key,
-        };
-      })
-    : [];
+  const getDefaultValueForType: (
+    type: ValueType,
+  ) => string | number | boolean = (type: ValueType) => {
+    if (type === ValueType.Boolean) {
+      return true;
+    }
+
+    return "";
+  };
 
   return (
     <div>
       <div>
         {data.map((item: Item, index: number) => {
           return (
-            <div key={index} className="flex">
+            <div key={index} className="flex items-start mb-4 last:mb-0">
               <div className="mr-1 w-1/2">
-                {!props.keys && (
-                  <Input
-                    value={item.key}
-                    placeholder={props.keyPlaceholder}
-                    onChange={(value: string) => {
-                      const newData: Array<Item> = [...data];
-                      newData[index]!.key = value;
-                      setData(newData);
-                      onDataChange(newData);
-                    }}
+                <div className="mb-1">
+                  <FieldLabelElement
+                    title="Key"
+                    required={true}
+                    hideOptionalLabel={true}
                   />
-                )}
-
-                {props.keys && (
-                  <Dropdown
-                    value={dropdownOptionsForKeys.find(
-                      (option: DropdownOption) => {
-                        return option.value === item.key;
-                      },
-                    )}
-                    options={dropdownOptionsForKeys}
-                    isMultiSelect={false}
-                    onChange={(
-                      selectedOption:
-                        | DropdownValue
-                        | Array<DropdownValue>
-                        | null,
-                    ) => {
-                      const newData: Array<Item> = [...data];
-                      newData[index]!.key = selectedOption as string;
-                      setData(newData);
-                      onDataChange(newData);
-                    }}
-                  />
-                )}
+                </div>
+                <AutocompleteTextInput
+                  value={item.key}
+                  placeholder={props.keyPlaceholder}
+                  suggestions={props.keys}
+                  onChange={(value: string) => {
+                    const newData: Array<Item> = [...data];
+                    newData[index]!.key = value;
+                    setData(newData);
+                    onDataChange(newData);
+                  }}
+                />
               </div>
 
-              <div className="mr-1 ml-1 mt-auto mb-auto">
-                <Icon
-                  className="h-3 w-3"
-                  icon={IconProp.Equals}
-                  size={SizeProp.Small}
-                />
+              <div className="mr-1 ml-1 flex items-center justify-center pt-8">
+                <span className="text-slate-500 text-2xl leading-none">=</span>
               </div>
               {valueTypes.length > 1 && (
                 <div className="ml-1 w-1/2">
+                  <div className="mb-1">
+                    <FieldLabelElement
+                      title="Type"
+                      hideOptionalLabel={true}
+                      required={true}
+                    />
+                  </div>
                   <Dropdown
                     value={dropdownOptionsForValueTypes.find(
                       (dropdownOption: DropdownOption) => {
@@ -212,8 +190,10 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                         | null,
                     ) => {
                       const newData: Array<Item> = [...data];
-                      newData[index]!.type =
+                      const newType: ValueType =
                         (selectedOption as ValueType) || valueTypes[0];
+                      newData[index]!.type = newType;
+                      newData[index]!.value = getDefaultValueForType(newType);
                       setData(newData);
                       onDataChange(newData);
                     }}
@@ -221,6 +201,13 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 </div>
               )}
               <div className="ml-1 w-1/2">
+                <div className="mb-1">
+                  <FieldLabelElement
+                    title="Value"
+                    hideOptionalLabel={true}
+                    required={true}
+                  />
+                </div>
                 {item.type === ValueType.Text && (
                   <Input
                     value={item.value.toString()}
@@ -284,7 +271,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                   />
                 )}
               </div>
-              <div className="ml-1 mt-1">
+              <div className="ml-1 flex flex-col justify-end pt-6">
                 <Button
                   dataTestId={`delete-${item.key}`}
                   title="Delete"
@@ -311,7 +298,7 @@ const DictionaryForm: FunctionComponent<ComponentProps> = (
                 ...data,
                 {
                   key: "",
-                  value: "",
+                  value: getDefaultValueForType(valueTypes[0] as ValueType),
                   type: valueTypes[0] as ValueType,
                 },
               ]);

package/UI/Components/Filters/JSONFilter.tsx

@@ -1,5 +1,5 @@
 import { FindWhereProperty } from "../../../Types/BaseDatabase/Query";
-import DictionaryForm from "../Dictionary/Dictionary";
+import DictionaryForm, { ValueType } from "../Dictionary/Dictionary";
 import FieldType from "../Types/FieldType";
 import Filter from "./Types/Filter";
 import FilterData from "./Types/FilterData";
@@ -31,7 +31,7 @@ const JSONFilter: JSONFilterFunction = <T extends GenericObject>(
         addButtonSuffix={filter.title}
         keyPlaceholder={"Key"}
         valuePlaceholder={"Value"}
-        autoConvertValueTypes={true}
+        valueTypes={[ValueType.Text, ValueType.Number, ValueType.Boolean]}
         initialValue={(filterData[filter.key] as Dictionary<string>) || {}}
         onChange={(value: Dictionary<string | number | boolean>) => {
           // if no keys in the dictionary, remove the filter

package/UI/Components/Forms/Fields/FormField.tsx

@@ -5,7 +5,7 @@ import CheckboxElement, {
   CategoryCheckboxValue,
 } from "../../Checkbox/Checkbox";
 import CodeEditor from "../../CodeEditor/CodeEditor";
-import DictionaryForm from "../../Dictionary/Dictionary";
+import DictionaryForm, { ValueType } from "../../Dictionary/Dictionary";
 import Dropdown, { DropdownValue } from "../../Dropdown/Dropdown";
 import FilePicker from "../../FilePicker/FilePicker";
 import Input, { InputType } from "../../Input/Input";
@@ -386,7 +386,7 @@ const FormField: <T extends GenericObject>(
               addButtonSuffix={props.field.title}
               keyPlaceholder={"Key"}
               valuePlaceholder={"Value"}
-              autoConvertValueTypes={true}
+              valueTypes={[ValueType.Text, ValueType.Number, ValueType.Boolean]}
               initialValue={
                 props.currentValues &&
                 (props.currentValues as any)[props.fieldName]

package/UI/Components/GanttChart/Bar/Index.tsx

@@ -26,6 +26,7 @@ export interface ComponentProps {
   onSelect: (barId: string) => void;
   onDeselect: (barId: string) => void;
   isSelected?: boolean;
+  isHighlighted?: boolean;
 }
 
 const Bar: FunctionComponent<ComponentProps> = (
@@ -66,10 +67,18 @@ const Bar: FunctionComponent<ComponentProps> = (
     barOpacity = 0.5;
   }
 
+  if (props.isHighlighted) {
+    barOpacity = 1;
+  }
+
   if (isHovered) {
     barOpacity = 1;
   }
 
+  const highlightShadow: string | undefined = props.isHighlighted
+    ? "0 0 0 2px rgba(99, 102, 241, 0.8), 0 0 14px rgba(129, 140, 248, 0.55)"
+    : undefined;
+
   return (
     // rectangle div with curved corners and text inside in tailwindcss
     <div
@@ -84,6 +93,8 @@ const Bar: FunctionComponent<ComponentProps> = (
           width: `${barWidth}px`,
           backgroundColor: `${props.bar.barColor.toString()}`,
           opacity: barOpacity,
+          boxShadow: highlightShadow,
+          zIndex: props.isHighlighted ? 30 : undefined,
         }}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
@@ -107,6 +118,8 @@ const Bar: FunctionComponent<ComponentProps> = (
         style={{
           marginLeft: `${barWidth + 15}px`,
           opacity: barOpacity,
+          fontWeight: props.isHighlighted ? 600 : undefined,
+          color: props.isHighlighted ? "#4338ca" : undefined,
         }}
       >
         <BarLabel label={props.bar.label} />

package/UI/Components/GanttChart/Index.tsx

@@ -11,6 +11,7 @@ export interface GanttChartProps {
   onBarSelectChange: (barIds: string[]) => void;
   multiSelect?: boolean | undefined;
   selectedBarIds: string[];
+  highlightBarIds?: string[];
 }
 
 export interface ComponentProps {
@@ -71,7 +72,12 @@ const GanttChart: FunctionComponent<ComponentProps> = (
           chartTimelineStart={props.chart.timeline.start}
           rows={props.chart.rows}
           selectedBarIds={props.chart.selectedBarIds}
-          multiSelect={props.chart.multiSelect}
+          {...(props.chart.multiSelect !== undefined
+            ? { multiSelect: props.chart.multiSelect }
+            : {})}
+          {...(props.chart.highlightBarIds
+            ? { highlightBarIds: props.chart.highlightBarIds }
+            : {})}
           onBarSelectChange={(barIds: string[]) => {
             props.chart.onBarSelectChange(barIds);
           }}

package/UI/Components/GanttChart/Row/Index.tsx

@@ -10,6 +10,7 @@ export interface ComponentProps {
   onBarSelectChange: (barIds: string[]) => void;
   children?: ReactElement;
   multiSelect?: boolean | undefined;
+  highlightBarIds?: string[];
 }
 
 const RowIndex: FunctionComponent<ComponentProps> = (

package/UI/Components/GanttChart/Row/Row.tsx

@@ -2,7 +2,13 @@ import Icon from "../../Icon/Icon";
 import Bar, { GanttChartBar } from "../Bar/Index";
 import RowLabel from "./RowLabel";
 import IconProp from "../../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 export interface GanttChartRow {
   rowInfo: {
@@ -23,8 +29,26 @@ export interface ComponentProps {
   onBarSelectChange: (barIds: string[]) => void;
   level: number;
   multiSelect?: boolean | undefined;
+  highlightBarIds?: string[];
 }
 
+const doesRowContainHighlight: (
+  row: GanttChartRow,
+  highlightSet: Set<string>,
+) => boolean = (row: GanttChartRow, highlightSet: Set<string>): boolean => {
+  if (
+    row.bars.some((bar: GanttChartBar) => {
+      return highlightSet.has(bar.id);
+    })
+  ) {
+    return true;
+  }
+
+  return row.childRows.some((childRow: GanttChartRow) => {
+    return doesRowContainHighlight(childRow, highlightSet);
+  });
+};
+
 const Row: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -38,21 +62,61 @@ const Row: FunctionComponent<ComponentProps> = (
 
   const hasChildRows: boolean = row.childRows.length > 0;
 
-  const shouldShowChildRows: boolean = level < 2;
+  const highlightSet: Set<string> | null = useMemo(() => {
+    if (!props.highlightBarIds || props.highlightBarIds.length === 0) {
+      return null;
+    }
+
+    return new Set(props.highlightBarIds);
+  }, [props.highlightBarIds]);
+
+  const hasHighlightedDescendant: boolean = useMemo(() => {
+    if (!highlightSet) {
+      return false;
+    }
+
+    return row.childRows.some((childRow: GanttChartRow) => {
+      return doesRowContainHighlight(childRow, highlightSet);
+    });
+  }, [highlightSet, row]);
+
+  const shouldShowChildRows: boolean = level < 2 || hasHighlightedDescendant;
 
   const [showChildRows, setShowChildRows] = useState(shouldShowChildRows);
 
-  const paddingCount: number = level * 4;
+  useEffect(() => {
+    if (hasHighlightedDescendant && !showChildRows) {
+      setShowChildRows(true);
+    }
+  }, [hasHighlightedDescendant, showChildRows]);
+
+  const rowIsHighlighted: boolean = useMemo(() => {
+    if (!highlightSet) {
+      return false;
+    }
+
+    return doesRowContainHighlight(row, highlightSet);
+  }, [highlightSet, row]);
+
+  const labelPaddingLeft: string = `${level}rem`;
 
   return (
     // rectangle div with curved corners and text inside in tailwindcss
     <div>
       <div
-        className={`flex w-full border-b-2 border-gray-200  border-l-2 border-l-gray-400 border-r-2 border-r-gray-400`}
+        className={`flex w-full border-b border-gray-200 border-l-2 border-l-gray-300 border-r-2 border-r-gray-300 transition-colors duration-150 ${rowIsHighlighted ? "bg-indigo-50/40 ring-1 ring-inset ring-indigo-200/70 shadow-sm" : ""}`}
+        data-span-highlighted={rowIsHighlighted ? "true" : undefined}
       >
         <div className="flex w-1/4 border-r-2 border-gray-300 overflow-hidden">
           <div
-            className={`pl-${paddingCount} pt-2 pb-2 pr-2 flex overflow-hidden`}
+            className="flex overflow-hidden items-center gap-3 pr-3 pt-2 pb-2 w-full"
+            style={{
+              paddingLeft: labelPaddingLeft,
+              backgroundColor: rowIsHighlighted
+                ? "rgba(99, 102, 241, 0.08)"
+                : undefined,
+              borderRadius: rowIsHighlighted ? "0.5rem" : undefined,
+            }}
           >
             <div className="w-5 h-5 ml-3 mt-1">
               {hasChildRows && (
@@ -67,13 +131,31 @@ const Row: FunctionComponent<ComponentProps> = (
                 />
               )}
             </div>
-            <RowLabel
-              title={row.rowInfo.title}
-              description={row.rowInfo.description}
-            />
+            <div className="flex-1 min-w-0">
+              <RowLabel
+                title={row.rowInfo.title}
+                description={row.rowInfo.description}
+                isHighlighted={rowIsHighlighted}
+              />
+            </div>
+            {rowIsHighlighted ? (
+              <span className="hidden lg:inline-flex items-center gap-1 rounded-full bg-indigo-100 text-indigo-600 text-[10px] font-semibold uppercase tracking-wide px-2 py-0.5 shadow-sm">
+                <span className="inline-block h-1.5 w-1.5 rounded-full bg-indigo-500" />
+                Matched
+              </span>
+            ) : (
+              <></>
+            )}
           </div>
         </div>
-        <div className="flex w-3/4">
+        <div
+          className={`flex w-3/4 relative overflow-hidden transition-all duration-150 ${rowIsHighlighted ? "bg-indigo-500/5" : ""}`}
+          style={{
+            boxShadow: rowIsHighlighted
+              ? "inset 0 0 0 1px rgba(129, 140, 248, 0.25)"
+              : undefined,
+          }}
+        >
           {row.bars.map((bar: GanttChartBar, i: number) => {
             return (
               <Bar
@@ -84,6 +166,9 @@ const Row: FunctionComponent<ComponentProps> = (
                 timelineWidth={props.timelineWidth}
                 areOtherBarsSelected={props.selectedBarIds.length > 0}
                 isSelected={props.selectedBarIds.includes(bar.id)}
+                isHighlighted={Boolean(
+                  highlightSet && highlightSet.has(bar.id),
+                )}
                 onSelect={(barId: string) => {
                   // check if the bar is already selected
                   if (props.selectedBarIds.includes(barId)) {
@@ -127,6 +212,12 @@ const Row: FunctionComponent<ComponentProps> = (
                   timelineWidth={props.timelineWidth}
                   selectedBarIds={props.selectedBarIds}
                   onBarSelectChange={props.onBarSelectChange}
+                  {...(props.highlightBarIds
+                    ? { highlightBarIds: props.highlightBarIds }
+                    : {})}
+                  {...(props.multiSelect !== undefined
+                    ? { multiSelect: props.multiSelect }
+                    : {})}
                 />
               </div>
             );

package/UI/Components/GanttChart/Row/RowLabel.tsx

@@ -3,6 +3,7 @@ import React, { FunctionComponent, ReactElement } from "react";
 export interface ComponentProps {
   title: string | ReactElement;
   description: string | ReactElement;
+  isHighlighted?: boolean;
 }
 
 const RowLabel: FunctionComponent<ComponentProps> = (
@@ -12,10 +13,14 @@ const RowLabel: FunctionComponent<ComponentProps> = (
     // rectangle div with curved corners and text inside in tailwindcss
 
     <div className="overflow-hidden">
-      <div className="text-sm text-gray-600 truncate overflow-hidden">
+      <div
+        className={`truncate overflow-hidden text-sm transition-colors duration-150 ${props.isHighlighted ? "font-semibold text-indigo-700" : "text-gray-600"}`}
+      >
         {props.title}
       </div>
-      <div className="text-xs text-gray-500 truncate overflow-hidden">
+      <div
+        className={`truncate overflow-hidden text-xs transition-colors duration-150 ${props.isHighlighted ? "text-indigo-500" : "text-gray-500"}`}
+      >
         {props.description}
       </div>
     </div>

package/UI/Components/GanttChart/Rows.tsx

@@ -10,6 +10,7 @@ export interface ComponentProps {
   selectedBarIds: string[];
   onBarSelectChange: (barIds: string[]) => void;
   multiSelect?: boolean | undefined;
+  highlightBarIds?: string[];
 }
 
 const Rows: FunctionComponent<ComponentProps> = (
@@ -28,9 +29,14 @@ const Rows: FunctionComponent<ComponentProps> = (
         chartTimelineEnd={props.chartTimelineEnd}
         timelineWidth={props.timelineWidth}
         row={row}
-        multiSelect={props.multiSelect}
         selectedBarIds={props.selectedBarIds}
         onBarSelectChange={props.onBarSelectChange}
+        {...(props.multiSelect !== undefined
+          ? { multiSelect: props.multiSelect }
+          : {})}
+        {...(props.highlightBarIds
+          ? { highlightBarIds: props.highlightBarIds }
+          : {})}
       />
     );
   };