Feat: Added confirmation to create new file (#977)

Co-authored-by: samz <[email protected]>

apps/studio/src/components/Modals/ConfirmNewFileModal.tsx

@@ -0,0 +1,31 @@
+import { create } from '@ebay/nice-modal-react';
+import { NewFileModal } from './NewFileModal';
+import { ConfirmModal } from './ConfirmModal';
+import { show as showModal } from '@ebay/nice-modal-react';
+
+export const ConfirmNewFileModal = create(() => {
+  const onConfirm = () => {
+    showModal(NewFileModal)
+  };
+
+  return (
+    <ConfirmModal
+      containerClassName="sm:max-w-6xl"
+      title="Confirm New File"
+      confirmText="Create New File"
+      confirmDisabled={false}
+      onSubmit={onConfirm}
+    >
+      <div className="flex content-center justify-center flex-col">
+        <div className="w-full  overflow-auto">
+          <div>
+                        Would you like to create a new file?
+            <p>
+              <b className='text-pink-500'>All the existing changes will be lost and overwritten.</b>
+            </p>
+          </div>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+});

apps/studio/src/components/Modals/index.tsx

@@ -8,3 +8,4 @@ export * from './ImportBase64Modal';
 export * from './ImportURLModal';
 export * from './NewFileModal';
 export * from './RedirectedModal';
+export * from './ConfirmNewFileModal';

apps/studio/src/components/Sidebar.tsx

@@ -2,7 +2,7 @@ import { VscListSelection, VscCode, VscOpenPreview, VscGraph, VscNewFile, VscSet
 import { show as showModal } from '@ebay/nice-modal-react';
 
 import { Tooltip } from './common';
-import { SettingsModal, NewFileModal } from './Modals';
+import { SettingsModal, ConfirmNewFileModal } from './Modals';
 
 import { usePanelsState, panelsState, useDocumentsState } from '../state';
 
@@ -105,7 +105,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = () => {
       name: 'newFile',
       title: 'New file',
       isActive: false,
-      onClick: () => showModal(NewFileModal),
+      onClick: () => showModal(ConfirmNewFileModal),
       icon: <VscNewFile className="w-5 h-5" />,
       tooltip: 'New file',
       enabled: true