MARS-1167-Add-button-to-Template-view-that-pulls-and-merges-the-latest-Template-format

client/src/components/Icon/index.tsx

@@ -8,6 +8,7 @@ import {
   BsArchiveFill,
   BsArrowCounterclockwise,
   BsArrowLeftCircleFill,
+  BsArrowLeftRight,
   BsArrowRight,
   BsArrowRightCircleFill,
   BsArrowUpRight,
@@ -33,13 +34,15 @@ import {
   BsCloudDownloadFill,
   BsCollectionFill,
   BsCopy,
+  BsDashCircleFill,
   BsDatabaseFill,
   BsDiagram2Fill,
   BsEnvelope,
   BsExclamationOctagonFill,
   BsEye,
   BsEyeSlash,
   BsFileCodeFill,
+  BsFileDiffFill,
   BsFileEarmarkRichtextFill,
   BsFileTextFill,
   BsFillBookFill,
@@ -110,12 +113,14 @@ export const SYSTEM_ICONS: Record<string, IconType> = {
   check: BsCheckCircleFill,
   counter: BsCalculator,
   close: BsXLg,
+  diff: BsFileDiffFill,
   info: BsInfoCircleFill,
   file: BsFileEarmarkRichtextFill,
   search: BsSearch,
   search_query: BsBraces,
   bell: BsBellFill,
   add: BsPlusCircleFill,
+  remove: BsDashCircleFill,
   copy: BsCopy,
   edit: BsPencilFill,
   expand: BsArrowsAngleExpand,
@@ -172,6 +177,7 @@ export const SYSTEM_ICONS: Record<string, IconType> = {
   a_right: BsArrowRight,
   a_right_fill: BsArrowRightCircleFill,
   a_left_fill: BsArrowLeftCircleFill,
+  a_both: BsArrowLeftRight,
   a_both_fill: BsFillDashCircleFill,
 
   // Chevrons

client/src/components/Values/index.tsx

@@ -1202,6 +1202,25 @@ const ValueRow = (props: {
     props.onValueChange(props.value._id, valueName, valueType, valueData, props.permittedValues ? source : undefined);
   }, [valueName, valueType, valueData, source]);
 
+  // Sync local state when props change from an external source
+  useEffect(() => {
+    setValueName(props.value.name);
+    setValueType(props.value.type as IValueType);
+    setValueData(props.value.data);
+
+    // Adjust for Value sources
+    const valueSource = props.value.source ?? "column";
+    setSource(valueSource);
+    const columnMode = props.permittedValues !== undefined && valueSource === "column";
+
+    // Update Value types
+    const typeOptions: ValueTypeOption[] = columnMode
+      ? baseTypeOptions
+      : [...baseTypeOptions, { label: "Entity", value: "entity" }, { label: "Select", value: "select" }];
+    const valueType = typeOptions.find((option) => option.value === props.value.type) ?? baseTypeOptions[1];
+    setValueTypeOption(valueType);
+  }, [props.value.name, props.value.type, props.value.data, props.value.source, props.permittedValues]);
+
   /**
    * Utility function to generate default data when the `type` changes
    * @param valueType The new `IValueType` that has been selected