import-export wizard design

packages/api/src/controllers/runners.js

@@ -12,6 +12,7 @@ const dbgateApi = require(process.env.DBGATE_API || "@dbgate/api");
 require=null;
 async function run() {
 ${script}
+console.log('Finished job script');
 }
 dbgateApi.runScript(run);
 `;

packages/web/src/modals/ImportExportModal.js

@@ -21,9 +21,10 @@ import PreviewDataGrid from '../impexp/PreviewDataGrid';
 import useSocket from '../utility/SocketProvider';
 import LoadingInfo from '../widgets/LoadingInfo';
 import { FontIcon } from '../icons';
+import LargeButton from '../widgets/LargeButton';
 
 const headerHeight = '60px';
-const footerHeight = '60px';
+const footerHeight = '100px';
 
 const OutputContainer = styled.div`
   position: relative;
@@ -84,6 +85,7 @@ const Footer = styled.div`
 
 const FooterButtons = styled.div`
   margin: 15px;
+  display: flex;
 `;
 
 function GenerateSctriptButton({ modalState }) {
@@ -103,7 +105,23 @@ function GenerateSctriptButton({ modalState }) {
     modalState.close();
   };
 
-  return <FormStyledButton type="button" value="Generate script" onClick={handleGenerateScript} />;
+  return (
+    <LargeButton icon="img sql-file" onClick={handleGenerateScript}>
+      Generate script
+    </LargeButton>
+  );
+}
+
+function RunButton() {
+  const { submitForm } = useFormikContext();
+  const handleSubmit = () => {
+    submitForm();
+  };
+  return (
+    <LargeButton onClick={handleSubmit} icon="icon run">
+      Run
+    </LargeButton>
+  );
 }
 
 export default function ImportExportModal({
@@ -146,6 +164,8 @@ export default function ImportExportModal({
 
   const handleExecute = async (values) => {
     if (busy) return;
+    
+    setBusy(true);
     const script = await createImpExpScript(values);
 
     setExecuteNumber((num) => num + 1);
@@ -154,7 +174,6 @@ export default function ImportExportModal({
     const resp = await axios.post('runners/start', { script });
     runid = resp.data.runid;
     setRunnerId(runid);
-    setBusy(true);
     if (values.targetStorageType == 'archive') {
       refreshArchiveFolderRef.current = values.targetArchiveFolder;
     } else {
@@ -208,12 +227,16 @@ export default function ImportExportModal({
           <Footer theme={theme}>
             <FooterButtons>
               {busy ? (
-                <FormStyledButton type="button" value="Cancel" onClick={handleCancel} />
+                <LargeButton icon="icon close" onClick={handleCancel}>
+                  Cancel
+                </LargeButton>
               ) : (
-                <FormStyledButton type="submit" value="Run" />
+                <RunButton />
               )}
               <GenerateSctriptButton modalState={modalState} />
-              <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+              <LargeButton onClick={modalState.close} icon="icon close">
+                Close
+              </LargeButton>
             </FooterButtons>
           </Footer>
         </StyledForm>

packages/web/src/widgets/LargeButton.js

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { FontIcon } from '../icons';
+import dimensions from '../theme/dimensions';
+import useTheme from '../theme/useTheme';
+
+const ButtonDiv = styled.div`
+  padding: 5px 15px;
+  color: ${(props) => props.theme.main_font1};
+  border: 1px solid ${(props) => props.theme.border};
+  width: 120px;
+  height: 60px;
+  background-color: ${(props) => props.theme.toolbar_background};
+
+  ${(props) =>
+    !props.disabled &&
+    `
+  &:hover {
+    background-color: ${props.theme.toolbar_background2} ;
+  }
+
+  &:active:hover {
+    background-color: ${props.theme.toolbar_background3};
+  }
+  `}
+
+  ${(props) =>
+    props.disabled &&
+    `
+    color: ${props.theme.main_font3};
+  `}
+`;
+
+const IconDiv = styled.div`
+  font-size: 30px;
+  text-align: center;
+`;
+
+const ButtonDivInner = styled.div`
+  text-align: center;
+`;
+
+export default function LargeButton({ children, onClick, icon = undefined, disabled = undefined }) {
+  const theme = useTheme();
+  return (
+    <ButtonDiv
+      theme={theme}
+      onClick={() => {
+        if (!disabled && onClick) onClick();
+      }}
+      disabled={disabled}
+    >
+      <IconDiv>
+        <FontIcon icon={icon} />
+      </IconDiv>
+      <ButtonDivInner>{children}</ButtonDivInner>
+    </ButtonDiv>
+  );
+}