c546a33eff
This commit introduces native operating system file dialogs in the desktop application replacing the existing web-based dialogs. It lays the foundation for future enhancements such as: - Providing error messages when saving or executing files, addressing #264. - Creating system restore points, addressing #50. Documentation updates: - Update `desktop-vs-web-features.md` with added functionality. - Update `README.md` with security feature highlights. - Update home page documentation to emphasize security features. Other supporting changes include: - Integrate IPC communication channels for secure Electron dialog API interactions. - Refactor `IpcRegistration` for more type-safety and simplicity. - Introduce a Vue hook to encapsulate dialog functionality. - Improve errors during IPC registration for easier troubleshooting. - Move `ClientLoggerFactory` for consistency in hooks organization and remove `LoggerFactory` interface for simplicity. - Add tests for the save file dialog in the browser context. - Add `Blob` polyfill in tests to compensate for the missing `blob.text()` function in `jsdom` (see jsdom/jsdom#2555). Improve environment detection logic: - Treat test environment as browser environments to correctly activate features based on the environment. This resolves issues where the environment is misidentified as desktop, but Electron preloader APIs are missing. - Rename `isDesktop` environment identification variable to `isRunningAsDesktopApplication` for better clarity and to avoid confusion with desktop environments in web/browser/test environments. - Simplify `BrowserRuntimeEnvironment` to consistently detect non-desktop application environments. - Improve environment detection for Electron main process (electron/electron#2288).
84 lines
2.6 KiB
Vue
84 lines
2.6 KiB
Vue
<template>
|
|
<div>
|
|
<IconButton
|
|
:text="isRunningAsDesktopApplication ? 'Save' : 'Download'"
|
|
:icon-name="isRunningAsDesktopApplication ? 'floppy-disk' : 'file-arrow-down'"
|
|
@click="saveCode"
|
|
/>
|
|
<ModalDialog v-if="instructions" v-model="areInstructionsVisible">
|
|
<InstructionList :data="instructions" />
|
|
</ModalDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {
|
|
defineComponent, ref, computed,
|
|
} from 'vue';
|
|
import { injectKey } from '@/presentation/injectionSymbols';
|
|
import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
|
|
import { ScriptingLanguage } from '@/domain/ScriptingLanguage';
|
|
import { IScriptingDefinition } from '@/domain/IScriptingDefinition';
|
|
import { ScriptFileName } from '@/application/CodeRunner/ScriptFileName';
|
|
import { FileType } from '@/presentation/common/Dialog';
|
|
import IconButton from '../IconButton.vue';
|
|
import InstructionList from './Instructions/InstructionList.vue';
|
|
import { IInstructionListData } from './Instructions/InstructionListData';
|
|
import { getInstructions } from './Instructions/InstructionListDataFactory';
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
IconButton,
|
|
InstructionList,
|
|
ModalDialog,
|
|
},
|
|
setup() {
|
|
const { currentState } = injectKey((keys) => keys.useCollectionState);
|
|
const { isRunningAsDesktopApplication } = injectKey((keys) => keys.useRuntimeEnvironment);
|
|
const { dialog } = injectKey((keys) => keys.useDialog);
|
|
|
|
const areInstructionsVisible = ref(false);
|
|
const fileName = computed<string>(() => buildFileName(currentState.value.collection.scripting));
|
|
const instructions = computed<IInstructionListData | undefined>(() => getInstructions(
|
|
currentState.value.collection.os,
|
|
fileName.value,
|
|
));
|
|
|
|
async function saveCode() {
|
|
await dialog.saveFile(
|
|
currentState.value.code.current,
|
|
fileName.value,
|
|
getType(currentState.value.collection.scripting.language),
|
|
);
|
|
areInstructionsVisible.value = true;
|
|
}
|
|
|
|
return {
|
|
isRunningAsDesktopApplication,
|
|
instructions,
|
|
fileName,
|
|
areInstructionsVisible,
|
|
saveCode,
|
|
};
|
|
},
|
|
});
|
|
|
|
function getType(language: ScriptingLanguage) {
|
|
switch (language) {
|
|
case ScriptingLanguage.batchfile:
|
|
return FileType.BatchFile;
|
|
case ScriptingLanguage.shellscript:
|
|
return FileType.ShellScript;
|
|
default:
|
|
throw new Error('unknown file type');
|
|
}
|
|
}
|
|
|
|
function buildFileName(scripting: IScriptingDefinition) {
|
|
if (scripting.fileExtension) {
|
|
return `${ScriptFileName}.${scripting.fileExtension}`;
|
|
}
|
|
return ScriptFileName;
|
|
}
|
|
</script>
|