Revert "SY-1141 Remove Edit Range from Create Range Modal (#803)" (#825)

This reverts commit e26e6c1.

.github/PULL_REQUEST_TEMPLATE/rc.md

@@ -109,57 +109,35 @@ I can successfully:
 
 I can successfully:
 
-- [ ] Create Range Modal
-  - [ ] Create a new local range.
-  - [ ] Create a new persisted range.
-  - [ ] Set parent range
-  - [ ] Add labels
-  - [ ] Rename existing range
-  - [ ] Change times on existing range
-- [ ] Range Layout
-  - [ ] Rename range.
-  - [ ] Rename range from tab.
-  - [ ] Change start and end times.
-  - [ ] Add labels.
-  - [ ] Set metadata.
-  - [ ] Delete metadata.
-  - [ ] Add child ranges.
-  - [ ] Open snapshots.
-  - [ ] Navigate to and from child ranges
-- [ ] Search and Command Palette
-  - [ ] Open an existing range window
-  - [ ] Open create range dialog
-- [ ] Range Toolbar
-  - [ ] Open create range modal from toolbar link when no range exists
-  - [ ] Switch the active range by clicking
-  - [ ] Context Menu
-    - [ ] Open create range modal
-    - [ ] Rename range
-    - [ ] Set active range
-    - [ ] Open create range modal with child range
-    - [ ] Add to active line plot
-    - [ ] Add to new line plot
-    - [ ] Remove from range toolbar
-    - [ ] Delete persisted range
-    - [ ] Copy link of persisted range
-    - [ ] Save local range to Synnax
-- [ ] Resources Toolbar
-  - [ ] Open the range overview dialog by clicking on a range
-  - [ ] Context Menu
-    - [ ] Set active range
-    - [ ] Rename range
-    - [ ] Open create range modal with child range
-    - [ ] Group ranges
-    - [ ] Add to active line plot
-    - [ ] Add multiple ranges to active line plot
-    - [ ] Add to new line plot
-    - [ ] Add multiple ranges to new line plot
-    - [ ] Delete range
-    - [ ] Delete multiple ranges
-    - [ ] Copy link to range
-- [ ] Open a range from its url
-- [ ] Make changes to a range with resources toolbar, overview, and ranges toolbar open
-      and see changes propagate to all three.
+- [ ] Open create range dialog from command search bar.
+- [ ] Open create range dialog from range toolbar.
+- [ ] Open create range dialog from context menu in range toolbar.
+- [ ] Create a new local range.
+- [ ] Create a new persisted range.
+- [ ] Set a parent range for a range.
+- [ ] Attach labels to a range.
+- [ ] Open the range overview dialog from the resources view.
+- [ ] Edit range properties from the overview dialog.
+- [ ] Edit meta-data properties on the range.
+- [ ] Add child ranges to a range.
+- [ ] Navigate to and from child ranges on a range.
+- [ ] Make a change to the range in the edit dialog and see the changes propagate to the
+      overview dialog.
+- [ ] Save a local range to Synnax in the range toolbar.
+- [ ] Switch the active range in the range toolbar.
+- [ ] Load a local range from the search bar.
+- [ ] Load a persisted range from the search bar.
+- [ ] Rename a range from the range toolbar.
+- [ ] Edit a range from the range toolbar.
+- [ ] Remove a range from the range toolbar.
+- [ ] Delete a persisted range from the range toolbar.
+- [ ] Delete a range in the resources view.
+- [ ] Delete multiple ranges in the resources view.
+- [ ] Set a range as an active range from the resources view.
+- [ ] Edit a range from the resources view.
+- [ ] Add a range to a plot from the resources view.
+- [ ] Copy a link to a range and open it from the resources view.
+- [ ] Rename a range from the range toolbar.
 
 ### Channels
 

console/src/lineplot/LinePlot.tsx

@@ -328,7 +328,7 @@ const Loaded = ({ layoutKey }: { layoutKey: string }): ReactElement => {
           break;
         case "range":
           placer(
-            Range.createLayout({
+            Range.createEditLayout({
               initial: {
                 timeRange: {
                   start: Number(timeRange.start.valueOf()),

console/src/range/CreateLayout.css → console/src/range/EditLayout.css

@@ -9,7 +9,7 @@
  * included in the file licenses/APL.txt.
  */
 
-.console-range-create-layout {
-    padding-top: 2rem;
+.console-range-edit-layout {
+    padding-top: 2rem;    
     height: 100%;
-}
+}

console/src/range/CreateLayout.tsx → console/src/range/EditLayout.tsx

@@ -7,25 +7,31 @@
 // License, use of this software will be governed by the Apache License, Version 2.0,
 // included in the file licenses/APL.txt.
 
-import "@/range/CreateLayout.css";
+import "@/range/EditLayout.css";
 
-import { ontology, type ranger, TimeRange, TimeStamp } from "@synnaxlabs/client";
-import { Icon } from "@synnaxlabs/media";
+import {
+  ontology,
+  ranger,
+  TimeRange,
+  TimeStamp,
+  UnexpectedError,
+} from "@synnaxlabs/client";
+import { Icon, Logo } from "@synnaxlabs/media";
 import {
   Align,
   Button,
   Form,
   Icon as PIcon,
-  Input,
   Nav,
   Ranger,
   Status,
   Synnax,
   Text,
   Triggers,
 } from "@synnaxlabs/pluto";
+import { Input } from "@synnaxlabs/pluto/input";
 import { deep, primitiveIsZero } from "@synnaxlabs/x";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery } from "@tanstack/react-query";
 import { type ReactElement, useCallback, useRef } from "react";
 import { useDispatch } from "react-redux";
 import { v4 as uuidv4 } from "uuid";
@@ -34,6 +40,7 @@ import { z } from "zod";
 import { CSS } from "@/css";
 import { Label } from "@/label";
 import { Layout } from "@/layout";
+import { useSelect } from "@/range/selectors";
 import { add } from "@/range/slice";
 
 const formSchema = z.object({
@@ -44,31 +51,29 @@ const formSchema = z.object({
   parent: z.string().optional(),
 });
 
-type FormProps = z.infer<typeof formSchema>;
-
-type Args = Partial<FormProps>;
+type Args = Partial<z.infer<typeof formSchema>>;
 
-export const CREATE_LAYOUT_TYPE = "editRange";
+export const EDIT_LAYOUT_TYPE = "editRange";
 
 const SAVE_TRIGGER: Triggers.Trigger = ["Control", "Enter"];
 
-interface CreateLayoutProps extends Partial<Layout.State> {
+interface CreateEditLayoutProps extends Partial<Layout.State> {
   initial?: Partial<Args>;
 }
 
-export const createLayout = ({
+export const createEditLayout = ({
   name,
   initial = {},
   window,
   ...rest
-}: CreateLayoutProps): Layout.State => ({
+}: CreateEditLayoutProps): Layout.State => ({
   ...rest,
-  key: CREATE_LAYOUT_TYPE,
-  type: CREATE_LAYOUT_TYPE,
-  windowKey: CREATE_LAYOUT_TYPE,
+  key: EDIT_LAYOUT_TYPE,
+  type: EDIT_LAYOUT_TYPE,
+  windowKey: EDIT_LAYOUT_TYPE,
   icon: "Range",
   location: "modal",
-  name: name ?? "Range.Create",
+  name: name ?? (initial.key != null ? "Range.Edit" : "Range.Create"),
   window: {
     resizable: false,
     size: { height: 370, width: 700 },
@@ -78,55 +83,99 @@ export const createLayout = ({
   args: initial,
 });
 
+type DefineRangeFormProps = z.infer<typeof formSchema>;
+
 const parentRangeIcon = (
   <PIcon.Icon bottomRight={<Icon.Arrow.Up />}>
     <Icon.Range />
   </PIcon.Icon>
 );
 
-export const Create = (props: Layout.RendererProps): ReactElement => {
+export const Edit = (props: Layout.RendererProps): ReactElement => {
   const { layoutKey } = props;
   const now = useRef(Number(TimeStamp.now().valueOf())).current;
   const args = Layout.useSelectArgs<Args>(layoutKey);
-  const initialValues: FormProps = {
-    name: "",
-    labels: [],
-    timeRange: { start: now, end: now },
-    parent: "",
-    ...args,
-  };
-
-  return <CreateLayoutForm initialValues={initialValues} {...props} />;
+  const range = useSelect(args.key);
+  const client = Synnax.use();
+  const isCreate = args.key == null;
+  const isEdit = !isCreate && (range == null || range.persisted);
+  const initialValues = useQuery<DefineRangeFormProps>({
+    queryKey: ["range-edit", args],
+    queryFn: async () => {
+      if (isCreate)
+        return {
+          name: "",
+          labels: [],
+          timeRange: { start: now, end: now },
+          parent: "",
+          ...args,
+        };
+      if (range == null || range.persisted) {
+        const key = args.key as string;
+        if (client == null) throw new UnexpectedError("Client is not available");
+        const rng = await client.ranges.retrieve(key);
+        const parent = await rng.retrieveParent();
+        const labels = await rng.labels();
+        return {
+          key: rng.key,
+          name: rng.name,
+          timeRange: rng.timeRange.numeric,
+          labels: labels.map((l) => l.key),
+          parent: parent?.key ?? "",
+        };
+      }
+      if (range.variant !== "static") throw new UnexpectedError("Range is not static");
+      return {
+        key: range.key,
+        name: range.name,
+        timeRange: range.timeRange,
+        labels: [],
+        parent: "",
+      };
+    },
+  });
+  if (initialValues.isPending) return <Logo.Watermark variant="loader" />;
+  if (initialValues.isError) throw initialValues.error;
+  return (
+    <EditLayoutForm
+      isRemoteEdit={isEdit}
+      initialValues={initialValues.data}
+      {...props}
+    />
+  );
 };
 
-interface CreateLayoutFormProps extends Layout.RendererProps {
-  initialValues: FormProps;
+interface EditLayoutFormProps extends Layout.RendererProps {
+  initialValues: DefineRangeFormProps;
+  isRemoteEdit: boolean;
   onClose: () => void;
 }
 
-const CreateLayoutForm = ({
+const EditLayoutForm = ({
   initialValues,
+  isRemoteEdit,
   onClose,
-}: CreateLayoutFormProps): ReactElement => {
+}: EditLayoutFormProps): ReactElement => {
   const methods = Form.use({ values: deep.copy(initialValues), schema: formSchema });
   const dispatch = useDispatch();
   const client = Synnax.use();
-  const clientExists = client != null;
   const addStatus = Status.useAggregator();
+  const isCreate = initialValues.key == null;
 
   const { mutate, isPending } = useMutation({
-    mutationFn: async (persisted: boolean) => {
+    mutationFn: async (persist: boolean) => {
       if (!methods.validate()) return;
       const values = methods.value();
-      const { timeRange: tr, parent } = values;
+      const { timeRange: tr, parent } = methods.value();
       const timeRange = new TimeRange(tr);
       const name = values.name.trim();
-      const key = initialValues.key ?? uuidv4();
+      const key = isCreate ? uuidv4() : (initialValues.key as string);
+      const persisted = persist || isRemoteEdit;
       const parentID = primitiveIsZero(parent)
         ? undefined
         : new ontology.ID({ key: parent as string, type: "range" });
       const otgID = new ontology.ID({ key, type: "range" });
-      if (persisted && clientExists) {
+      if (persisted && client != null) {
         await client.ranges.create({ key, name, timeRange }, { parent: parentID });
         await client.labels.label(otgID, values.labels, { replace: true });
       }
@@ -149,7 +198,7 @@ const CreateLayoutForm = ({
   );
 
   return (
-    <Align.Space className={CSS.B("range-create-layout")} grow empty>
+    <Align.Space className={CSS.B("range-edit-layout")} grow empty>
       <Align.Space
         className="console-form"
         justify="center"
@@ -178,7 +227,11 @@ const CreateLayoutForm = ({
             </Form.Field>
           </Align.Space>
           <Align.Space direction="x">
-            <Form.Field<string> path="parent" visible padHelpText={false}>
+            <Form.Field<string>
+              path="parent"
+              visible={isCreate || isRemoteEdit}
+              padHelpText={false}
+            >
               {({ onChange, ...p }) => (
                 <Ranger.SelectSingle
                   dropdownVariant="modal"
@@ -231,26 +284,16 @@ const CreateLayoutForm = ({
         <Nav.Bar.Start size="small">
           <Triggers.Text shade={7} level="small" trigger={SAVE_TRIGGER} />
           <Text.Text shade={7} level="small">
-            To Save to Synnax
+            To Save
           </Text.Text>
         </Nav.Bar.Start>
         <Nav.Bar.End>
-          <Button.Button
-            variant={"outlined"}
-            onClick={() => mutate(false)}
-            disabled={isPending}
-          >
-            Save Locally
-          </Button.Button>
           <Button.Button
             onClick={() => mutate(true)}
-            disabled={!clientExists || isPending}
-            tooltip={clientExists ? "Save to Cluster" : "No Cluster Connected"}
-            tooltipLocation="bottom"
-            loading={isPending}
+            disabled={isPending}
             triggers={[SAVE_TRIGGER]}
           >
-            Save to Synnax
+            Save
           </Button.Button>
         </Nav.Bar.End>
       </Layout.BottomNavBar>