Added shell documentation

docs/user-guide/shell.md

@@ -0,0 +1,15 @@
+---
+title: Shell
+summary: "Write and execute MongoDB shell scripts within Rolens"
+parent: User guide
+order: 60
+stub: true
+---
+
+Rolens has a shell feature: it provides an editor for writing shell scripts and executing them against a local or external host, database, or even a single collection. You can find it under the _Shell_ tab.
+
+![The shell tab](/images/shell.png)
+
+## Requirements
+
+To use the script editor, you need to install the official [`mongosh` tool](https://www.mongodb.com/docs/mongodb-shell/) from MongoDB. You can [download it](https://www.mongodb.com/try/download/shell) from the MongoDB web site, or run `brew install mongosh` if you use a Mac.

frontend/src/components/icon.svelte

@@ -29,12 +29,16 @@
     height: 13px;
     margin-right: 2px;
   }
-
   :global(.button) svg {
     height: 13px;
     width: auto;
     vertical-align: bottom;
   }
+  :global(.blankstate .button) svg {
+    height: 17px;
+    vertical-align: -3px;
+    margin-right: 4px;
+  }
 </style>
 
 <svg

frontend/src/organisms/connection/shell.svelte

@@ -2,7 +2,9 @@
   import BlankState from '$components/blankstate.svelte';
   import CodeEditor from '$components/codeeditor.svelte';
   import Icon from '$components/icon.svelte';
+  import environment from '$lib/stores/environment';
   import { OpenShellScript, SaveShellScript } from '$wails/go/app/App';
+  import { BrowserOpenURL } from '$wails/runtime/runtime';
   import { javascript } from '@codemirror/lang-javascript';
   import { onDestroy, onMount } from 'svelte';
 
@@ -22,6 +24,10 @@
   let editor;
 
   async function runScript() {
+    if (!$environment.hasMongoDump) {
+      return;
+    }
+
     busy = true;
 
     if (collection) {
@@ -77,6 +83,10 @@
     horizontal = !horizontal;
   }
 
+  function openMongoshInstallDocs() {
+    BrowserOpenURL('https://garraflavatra.github.io/rolens/user-guide/shell/');
+  }
+
   $: visible && editor.focus();
 
   onMount(() => {
@@ -108,7 +118,17 @@
   </div>
 
   <div class="output">
-    {#if busy}
+    {#if !$environment.hasMongoShell}
+      <BlankState
+        title="mongosh is required to run shell scripts"
+        label="Please refer to the documentation for more information."
+        icon="!"
+      >
+        <button class="button" on:click={openMongoshInstallDocs}>
+          <Icon name="info" /> Read the documentation
+        </button>
+      </BlankState>
+    {:else if busy}
       <BlankState icon="loading" label="Executing…" />
     {:else if result.errorTitle || result.errorDescription}
       <BlankState title={result.errorTitle} label={result.errorDescription} icon="!">