[Fixes: 4988] Rework static build process (#4989)

* updated gruntfile, excluded dependencies, updated package.json

* new /static/lib build

* new static/geonode build

* updated templates for static file include (DEBUG_STATIC)

* updated settings for leaflet

* removed bower

* fixed typo

* updated uglify dev

* updated dependencies

* new static build

* last tests

docs/contribute/frontend-development/index.rst

@@ -0,0 +1,91 @@
+Frontend development
+====================
+
+The GeoNode frontend dependencies can be found in geonode / static. To
+manage dependencies, we recommend the use of yarn package manager (https://yarnpkg.com/lang/en).
+
+First steps:
+------------
+
+``yarn install``
+
+Installs the required libraries to ./node_modules
+
+``yarn install <package>@version [--dev]``
+
+Installs a paket with a defined version. Using ``–dev`` installs a
+dependency that is only available for the build process.
+
+``yarn remove <package>``
+
+Removes a package.
+
+``yarn outdated``
+
+Shows version information.
+
+``yarn why <package>``
+
+Get information on why this package was installed.
+
+**For further information on how to install or use please visit the official yarn documentation.**
+
+File(Folder overview:
+----------------
+
+``./static_dependencies.json``
+
+includes all dependencies associated with each
+file. For example all files which should be minified to assets.min.js are named as values.
+All files that should be copied to lib folder (for DEBUG_STATIC) are values of key `other_dependencies` and so on. Before you can use a dependency it has to be added to package.json by use of yarn.
+
+``./Gruntfile.js``
+
+reads the dependencies from static_dependencies.json
+and contains all workflows.
+
+geonode/static/geonode
+~~~~~~~~~~~~~~~~~~~~~~
+
+The ./geonode folder contains GeoNode’s stylesheets and javascript
+files. The CSS files are generated via less. CSS files should therefore
+never be changed directly but it’s corresponding less file. Further this folder
+should never be deleted!
+
+geonode/static/lib
+~~~~~~~~~~~~~~~~~~
+
+The ./lib folder contains all the third-party files.
+This folder can be deleted as it will be
+fully generated by use of grunt ``development|production``
+
+
+
+
+
+Example 1 – Change styling:
+^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+1. we start the development server with ``paver start``.
+2. we use ``grunt watch`` to watch all less files for change.
+3. we change styling in geonode / less
+4. If our changes are ok we create a new build with
+   ``grunt development`` (files are not minimized) or
+   ``grunt production`` (files are minimized)
+
+Example 2 – add/update a new library:
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+1. yarn add [email protected]
+2. ``vim static_dependencies.json`` Edit the file and add your dependency to its fitting
+   destination. For example, assets.min.js
+3. Check if some Django template (for example, base.html) includes the file by use of ``DEBUG_STATIC=True``
+   and add it or adjust the version
+4. use `grunt production` to build the package
+
+**For further tasks have a look at gruntfile.js or ask for help in the
+development mailing list**
+
+   Attention: Please make maintainers work easier and add a message to
+   your commit why a library has been added. (For example, commit -m
+   'select2 added for permissions form on layer detail page')

docs/contribute/index.rst

@@ -16,4 +16,12 @@ Provide Translations
     translation/index
 
 Write Code
-==========
+==========
+
+Frontend Development
+====================
+
+.. toctree::
+    :maxdepth: 3
+
+    frontend-development/index

geonode/catalogue/templates/geonode_metadata_full.html

@@ -11,9 +11,9 @@
       {% if DEBUG_STATIC %}
       <link href="{% static "lib/css/jquery.dataTables.css" %}" rel="stylesheet" />
       <link href="{% static "lib/css/select2.css" %}" rel="stylesheet"/>
-      <link href="{% static "lib/css/bootstrap.min.css" %}" rel="stylesheet"/>
+      <link href="{% static "lib/css/bootstrap.css" %}" rel="stylesheet"/>
       <link href="{% static "lib/css/jquery-ui.css" %}" rel="stylesheet"/>
-      <link href="{% static "lib/css/bootstrap-datetimepicker.min.css" %}" rel="stylesheet" />
+      <link href="{% static "lib/css/bootstrap-datetimepicker.css" %}" rel="stylesheet" />
       {% else %}
       <link href="{% static "lib/css/assets.min.css" %}" rel="stylesheet"/>
       {% endif %}

geonode/layers/templates/layers/layer_detail.html

@@ -312,7 +312,7 @@ <h4 class="modal-title" id="myModalLabel">{% trans "Download Layer" %}</h4>
                         <button type="button" id = "button-toggle" class="btn btn-primary btn-circle" data-toggle="button" data-toggle="tooltip" title="{% trans "Click to filter the layer" %}">
                           {% trans "Do you want to filter it?" %}
                         </button>
-                        <img src="{% static 'lib/img/geonode_icon.png' %}" class="gear pull-right loading_msg" witdth="30" height="30" style="margin-right:10px; display:none"/>
+                        <img src="{% static 'geonode/img/geonode_icon.png' %}" class="gear pull-right loading_msg" witdth="30" height="30" style="margin-right:10px; display:none"/>
                         <div class="pull-right loading_msg" style="margin-right:10px;margin-top:5px;display:none">{% trans "Loading..." %}</div>
                         </br></br>
                       {% endif %}

geonode/layers/templates/layouts/panels.html

@@ -1,7 +1,7 @@
 {% load static from staticfiles %}
 {% load floppyforms %}
 {% load i18n %}
-<!--<link href="{% static "lib/css/bootstrap-select.min.css" %}?v={{ VERSION }}" rel="stylesheet" />-->
+<!--<link href="{% static "lib/css/bootstrap-select.css" %}?v={{ VERSION }}" rel="stylesheet" />-->
 <script type="text/javascript" src="{% static "geonode/js/utils/thumbnail.js" %}"></script>
 <style>
 /* general panel styles */

geonode/settings.py

@@ -1408,7 +1408,7 @@
     ],
     'PLUGINS': {
         'esri-leaflet': {
-            'js': 'lib/js/esri-leaflet.js',
+            'js': 'lib/js/leaflet.js',
             'auto-include': True,
         },
         'leaflet-fullscreen': {
@@ -1417,13 +1417,13 @@
             'auto-include': True,
         },
         'leaflet-opacity': {
-            'css': 'lib/css/Control.Opacity.css',
-            'js': 'lib/js/Control.Opacity.js',
+            'css': 'lib/css/L.Control.Opacity.css',
+            'js': 'lib/js/L.Control.Opacity.js',
             'auto-include': True,
         },
         'leaflet-navbar': {
             'css': 'lib/css/Leaflet.NavBar.css',
-            'js': 'lib/js/Leaflet.NavBar.js',
+            'js': 'lib/js/index.js',
             'auto-include': True,
         },
         'leaflet-measure': {