Web: Client: Profile: File management. added toggler for display file extension

packages/client/public/locales/en/FilesSettings.json

@@ -4,6 +4,7 @@
   "DisplayNotification": "Display notification when moving items to Trash",
   "DisplayRecent": "Display Recent",
   "DisplayTemplates": "Display Templates",
+  "DisplayFileExtension": "Display file extension next to file name",
   "IntermediateVersion": "Keep all saved intermediate versions",
   "KeepIntermediateVersion": "Keep intermediate versions when editing",
   "OpenSameTab": "Open {{organizationName}} editor in same tab",

packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js

@@ -64,6 +64,9 @@ const FileManagement = ({
 
   openEditorInSameTab,
   setOpenEditorInSameTab,
+
+  displayFileExtension,
+  setDisplayFileExtension,
 }) => {
   const { t, ready } = useTranslation(["FilesSettings", "Common"]);
 
@@ -90,6 +93,10 @@ const FileManagement = ({
     setKeepNewFileName(!keepNewFileName);
   }, [setKeepNewFileName, keepNewFileName]);
 
+  const onChangeDisplayFileExtension = React.useCallback(() => {
+    setDisplayFileExtension(!displayFileExtension);
+  }, [setDisplayFileExtension, displayFileExtension]);
+
   const onChangeOpenEditorInSameTab = React.useCallback(() => {
     setOpenEditorInSameTab(!openEditorInSameTab);
   }, [setOpenEditorInSameTab, openEditorInSameTab]);
@@ -174,6 +181,16 @@ const FileManagement = ({
             </Text>
           </div>
         )}
+        {!isVisitor && (
+          <div className="toggle-btn-wrapper">
+            <ToggleButton
+              className="display-file-extension toggle-btn"
+              onChange={onChangeDisplayFileExtension}
+              isChecked={displayFileExtension}
+            />
+            <Text>{t("DisplayFileExtension")}</Text>
+          </div>
+        )}
       </Box>
 
       {/* <Box className="settings-section">
@@ -256,6 +273,9 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => {
 
     openEditorInSameTab,
     setOpenEditorInSameTab,
+
+    displayFileExtension,
+    setDisplayFileExtension,
   } = filesSettingsStore;
 
   const { myFolderId, commonFolderId } = treeFoldersStore;
@@ -290,5 +310,8 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => {
 
     openEditorInSameTab,
     setOpenEditorInSameTab,
+
+    displayFileExtension,
+    setDisplayFileExtension,
   };
 })(observer(FileManagement));

packages/client/src/store/FilesSettingsStore.js

@@ -71,6 +71,7 @@ class FilesSettingsStore {
   chunkUploadSize = 1024 * 1023; // 1024 * 1023; //~0.999mb
   maxUploadThreadCount = 15;
   maxUploadFilesCount = 5;
+  displayFileExtension = null;
 
   settingsIsLoaded = false;
 
@@ -214,6 +215,11 @@ class FilesSettingsStore {
       .then((res) => this.setFilesSetting("keepNewFileName", res));
   };
 
+  setDisplayFileExtension = (data) => {
+    this.setFilesSetting("displayFileExtension", data ? true : false);
+    console.log("need backend");
+  };
+
   setOpenEditorInSameTab = (data) => {
     api.files
       .changeOpenEditorInSameTab(data)