Merge pull request #1383 from kubeshop/julianne/doc/monokle/doc-updat…

…es-1.5.0-17-02-2022

Monokle Documentation Update 17/02/2022

docs/apply-and-diff.md

@@ -1,26 +1,26 @@
 # Deploying and Diffing Resources
 
-When a resource is selected in the navigator, the Editor contains "Deploy" and "Diff" buttons in the top right.
+When a resource is selected in the navigator, the Editor contains **Deploy** and **Diff** buttons in the top right.
 
 ![Deploy and Diff buttons](img/deploy-and-diff-buttons-1.5.0.png)
 
-- Selecting "Deploy" will deploy the selected resource to the currently configured Cluster. A status message will be
+- Selecting **Deploy** will deploy the selected resource to the currently configured Cluster. A status message will be
   shown in the top right after deploying.
-- Selecting "Diff" will diff the selected resource against the currently configured cluster;
+- Selecting **Diff** will diff the selected resource against the currently configured cluster;
     - If the resource does not exist in the cluster an error will be shown.
     - If the resource _does_ exist a Diff dialog will be shown.
 
-![Resource Diff](img/resource-diff-1.4.0.png)
+![Resource Diff](img/diff-tble-8-1.5.0.png)
 
 In this screenshot
 
 - The left side shows the resource in Monokle.
 - The right side shows the resource retrieved from the cluster.
 - Differences are highlighted as shown.
 
-Refreshing the diff is done with the "Refresh" button and deploying your local version of the resource to your cluster is done with "Deploy".
+Refreshing the diff is done with the **Refresh** button and deploying your local version of the resource to your cluster is done with **Deploy**.
 
-## Editing resource in Cluster Mode
+## **Editing a Resource in Cluster Mode**
 
 Monokle allows you to edit any resource viewed in [Cluster Mode](cluster-integration.md) and use the Deploy button to apply those changes back
 to the cluster. This immediately applies "hot fixes" to your cluster during browsing.

docs/architecture.md

@@ -1,4 +1,4 @@
-## Monokle Architecture
+# Monokle Architecture
 
 Monokle is an Electron desktop application built with React & TypeScript.  
 
@@ -9,15 +9,15 @@ Visuals are done using Ant Design.
 Other fairly common libraries/frameworks are used internally for common functionality (see components below).   
 
 This project was bootstrapped from
-https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder, 
+<https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder>, 
 which provides:
 - TypeScript support for Electron main process source code.
 - Hot-relaod support for Electron app.
 - Electron-builder support.
 
-See https://www.electron.build/ for more info on Electron-builder.
+See <https://www.electron.build/> for more info on Electron-builder.
 
-## Folder structure
+## **Folder Structure**
 
 - /electron : Electron main thread - contains startup code and some ipc handlers invoked from the UI.
 - /src : Root for monokle UI application - contains App.tsx, Index.tsx, etc.
@@ -29,7 +29,7 @@ See https://www.electron.build/ for more info on Electron-builder.
     - /utils : common utility functions
     - /assets : icons/images/etc
 
-## Core objects
+## **Core Objects**
 
 - Most logic revolves around [K8sResource](https://github.com/kubeshop/monokle/tree/main/src/models/k8sresource.ts) objects which "encapsulate" all 
 data associated with a parsed resource.
@@ -38,7 +38,7 @@ data associated with a parsed resource.
   changes are handled by the [main reducer](https://github.com/kubeshop/monokle/tree/main/src/redux/reducers/main.ts) 
   and corresponding [thunks](https://github.com/kubeshop/monokle/tree/main/src/redux/thunks)
 
-## Main UI Components
+## **Main UI Components**
 
 The content of most high level [organisms](https://github.com/kubeshop/monokle/tree/main/src/components/organisms) and 
 [molecules](https://github.com/kubeshop/monokle/tree/main/src/components/molecules) should be fairly self-explanatory. A few highlights:
@@ -52,7 +52,7 @@ The content of most high level [organisms](https://github.com/kubeshop/monokle/t
   K8sResources using the react-jsonschema-form component (see below), corresponding schemas/uiSchemas are 
   in the [resources/form-schemas](https://github.com/kubeshop/monokle/tree/main/resources/form-schemas) folder.
 
-## 3rd party components used
+## **3rd Party Components Used**
 
 * https://github.com/eemeli/yaml for yaml parsing.
 * https://github.com/react-monaco-editor/react-monaco-editor for source editing.
@@ -66,12 +66,12 @@ The content of most high level [organisms](https://github.com/kubeshop/monokle/t
 * https://github.com/ant-design/ant-design/ for UI.
 * https://github.com/styled-components/styled-components for custom styling.
 
-## Dev Dependencies
+## **Dev Dependencies**
 
 * https://github.com/gsoft-inc/craco for overriding CRA config for folder aliases,
   see https://www.npmjs.com/package/craco-alias#examples.
 
-## K8s Schemas
+## **K8s Schemas**
 
 Monokle currently uses the latest 1.22.1 schemas for validation and editor functionality - 
 see [this issue](https://github.com/kubeshop/monokle/issues/321) for making schema version configurable. 

docs/cluster-compare.md

@@ -13,7 +13,7 @@ To use Cluster Compare follow these steps:
 - Browse to a folder containing manifests / kustomizations / Helm charts.
 - Preview the desired kustomization or helm values file.
 - Select the desired cluster context in the Cluster tab to the left.
-- Press the "Cluster Compare" button at the top of the Resource Navigator:
+- Press the **Cluster Compare** button at the top of the Resource Navigator:
 
 ![Cluster Compare](img/cluster-compare-button-1.5.0.png)
 

docs/cluster-integration.md

@@ -7,20 +7,20 @@ Choose a cluster to work with by using the Cluster Selector:
 
 ![Clusters Tab](img/clusters-tab-1.5.0.png)
 
-If the Cluster Selector does not appear, ensure that the "Show Cluster Selector" option is checked in the Settings menu:
+If the Cluster Selector does not appear, ensure that the **Show Cluster Selector** option is checked in the Settings menu:
 
 ![Cluster Preview](img/cluster-selector-1.5.0.png)
 
-Selecting the "Load" button will attempt to populate the Resource Navigator with objects from the configured cluster:
+Selecting the **Load** button will attempt to populate the Resource Navigator with objects from the configured cluster:
 
 ![Cluster Preview](img/cluster-preview-1.5.0.png)
 
-Monokle is now in "Cluster Mode" (as indicated by the header at the top):
+Monokle is now in **Cluster Mode** (as indicated by the header at the top):
 
 ![Cluster Preview](img/cluster-preview2-1.5.0.png)
 
 - The File Explorer has been disabled if a folder had been previously selected.
 - The Navigator contains all resources retrieved from the configured cluster:
   - Resource navigation works as with files; selecting a resource shows its content in the source editor.
   - Resource links are shown as before with corresponding popups/links/etc.
-- Selecting "Exit" in the top right restores the contents of the Resource Navigator to the currently selected folder.
+- Selecting **Exit** in the top right restores the contents of the Resource Navigator to the currently selected folder.

docs/creating-resources.md

@@ -0,0 +1,13 @@
+# Creating Resources
+
+While using Monokle, you can directly add new K8s resources. Once you have browsed and added your project folder, click on the “New Resource” button at the top of the navigator to launch the “Add New Resource” dialog.
+
+![Add Resource](img/add-resource-1.5.0.png)
+
+For adding resources to new or existing files in the navigator, click on the Save button at the top-right corner of the interface.
+
+![Resource save](img/add-resource-save.png)
+
+While creating a resource, it is possible to select an existing resource as a template from the drop-down menu. 
+
+![Resource template](img/template.png)

docs/development.md

@@ -2,25 +2,25 @@
 
 Monokle is an Electron desktop application built with React & TypeScript.  
 
-This project was bootstrapped from
-https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder, 
+This project was bootstrapped from <https://github.com/yhirose/react-typescript-electron-sample-with-create-react-app-and-electron-builder>, 
 which provides:
+
 - TypeScript support for Electron main process source code.
 - Hot-reload support for Electron app.
 - Electron-builder support.
 
 Check out the [Architecture](./architecture.md) document for more information.
 
-## Building & running
+## **Building & Running**
 
-### Prerequisites
+### **Prerequisites**
 
 - [Download & Install Git](https://git-scm.com/downloads). OSX and Linux machines typically have this already installed.
 - [Download & Install Node.js](https://nodejs.org/en/download/) and the npm package manager.
 - Clone this repository.
 - Make sure you are running the node version specified in `.npmrc` or if you are using [nvm](https://github.com/nvm-sh/nvm), you can run the `nvm install` command to quickly install and use the required node version.
 
-### Running
+### **Running**
 
 1. Install npm dependencies:
 ```
@@ -33,14 +33,14 @@ npm install
 npm run electron:dev
 ```
 
-## Hot reloading
+## **Hot Reloading**
 
 The Electron app will reload if you make edits in the `electron` directory.  
 You will also see any lint errors in the
 console.
 
 
-## Building
+## **Building**
 Build the Electron app package for production:
 
 ```
@@ -49,6 +49,6 @@ npm run electron:build
 
 The output will be located in the `dist` folder.
 
-## Help & Support
+## **Help & Support**
 
 Feel free to reach out and ask questions on our [Discord server](https://discord.gg/uNuhy6GDyn).

docs/faq.md

@@ -1,52 +1,54 @@
-## 1. What are the prerequisites for using Monokle?
+# FAQ
+
+## **1. What are the prerequisites for using Monokle?**
 
 You will need to install the following two prerequisites to successfully run Monokle:
 
 1. [Helm](https://helm.sh/docs/intro/install/) - Required for [Helm Preview](./helm.md#helm-preview) functionality.
 2. [Kubectl](https://kubernetes.io/docs/tasks/tools/) - Required for [Kustomize Preview](./kustomize.md#kustomize-preview) and [Deploy/Diff](./apply-and-diff.md) functionality.
 
-## 2. What OS does Monokle support?
+## **2. What OS does Monokle support?**
 
 Monokle supports Windows, MacOS and Linux. Get the latest installers for MacOS and Windows on [GitHub](https://github.com/kubeshop/monokle). For running Monokle on
 Linux, run it from the source, following the steps as outlined in the [Getting Started](./getting-started.md)
 documentation.
 
-## 3. Why can’t I add any clusters?
+## **3. Why can’t I add any clusters?**
 
 While adding new clusters, a valid kubeconfig file is required. Please check that all the needed configuration settings
 are present in your kubeconfig file are valid. For more detail
 read the [kubeconfig](https://kubernetes.io/docs/concepts/configuration/organize-cluster-access-kubeconfig/) documentation.
 
-## 4. Why is Kubectl required to run Monokle?
+## **4. Why is Kubectl required to run Monokle?**
 
 You need to install and configure kubectl for previewing [kustomization.yaml](./kustomize.md) files. It helps to debug
 your configurations before you deploy them to your cluster.
 
-## 5. Does Monokle support Helm?
+## **5. Does Monokle support Helm?**
 
 Yes, Monokle allows you to navigate and preview the output of a Helm chart for an existing values files. Read more at
 [Working with Helm](./helm.md).
 
-## 6. Can I work on multiple projects simultaneously?
+## **6. Can I work on multiple projects simultaneously?**
 
 You can launch multiple project windows using the [New Monokle Windows](../overview/#multiple-windows) option. It allows
 you to work on multiple folders or clusters simultaneously; thus visual navigation for the multiple pages becomes simpler
 and faster.
 
-## 7. Can I use Monokle with Flux/ArgoCD?
+## **7. Can I use Monokle with Flux/ArgoCD?**
 
 Yes, Monokle can be used for creating / editing / debugging manifests before they are deployed to a cluster using a CD tool
 like ArgoCD or Flux.
 
-## 8. How to open Helm and Kustomization preview?
+## **8. How to open Helm and Kustomization preview?**
 
 You can navigate to the resources created by Kustomize or Helm in the navigator. Hover over the resources and hit the
  button to perform the preview and see the generated resources in the navigator.
 
-## 9. Why is Autocomplete not working in the editor?
+## **9. Why is Autocomplete not working in the editor?**
 
 The source editor provides an autocomplete option for only native Kubernetes resources. Therefore, the autocomplete feature is not available for any other resources except the resources in the YAML manifests.
 
-## 10. How to save changes in the editor?
+## **10. How to save changes in the editor?**
 
 The source editor automatically saves the current changes in your resource manifests as long as they are valid YAML files.

docs/features.md

@@ -5,47 +5,87 @@ Here is a short list of some of the features currently in Monokle.
 A big thanks to the excellent [Argo-Rollouts](https://github.com/argoproj/argo-rollouts/) project on GitHub for
 providing plentiful manifests for us to run Monokle against.
 
-## Navigate k8s objects easily
+## **Navigate k8s Objects Easily**
 
-![Navigate k8s objects easily](img/navigator.gif)
+![Navigate k8s objects easily](img/navigator-1.5.0.gif)
 
 Monokle compiles a list of all the objects in your repo (from files you didn't want ignored), to give you a handy
 overview of all your resources - [read more here](resource-navigation.md).
 
-## Validate and follow links up- or downstream through your manifests
+## **Validate and Follow Links Up- or Downstream through your Manifests**
 
-![Follow links up or downstream through your manifests](img/upstream-downstream.gif)
+![Follow links up or downstream through your manifests](img/upstream-downstream-1.5.0.gif)
 
 Surf up- or downstream through your resources! Monokle highlights other resources that your selection has direct
 relations to and even provides you with the links to go to them quickly - [read more here](resource-navigation.md).
 
-## Preview resources generated by Kustomize and Helm
+## **Preview Resources Generated by Kustomize and Helm**
 
-![Preview the resources created by Kustomize or Helm](img/kustomization.gif)
+![Preview the resources created by Kustomize or Helm](img/kustomization-1.5.0.gif)
 
 Do a quick dry-run, enabling you to navigate and debug the resources created by Kustomize or Helm. Apply them to
 the cluster when you are satisfied - read more about [Kustomize](kustomize.md) and [Helm](helm.md).
 
-## Locate source file quickly and see if links are dead-ends
+## **Locate Source File Quickly and Find Dead-end Links**
 
-![Locate source file quickly, and see if links are dead-ends](img/find-file-and-dead-links.gif)
+![Locate source file quickly, and see if links are dead-ends](img/find-file-and-dead-links-1.5.0.gif)
 
 When you select a resource, Monokle will show which file it was defined in. A yellow warning triangle indicates that a resource is pointing to a link that does not exist.
 
-## Browse and update your clusters objects
+## **Browse and Update Cluster Objects**
 
-![Browse your clusters objects](img/cluster-objects.gif)
+![Browse your clusters objects](img/cluster-objects-1.5.0.gif)
 
-Want to browse your cluster instead of a repo? Simply click the "Show Cluster Objects" button to import all objects from
+Want to browse your cluster instead of a repo? Simply click the "Load" button to import all objects from
 the cluster into Monokle - [read more](cluster-integration.md). If you need to make any immediate hot-fixes, simply modify
 the resource in the source editor and click the "Apply" button.
 
-## Manage Multiple Projects
+## **Manage Multiple Projects**
 
 ![Browse your clusters objects](img/manage-multiple-projects.gif)
 
 Easily switch in between projects to more efficiently work with multiple projects at the same time.
 
+## **Diff Multiple Resources**
+
+When a resource is selected in the navigator, the Editor contains a "Diff" button at the top right.
+
+![Diff Button](img/diff-button-1.5.0.png)
+
+Selecting "Diff" will compare the selected resource against the currently configured cluster:
+
+  - If the resource does not exist in the cluster an error will be shown.
+  - If the resource _does_ exist a Diff dialog will be shown.
+
+![Resource Diff](img/diff-tble-8-1.5.0.png)
+
+In the screenshot above:
+
+- The left side shows the resource in Monokle.
+- The right side shows the resource retrieved from the cluster.
+- Differences are highlighted as shown.
+
+
+## **Create a Resource from a Template**
+
+Monokle allows the use of templates to start a new project via the **Start from a template** option:
+
+![Start with Template](img/start-with-template-1.5.0.png)
+
+The **Create a Project from a Template** dialog appears:
+
+![Start with Template](img/name-project-1.5.0.png)
+
+Name your project, select its location and click **Next: Select a Template**.
+
+Monokle includes a default set of templates which are installed automatically when starting Monokle
+for the first time and available in the Templates Explorer when working with your Monokle projects:
+
+Check out the [Monokle Default Templates Plugin](https://github.com/kubeshop/monokle-default-templates-plugin) repository to 
+see the complete list of templates that are included along with their corresponding schemas and manifests.
+
+![Default Templates](img/template-selection-1.5.0.png)
+