CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/frontend/compute/cloud-filesystem/edit-mountpoint.tsx
Views: 687
1
import { Button, Input, Modal, Spin } from "antd";

2
import { useState } from "react";

3


4
import ShowError from "@cocalc/frontend/components/error";

5
import { Icon } from "@cocalc/frontend/components/icon";

6
import { CancelText } from "@cocalc/frontend/i18n/components";

7
import type { CloudFilesystem } from "@cocalc/util/db-schema/cloud-filesystems";

8
import { editCloudFilesystem } from "./api";

9
import { editModalStyle } from "./util";

10


11
interface Props {

12
  cloudFilesystem: CloudFilesystem;

13
  open?: boolean;

14
  setOpen;

15
  refresh;

16
}

17


18
// Edit the mountpoint of a cloud file system

19
export default function EditMountpoint({

20
  cloudFilesystem,

21
  open,

22
  setOpen,

23
  refresh,

24
}: Props) {

25
  const [changing, setChanging] = useState<boolean>(false);

26
  const [error, setError] = useState<string>("");

27
  const [mountpoint, setMountpoint] = useState<string>(

28
    cloudFilesystem.mountpoint,

29
  );

30


31
  const doEditMountpoint = async () => {

32
    if (cloudFilesystem.mountpoint == mountpoint) {

33
      // no op

34
      setOpen(false);

35
      return;

36
    }

37
    try {

38
      setChanging(true);

39
      await editCloudFilesystem({

40
        id: cloudFilesystem.id,

41
        mountpoint,

42
      });

43
      refresh();

44
      setOpen(false);

45
    } catch (err) {

46
      setError(`${err}`);

47
    } finally {

48
      setChanging(false);

49
    }

50
  };

51


52
  return (

53
    <Modal

54
      styles={{ body: editModalStyle(cloudFilesystem) }}

55
      centered

56
      title={

57
        <>

58
          <Icon name={"folder-open"} /> Edit Mountpoint of "

59
          {cloudFilesystem.title}"

60
        </>

61
      }

62
      open={open}

63
      onCancel={() => setOpen(false)}

64
      footer={[

65
        <Button key="cancel" onClick={() => setOpen(false)}>

66
          <CancelText />

67
        </Button>,

68
        <Button

69
          key="ok"

70
          type="primary"

71
          disabled={changing || cloudFilesystem.mountpoint == mountpoint}

72
          onClick={doEditMountpoint}

73
        >

74
          Change Mountpoint{" "}

75
          {changing ? <Spin style={{ marginLeft: "15px" }} /> : undefined}

76
        </Button>,

77
      ]}

78
    >

79
      Mount at <code>~/{mountpoint}</code> on all compute servers.

80
      <Input

81
        onPressEnter={doEditMountpoint}

82
        style={{ width: "100%", marginTop: "10px" }}

83
        value={mountpoint}

84
        onChange={(e) => setMountpoint(e.target.value)}

85
      />

86
      <ShowError error={error} setError={setError} />

87
    </Modal>

88
  );

89
}

90


91