Add UI tutorial 241 (#254)

* Add UI tutorial

      *  Adding a complementary output section to the new UI chapter
      * Updating to the custom pipeline file
      * Adding minor updates to CL tutorials
      * Adding Minor updates to built-in pipelines sections
       * Adding some images

Signed-off-by: Hanan Younes <hyounes4560@conestogac.on.ca>

* Remove trailing whitespace #241

* Rename documentation images for consistency #241

* Add changelog entry #241

* Update UI tutorial

      * Add updated screenshots
      * Add a Deleting project section to the user interface chapter with screenshots
      * Add minor updates to the UI tutorials
      * Add a note about renaming a project

Signed-off-by: Hanan Younes <hyounes4560@conestogac.on.ca>

Co-authored-by: Thomas Druez <tdruez@nexb.com>

Author: hyounes4560

CHANGELOG.rst

@@ -3,6 +3,9 @@
 
 ### unreleased
 
+- Add new documentation chapters and tutorials on the usage of the Web User Interface.
+  https://github.com/nexB/scancode.io/issues/241
+
 - Add ability to register custom pipelines through a new SCANCODEIO_PIPELINES_DIRS
   setting.
   https://github.com/nexB/scancode.io/issues/237

Makefile

@@ -25,7 +25,7 @@ PYTHON_EXE?=python3
 MANAGE=bin/python manage.py
 ACTIVATE?=. bin/activate;
 VIRTUALENV_PYZ=etc/thirdparty/virtualenv.pyz
-BLACK_ARGS=--exclude="migrations|data|docs" .
+BLACK_ARGS=--exclude="migrations|data" .
 # Do not depend on Python to generate the SECRET_KEY
 GET_SECRET_KEY=`base64 /dev/urandom | head -c50`
 # Customize with `$ make envfile ENV_FILE=/etc/scancodeio/.env`
@@ -59,16 +59,6 @@ envfile:
 	@mkdir -p $(shell dirname ${ENV_FILE}) && touch ${ENV_FILE}
 	@echo SECRET_KEY=\"${GET_SECRET_KEY}\" > ${ENV_FILE}
 
-check:
-	@echo "-> Run pycodestyle (PEP8) validation"
-	@${ACTIVATE} pycodestyle --max-line-length=88 --exclude=lib,thirdparty,docs,bin,migrations,settings,data,pipelines,var .
-	@echo "-> Run isort imports ordering validation"
-	@${ACTIVATE} isort --check-only .
-	@echo "-> Run black validation"
-	@${ACTIVATE} black --check ${BLACK_ARGS}
-	@echo "-> Run doc8 validation"
-	@${ACTIVATE} doc8 --max-line-length 100 --ignore-path docs/_build/ --quiet docs/
-
 isort:
 	@echo "-> Apply isort changes to ensure proper imports ordering"
 	bin/isort .
@@ -77,7 +67,19 @@ black:
 	@echo "-> Apply black code formatter"
 	bin/black ${BLACK_ARGS}
 
-valid: isort black
+doc8:
+	@echo "-> Run doc8 validation"
+	@${ACTIVATE} doc8 --max-line-length 100 --ignore-path docs/_build/ --quiet docs/
+
+valid: isort black doc8
+
+check: doc8
+	@echo "-> Run pycodestyle (PEP8) validation"
+	@${ACTIVATE} pycodestyle --max-line-length=88 --exclude=lib,thirdparty,docs,bin,migrations,settings,data,pipelines,var .
+	@echo "-> Run isort imports ordering validation"
+	@${ACTIVATE} isort --check-only .
+	@echo "-> Run black validation"
+	@${ACTIVATE} black --check ${BLACK_ARGS}
 
 clean:
 	@echo "-> Clean the Python env"

docs/built-in-pipelines.rst

@@ -3,6 +3,10 @@
 Built-in Pipelines
 ==================
 
+As you may already know that pipelines are Python scripts that perform code
+analysis by executing a sequence of steps. ScanCode.io offers the following
+built-in—available—pipelines:
+
 .. _pipeline_base_class:
 
 Pipeline Base Class

docs/custom-pipelines.rst

@@ -3,16 +3,16 @@
 Custom Pipelines
 ================
 
-A Pipeline is a Python script that performs code analysis by executing a
-sequence of steps.
+Pipelines are Python scripts; each contains a set of instructions that have to
+be executed in an orderly manner—pipe-like nature—to perform a code analysis.
 
 - A pipeline is a **Python class** that lives in a Python module as a ``.py``
   **file**.
 - A pipeline class **always inherits** from the ``Pipeline`` base class
   :ref:`pipeline_base_class`, or from other existing pipeline classes, such as
   the :ref:`built_in_pipelines`.
-- It **defines steps** - execution order of the steps - using the ``steps``
-  classmethod.
+- A pipeline **defines sequence of steps**—execution order of the steps—using
+  the ``steps`` classmethod.
 
 See :ref:`pipelines_concept` for more details.