Merge pull request #30 from ozkeisar/disable-filename-field

disable filename field

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "",
   "keywords": [
     "electron",

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "Mockingbird",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "",
   "license": "MIT",
   "author": {

src/renderer/components/dialogs/parentDialog/parentDialog.tsx

@@ -4,7 +4,7 @@ import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import Typography from '@mui/material/Typography';
 import { v4 as uuid } from 'uuid';
@@ -29,11 +29,12 @@ import {
   RouteParent,
 } from '../../../../types';
 import styles from './parentDialog.module.css';
-import { formatFileName } from '../../../../utils/utils';
+import { formatToValidFilename } from '../../../../utils/utils';
 import { isParentExist, parentsProperties } from '../../../../utils/parent';
 
 const METHODS: GraphQlRouteType[] = ['Query', 'Mutation'];
 
+
 type Props = {
   onClose: Function;
   open: boolean;
@@ -62,6 +63,12 @@ export function ParentDialog({
   const isEdit = !!data?.id;
   const isGraphQl = type === 'GraphQl';
 
+  useEffect(()=>{
+    if(!isEdit){
+      setFilename(formatToValidFilename(isGraphQl ? name :restPath))
+    }
+  }, [isEdit, restPath, name, isGraphQl])
+
 
   const {  
     filenames,
@@ -162,13 +169,6 @@ export function ParentDialog({
 
   const handleNameChanged = (e: any) => {
     setName(e.target.value);
-
-    if (
-      (filename.length === 0 || e.target.value.includes(filename)) &&
-      !isEdit
-    ) {
-      setFilename(formatFileName(e.target.value));
-    }
   };
 
   const handleSchemaPathChanged = (e: any) => {
@@ -177,13 +177,6 @@ export function ParentDialog({
 
   const handleRestPathChanged = (e: any) => {
     setRestPath(e.target.value);
-
-    if (
-      (!isEdit && filename.length === 0) ||
-      e.target.value.includes(filename)
-    ) {
-      setFilename(formatFileName(e.target.value));
-    }
   };
 
   const handleServerChange = (event: SelectChangeEvent) => {
@@ -359,8 +352,8 @@ export function ParentDialog({
         </div>
         {type === 'Rest' ? renderRestType() : renderGraphQlType()}
         <TextField
-          disabled={isEdit}
-          value={filename}
+          disabled
+          value={filename + '.json'}
           required
           margin="dense"
           id="filename"
@@ -369,14 +362,6 @@ export function ParentDialog({
           type="text"
           fullWidth
           variant="outlined"
-          onChange={(e) => {
-            if (
-              isValidFilename(e.target.value) ||
-              e.target.value.length === 0
-            ) {
-              setFilename(e.target.value);
-            }
-          }}
           error={!!filenameAlreadyExist}
         />
         {!!filenameAlreadyExist && (

src/renderer/components/dialogs/presetFolderDialog/presetFolderDialog.tsx

@@ -12,13 +12,13 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import { PresetsFolder } from '../../../../types';
 import {
   emitSocketEvent,
-  isValidFilename,
   reportButtonClick,
   socket,
 } from '../../../utils';
 import { useProjectStore } from '../../../state/project';
 import { EVENT_KEYS } from '../../../../types/events';
 import { BUTTONS } from '../../../../consts/analytics';
+import { formatToValidFilename } from '../../../../utils/utils';
 
 type Props = {
   onClose: Function;
@@ -49,6 +49,12 @@ export function PresetFolderDialog({ onClose, open, data }: Props) {
   const filenameAlreadyExist =
     existingFilenames?.includes(filename) && data?.filename !== filename;
 
+  useEffect(()=>{
+    if(!isEdit){
+      setFilename(formatToValidFilename(name))
+    }
+  }, [isEdit, name])
+
   useEffect(() => {
     const onEvent = (arg: any) => {
       setIsLoading(false);
@@ -116,8 +122,8 @@ export function PresetFolderDialog({ onClose, open, data }: Props) {
         )}
 
         <TextField
-          disabled={isEdit}
-          value={filename}
+          disabled
+          value={filename + '.json'}
           required
           margin="dense"
           id="filename"
@@ -126,11 +132,6 @@ export function PresetFolderDialog({ onClose, open, data }: Props) {
           type="text"
           fullWidth
           variant="outlined"
-          onChange={(e) => {
-            if (isValidFilename(e.target.value) || !e.target.value.length) {
-              setFilename(e.target.value);
-            }
-          }}
           error={!!filenameAlreadyExist}
         />
         {!!filenameAlreadyExist && (

src/renderer/index.tsx

@@ -3,14 +3,15 @@ import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import * as amplitude from '@amplitude/analytics-browser';
 import App from './App';
+import pj from './../../package.json'
 
 const isDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';
 
 amplitude.init(
   isDev
     ? '16543070a2c829f8a27f46c21fc0f708'
     : 'ed51d61371d63ef1136b842900ebdae',
-);
+ {appVersion: pj.version});
 
 loader.config({ monaco });
 

src/utils/utils.ts

@@ -1,3 +1,6 @@
+import { v4 as uuid } from 'uuid';
+
+
 export function removeParameters(input: string | null): string | null {
   if (!input) {
     return input;
@@ -53,3 +56,35 @@ export const formatFileName = (input: string): string => {
   return truncatedFileName;
 };
 
+
+export function formatToValidFilename(input: string): string {
+  // List of invalid characters for Windows filenames
+  const invalidWindowsChars = /[<>:"/\\|?*\x00-\x1F]/g;
+  // macOS only disallows the ":" character
+  const invalidMacChars = /[:]/g;
+
+  // Replace invalid characters with underscores, except for the first and last characters
+  let sanitized = input.replace(invalidWindowsChars, '_').replace(invalidMacChars, '_');
+
+  // Remove any invalid characters if they are at the beginning or end
+  sanitized = sanitized.replace(/^[_]+|[_]+$/g, '');
+
+  // Trim whitespace from the start and end
+  sanitized = sanitized.trim();
+
+  // Ensure filename is not empty
+  if (sanitized === '' || sanitized === '.' || sanitized === '..') {
+      sanitized = 'untitled';
+  }
+
+  // Add a unique identifier (UUID) to the end of the filename
+  const uniqueSuffix = uuid().split('-')[0]; // Use only the first part of the UUID for brevity
+  sanitized = `${sanitized}_${uniqueSuffix}`;
+
+  // Limit the filename length to 255 characters minus the length of the unique suffix and underscore
+  if (sanitized.length > 255) {
+      sanitized = sanitized.substring(0, 255 - uniqueSuffix.length - 1) + `_${uniqueSuffix}`;
+  }
+
+  return sanitized;
+}