1 files changed, 87 insertions, 0 deletions
diff --git a/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
new file mode 100644
index 00000000..83b24d01
--- /dev/null
+++ b/FrontEnd/src/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+import {
+  getHttpTimelineClient,
+  HttpTimelineInfo,
+  HttpTimelinePatchRequest,
+  kTimelineVisibilities,
+  TimelineVisibility,
+} from "http/timeline";
+
+import OperationDialog from "../common/OperationDialog";
+
+export interface TimelinePropertyChangeDialogProps {
+  open: boolean;
+  close: () => void;
+  timeline: HttpTimelineInfo;
+  onChange: () => void;
+}
+
+const labelMap: { [key in TimelineVisibility]: string } = {
+  Private: "timeline.visibility.private",
+  Public: "timeline.visibility.public",
+  Register: "timeline.visibility.register",
+};
+
+const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> =
+  (props) => {
+    const { timeline, onChange } = props;
+
+    return (
+      <OperationDialog
+        title={"timeline.dialogChangeProperty.title"}
+        inputScheme={
+          [
+            {
+              type: "text",
+              label: "timeline.dialogChangeProperty.titleField",
+              initValue: timeline.title,
+            },
+            {
+              type: "select",
+              label: "timeline.dialogChangeProperty.visibility",
+              options: kTimelineVisibilities.map((v) => ({
+                label: labelMap[v],
+                value: v,
+              })),
+              initValue: timeline.visibility,
+            },
+            {
+              type: "text",
+              label: "timeline.dialogChangeProperty.description",
+              initValue: timeline.description,
+            },
+            {
+              type: "color",
+              label: "timeline.dialogChangeProperty.color",
+              initValue: timeline.color ?? null,
+              canBeNull: true,
+            },
+          ] as const
+        }
+        open={props.open}
+        close={props.close}
+        onProcess={([newTitle, newVisibility, newDescription, newColor]) => {
+          const req: HttpTimelinePatchRequest = {};
+          if (newTitle !== timeline.title) {
+            req.title = newTitle;
+          }
+          if (newVisibility !== timeline.visibility) {
+            req.visibility = newVisibility as TimelineVisibility;
+          }
+          if (newDescription !== timeline.description) {
+            req.description = newDescription;
+          }
+          const nc = newColor ?? "";
+          if (nc !== timeline.color) {
+            req.color = nc;
+          }
+          return getHttpTimelineClient()
+            .patchTimeline(timeline.name, req)
+            .then(onChange);
+        }}
+      />
+    );
+  };
+
+export default TimelinePropertyChangeDialog;