playground: add a rename button (#669)

Signed-off-by: Ookiineko <[email protected]>

apps/website/src/components/Playground/Workspace/FileSystemManager.tsx

@@ -25,12 +25,18 @@ import { Node } from "./types";
 interface FileSystemManagerProps {
  path: string;
  nodes: Node[];
+ oldName: string;
+ newName: string;
+ renameOpen: boolean;
+ onNewNameChange: () => (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
+ onCloseRenameModal: () => () => Promise<void>;
  onFileUpload: (
  isText: boolean
  ) => (event: ChangeEvent<HTMLInputElement>) => Promise<void>;
  onDirClick: (name: string) => () => Promise<void>;
  onFileClick: (name: string) => (option: string) => Promise<void>;
  onDirCreate: (name: string) => () => Promise<void>;
+ onRename: (old_name: string, new_name: string) => () => Promise<void>;
  onRefresh: () => Promise<void>;
  onLoadSamples: () => Promise<void>;
 }
@@ -46,6 +52,7 @@ const modalStyle = {
 };
 
 export const options = [
+ { text: "Rename", key: "rename" },
  { text: "Download", key: "download" },
  { text: "Download as Text File", key: "download-text" },
  { text: "Delete", key: "delete" },
@@ -54,17 +61,23 @@ export const options = [
 export default function FileSystemManager({
  path = "/",
  nodes = [],
+ oldName = "",
+ newName = "",
+ renameOpen = false,
+ onNewNameChange = () => () => Promise.resolve(),
+ onCloseRenameModal = () => () => Promise.resolve(),
  onFileUpload = () => () => Promise.resolve(),
  onFileClick = () => () => Promise.resolve(),
  onDirClick = () => () => Promise.resolve(),
  onDirCreate = () => () => Promise.resolve(),
+ onRename = () => () => Promise.resolve(),
  onRefresh = () => Promise.resolve(),
  onLoadSamples = () => Promise.resolve(),
 }: FileSystemManagerProps) {
- const [open, setOpen] = useState(false);
+ const [newFolderOpen, setNewFolderOpen] = useState(false);
  const [dirName, setDirName] = useState("");
- const handleModalOpen = () => setOpen(true);
- const handleModalClose = () => setOpen(false);
+ const handleNewFolderModalOpen = () => setNewFolderOpen(true);
+ const handleNewFolderModalClose = () => setNewFolderOpen(false);
 
  return (
  <>
@@ -113,7 +126,7 @@ export default function FileSystemManager({
  <IconButton
  onClick={() => {
  setDirName("");
- handleModalOpen();
+ handleNewFolderModalOpen();
  }}
  aria-label="create-a-new-folder"
  size="small"
@@ -165,8 +178,8 @@ export default function FileSystemManager({
  </Stack>
  </Paper>
  <Modal
- open={open}
- onClose={handleModalClose}
+ open={newFolderOpen}
+ onClose={handleNewFolderModalClose}
  aria-labelledby="new-folder-name"
  aria-describedby="new-folder-name-description"
  >
@@ -183,12 +196,12 @@ export default function FileSystemManager({
  onChange={(event) => setDirName(event.target.value)}
  />
  <Stack direction="row" justifyContent="flex-end">
- <Button onClick={handleModalClose}>Cancel</Button>
+ <Button onClick={handleNewFolderModalClose}>Cancel</Button>
  <Button
  variant="contained"
  onClick={() => {
  onDirCreate(dirName);
- handleModalClose();
+ handleNewFolderModalClose();
  }}
  >
  Create
@@ -197,6 +210,36 @@ export default function FileSystemManager({
  </Stack>
  </Box>
  </Modal>
+ <Modal
+ open={renameOpen}
+ onClose={onCloseRenameModal()}
+ aria-labelledby="new-name"
+ aria-describedby="new-name-description"
+ >
+ <Box sx={modalStyle}>
+ <Stack spacing={4}>
+ <Typography id="modal-modal-title" variant="h6" component="h2">
+ New Name:
+ </Typography>
+ <TextField
+ id="outlined-basic"
+ label="my-file"
+ variant="outlined"
+ value={newName}
+ onChange={onNewNameChange()}
+ />
+ <Stack direction="row" justifyContent="flex-end">
+ <Button onClick={onCloseRenameModal()}>Cancel</Button>
+ <Button
+ variant="contained"
+ onClick={onRename(oldName, newName)}
+ >
+ Rename
+ </Button>
+ </Stack>
+ </Stack>
+ </Box>
+ </Modal>
  </>
  );
 }

apps/website/src/components/Playground/Workspace/index.tsx

@@ -23,6 +23,9 @@ interface WorkspaceProps {
 export default function Workspace({ ffmpeg: _ffmpeg }: WorkspaceProps) {
  const [path, setPath] = useState("/");
  const [nodes, setNodes] = useState<Node[]>([]);
+ const [oldName, setOldName] = useState("");
+ const [newName, setNewName] = useState("");
+ const [renameOpen, setRenameOpen] = useState(false);
  const [args, setArgs] = useState(defaultArgs);
  const [progress, setProgress] = useState(0);
  const [time, setTime] = useState(0);
@@ -38,6 +41,14 @@ export default function Workspace({ ffmpeg: _ffmpeg }: WorkspaceProps) {
  }
  };
 
+ const onNewNameChange = () => async (event: ChangeEvent<HTMLInputElement>) => {
+ setNewName(event.target.value);
+ };
+
+ const onCloseRenameModal = () => async () => {
+ setRenameOpen(false);
+ };
+
  const onFileUpload =
  (isText: boolean) =>
  async ({ target: { files } }: ChangeEvent<HTMLInputElement>) => {
@@ -53,6 +64,11 @@ export default function Workspace({ ffmpeg: _ffmpeg }: WorkspaceProps) {
  const onFileClick = (name: string) => async (option: string) => {
  const fullPath = `${path}/${name}`;
  switch (option) {
+ case "rename":
+ setOldName(name);
+ setNewName("");
+ setRenameOpen(true);
+ break;
  case "download":
  downloadFile(
  name,
@@ -93,6 +109,14 @@ export default function Workspace({ ffmpeg: _ffmpeg }: WorkspaceProps) {
  refreshDir(path);
  };
 
+ const onRename = (old_name: string, new_name: string) => async () => {
+ if (old_name !== "" && new_name !== "") {
+ await ffmpeg.rename(`${path}/${old_name}`, `${path}/${new_name}`);
+ }
+ setRenameOpen(false);
+ refreshDir(path);
+ };
+
  const onLoadSamples = async () => {
  for (const name of Object.keys(SAMPLE_FILES)) {
  await ffmpeg.writeFile(name, await fetchFile(SAMPLE_FILES[name]));
@@ -130,10 +154,16 @@ export default function Workspace({ ffmpeg: _ffmpeg }: WorkspaceProps) {
  <FileSystemManager
  path={path}
  nodes={nodes}
+ oldName={oldName}
+ newName={newName}
+ renameOpen={renameOpen}
+ onNewNameChange={onNewNameChange}
+ onCloseRenameModal={onCloseRenameModal}
  onFileUpload={onFileUpload}
  onFileClick={onFileClick}
  onDirClick={onDirClick}
  onDirCreate={onDirCreate}
+ onRename={onRename}
  onLoadSamples={onLoadSamples}
  onRefresh={() => refreshDir(path)}
  />