Rename with extension [Storage]

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemGridItem.tsx

@@ -15,6 +15,7 @@ import { ConnectDragPreview } from "react-dnd"
 import { Form, FormikProvider, useFormik } from "formik"
 import { nameValidator } from "../../../../../Utils/validationSchema"
 import Menu from "../../../../../UI-components/Menu"
+import { getFileNameAndExtension } from "../../../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
   return createStyles({
@@ -169,26 +170,7 @@ const FileSystemGridItem = React.forwardRef(
     const [isEditingLoading, setIsEditingLoading] = useState(false)
 
     const { fileName, extension } = useMemo(() => {
-      if (isFolder) {
-        return {
-          fileName : name,
-          extension: ""
-        }
-      }
-      const split = name.split(".")
-      const extension = `.${split[split.length - 1]}`
-
-      if (split.length === 1) {
-        return {
-          fileName : name,
-          extension: ""
-        }
-      }
-
-      return {
-        fileName: name.slice(0, name.length - extension.length),
-        extension: split[split.length - 1]
-      }
+      return getFileNameAndExtension(name, isFolder)
     }, [name, isFolder])
 
     const formik = useFormik({

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemItem.tsx

@@ -34,6 +34,7 @@ import { useMemo } from "react"
 import { nameValidator } from "../../../../../Utils/validationSchema"
 import CustomButton from "../../../../Elements/CustomButton"
 import { getIconForItem } from "../../../../../Utils/getItemIcon"
+import { getFileNameAndExtension } from "../../../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants }: CSFTheme) => {
   return createStyles({
@@ -151,30 +152,8 @@ const FileSystemItem = ({
   const { cid, name, isFolder } = file
   const inSharedFolder = useMemo(() => bucket?.type === "share", [bucket])
 
-  const {
-    fileName,
-    extension
-  } = useMemo(() => {
-    if (isFolder) {
-      return {
-        fileName : name,
-        extension: ""
-      }
-    }
-    const split = name.split(".")
-    const extension = `.${split[split.length - 1]}`
-
-    if (split.length === 1) {
-      return {
-        fileName : name,
-        extension: ""
-      }
-    }
-
-    return {
-      fileName: name.slice(0, name.length - extension.length),
-      extension: split[split.length - 1]
-    }
+  const { fileName, extension } = useMemo(() => {
+    return getFileNameAndExtension(name, isFolder)
   }, [name, isFolder])
 
   const formik = useFormik({

packages/files-ui/src/Components/Modules/FileBrowsers/views/FileSystemItem/FileSystemTableItem.tsx

@@ -20,6 +20,7 @@ import { ConnectDragPreview } from "react-dnd"
 import { Form, FormikProvider, useFormik } from "formik"
 import { nameValidator } from "../../../../../Utils/validationSchema"
 import Menu from "../../../../../UI-components/Menu"
+import { getFileNameAndExtension } from "../../../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSFTheme) => {
   const desktopGridSettings = "50px 69px 3fr 190px 100px 45px !important"
@@ -155,26 +156,7 @@ const FileSystemTableItem = React.forwardRef(
     const [isEditingLoading, setIsEditingLoading] = useState(false)
 
     const { fileName, extension } = useMemo(() => {
-      if (isFolder) {
-        return {
-          fileName : name,
-          extension: ""
-        }
-      }
-      const split = name.split(".")
-      const extension = `.${split[split.length - 1]}`
-
-      if (split.length === 1) {
-        return {
-          fileName : name,
-          extension: ""
-        }
-      }
-
-      return {
-        fileName: name.slice(0, name.length - extension.length),
-        extension: split[split.length - 1]
-      }
+      return getFileNameAndExtension(name, isFolder)
     }, [name, isFolder])
 
     const formik = useFormik({

packages/files-ui/src/Utils/Helpers.tsx

@@ -44,3 +44,26 @@ export const parseFileContentResponse = (fcr: FileContentResponse): FileSystemIt
   isFolder:
     fcr.content_type === "application/chainsafe-files-directory"
 })
+
+export const getFileNameAndExtension = (name: string, isFolder: boolean) => {
+  if (isFolder) {
+    return {
+      fileName : name,
+      extension: ""
+    }
+  }
+  const split = name.split(".")
+  const extension = `.${split[split.length - 1]}`
+
+  if (split.length === 1) {
+    return {
+      fileName : name,
+      extension: ""
+    }
+  }
+
+  return {
+    fileName: name.slice(0, name.length - extension.length),
+    extension: split[split.length - 1]
+  }
+}

packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemGridItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react"
+import React, { useCallback, useEffect, useMemo, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher } from "@chainsafe/common-theme"
 import { t } from "@lingui/macro"
 import clsx from "clsx"
@@ -7,14 +7,16 @@ import {
   IMenuItem,
   Loading,
   MenuDropdown,
-  MoreIcon
+  MoreIcon,
+  Typography
 } from "@chainsafe/common-components"
 import { CSSTheme } from "../../../Themes/types"
 import { FileSystemItem } from "../../../Contexts/StorageContext"
 import { ConnectDragPreview } from "react-dnd"
 import { Form, FormikProvider, useFormik } from "formik"
 import { nameValidator } from "../../../Utils/validationSchema"
 import { ISelectedFile } from "../../../Contexts/FileBrowserContext"
+import { getFileNameAndExtension } from "../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants, palette }: CSSTheme) => {
   return createStyles({
@@ -76,9 +78,15 @@ const useStyles = makeStyles(({ breakpoints, constants, palette }: CSSTheme) =>
     desktopRename: {
       display: "flex",
       flexDirection: "row",
+      alignItems: "center",
       "& svg": {
         width: 20,
         height: 20
+      },
+      "& > span": {
+        fontSize: 16,
+        lineHeight: "20px",
+        marginLeft: constants.generalUnit / 2
       }
     },
     dropdownIcon: {
@@ -162,13 +170,17 @@ const FileSystemGridItem = React.forwardRef(
     const { desktop } = useThemeSwitcher()
     const [isEditingLoading, setIsEditingLoading] = useState(false)
 
+    const { fileName, extension } = useMemo(() => {
+      return getFileNameAndExtension(name, isFolder)
+    }, [name, isFolder])
+
     const formik = useFormik({
       initialValues: {
-        fileName: name
+        name: fileName
       },
       validationSchema: nameValidator,
       onSubmit: (values) => {
-        const newName = values.fileName?.trim()
+        const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim()
 
         if (newName !== name && !!newName && handleRename && editingFile) {
           setIsEditingLoading(true)
@@ -243,7 +255,7 @@ const FileSystemGridItem = React.forwardRef(
               >
                 <FormikTextInput
                   className={classes.renameInput}
-                  name="fileName"
+                  name="name"
                   inputVariant="minimal"
                   onKeyDown={(event) => {
                     if (event.key === "Escape") {
@@ -256,6 +268,13 @@ const FileSystemGridItem = React.forwardRef(
                   }
                   autoFocus
                 />
+                {
+                  !isFolder && extension !== ""  && (
+                    <Typography component="span">
+                      { `.${extension}` }
+                    </Typography>
+                  )
+                }
               </Form>
             </FormikProvider>
             ) : <div className={classes.gridFolderName}>

packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react"
+import React, { useCallback, useEffect, useMemo, useRef } from "react"
 import {
   FormikTextInput,
   Typography,
@@ -29,6 +29,7 @@ import { DragTypes } from "../FilesList/DragConstants"
 import { nameValidator } from "../../../Utils/validationSchema"
 import { getPathWithFile } from "../../../Utils/pathUtils"
 import { getIconForItem } from "../../../Utils/getItemIcon"
+import { getFileNameAndExtension } from "../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ breakpoints, constants }: CSSTheme) => {
   return createStyles({
@@ -58,6 +59,22 @@ const useStyles = makeStyles(({ breakpoints, constants }: CSSTheme) => {
     renameHeader: {
       textAlign: "center"
     },
+    renameInputWrapper: {
+      display: "flex",
+      flexDirection: "row",
+      alignItems: "flex-end",
+      [breakpoints.down("md")]: {
+        margin: `${constants.generalUnit * 4.2}px 0`
+      },
+      "& > span": {
+        display: "block",
+        fontSize: 16,
+        lineHeight: "20px",
+        marginLeft: constants.generalUnit / 2,
+        marginBottom: (constants.generalUnit * 2.50),
+        transform: "translateY(50%)"
+      }
+    },
     renameFooter: {
       display: "flex",
       flexDirection: "row",
@@ -144,13 +161,21 @@ const FileSystemItem = ({
   const { desktop } = useThemeSwitcher()
   const classes = useStyles()
 
+  const { fileName, extension } = useMemo(() => {
+    return getFileNameAndExtension(name, isFolder)
+  }, [name, isFolder])
+
   const formik = useFormik({
-    initialValues: { name },
+    initialValues: { name: fileName },
     validationSchema: nameValidator,
-    onSubmit: (values: {name: string}) => {
-      const newName = values.name.trim()
+    onSubmit: (values: { name: string }) => {
+      const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim()
 
-      editingFile && newName && newName !== name && handleRename && handleRename(editingFile, newName)
+      if (newName !== name && editingFile) {
+        newName && handleRename && handleRename(editingFile, newName)
+      } else {
+        stopEditing()
+      }
     },
     enableReinitialize: true
   })
@@ -459,13 +484,22 @@ const FileSystemItem = ({
                         : <Trans>Rename file</Trans>
                     }
                   </Typography>
-                  <FormikTextInput
-                    label="Name"
-                    className={classes.renameInput}
-                    name="name"
-                    placeholder={isFolder ? t`Please enter a folder name` : t`Please enter a file name`}
-                    autoFocus
-                  />
+                  <div className={classes.renameInputWrapper}>
+                    <FormikTextInput
+                      label="Name"
+                      className={classes.renameInput}
+                      name="name"
+                      placeholder={isFolder ? t`Please enter a folder name` : t`Please enter a file name`}
+                      autoFocus
+                    />
+                    {
+                      !isFolder && extension !== ""  && (
+                        <Typography component="span">
+                          { `.${extension}` }
+                        </Typography>
+                      )
+                    }
+                  </div>
                   <footer className={classes.renameFooter}>
                     <Button
                       onClick={() => setEditingFile(undefined)}

packages/storage-ui/src/Components/Modules/FileSystemItem/FileSystemTableItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from "react"
+import React, { useCallback, useMemo, useRef, useState } from "react"
 import { makeStyles, createStyles, useThemeSwitcher, debounce, useOnClickOutside } from "@chainsafe/common-theme"
 import { t, Trans } from "@lingui/macro"
 import clsx from "clsx"
@@ -22,6 +22,7 @@ import { FileSystemItem } from "../../../Contexts/StorageContext"
 import { nameValidator } from "../../../Utils/validationSchema"
 import { ISelectedFile, useFileBrowser } from "../../../Contexts/FileBrowserContext"
 import { desktopGridSettings, mobileGridSettings } from "../FilesList/FilesList"
+import { getFileNameAndExtension } from "../../../Utils/Helpers"
 
 const useStyles = makeStyles(({ animation, breakpoints, constants, palette, zIndex }: CSSTheme) => {
   return createStyles({
@@ -74,9 +75,15 @@ const useStyles = makeStyles(({ animation, breakpoints, constants, palette, zInd
     desktopRename: {
       display: "flex",
       flexDirection: "row",
+      alignItems: "center",
       "& svg": {
         width: 20,
         height: 20
+      },
+      "& > span": {
+        fontSize: 16,
+        lineHeight: "20px",
+        marginLeft: constants.generalUnit / 2
       }
     },
     filename: {
@@ -217,11 +224,16 @@ const FileSystemTableItem = React.forwardRef(
     const formRef = useRef(null)
     const [isEditingLoading, setIsEditingLoading] = useState(false)
 
+    const { fileName, extension } = useMemo(() => {
+      return getFileNameAndExtension(name, isFolder)
+    }, [name, isFolder])
+
     const formik = useFormik({
-      initialValues: { name: name },
+      initialValues: { name: fileName },
       validationSchema: nameValidator,
       onSubmit: (values) => {
-        const newName = values.name?.trim()
+
+        const newName = extension !== "" ? `${values.name.trim()}.${extension}` : values.name.trim()
 
         if (newName !== name && !!newName && handleRename && editingFile) {
           setIsEditingLoading(true)
@@ -310,6 +322,13 @@ const FileSystemTableItem = React.forwardRef(
                   }
                   autoFocus
                 />
+                {
+                  !isFolder && extension !== "" && (
+                    <Typography component="span">
+                      { `.${extension}` }
+                    </Typography>
+                  )
+                }
               </Form>
             </FormikProvider>
             )