4.0.0.beta1 (#577)

* preparing 4.0 beta release * addressing issue 573 * better style matching to v3
explorerhq · Feb 1, 2024 · 304affd · 304affd
1 parent 706ab9f
commit 304affd
Show file tree

Hide file tree

Showing 19 changed files with 422 additions and 285 deletions.
diff --git a/.github/workflows/publish-pypi.yml b/.github/workflows/publish-pypi.yml
@@ -21,6 +21,14 @@ jobs:
       with:
         python-version: '3.12'
 
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - name: Install dependencies
+      run: npm install
+    - name: Build client
+      run: npm run build
+
     - name: Install pypa/build
       run: >-
         python -m

diff --git a/.github/workflows/publish-test.yml b/.github/workflows/publish-test.yml
@@ -28,6 +28,14 @@ jobs:
         pip install
         build
         --user
+    - uses: actions/setup-node@v4
+      with:
+        node-version-file: '.nvmrc'
+    - name: Install dependencies
+      run: npm install
+    - name: Build client
+      run: npm run build
+
     - name: Build a binary wheel and a source tarball
       run: >-
         python -m

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -31,6 +31,10 @@ jobs:
           python-version: ${{ matrix.python-version }}
           cache: pip
 
+      - uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+
       - name: Install dependencies
         run: |
           npm install

diff --git a/HISTORY.rst b/HISTORY.rst
@@ -5,12 +5,13 @@ Change Log
 This document records all notable changes to `django-sql-explorer <https://github.com/chrisclark/django-sql-explorer>`_.
 This project adheres to `Semantic Versioning <https://semver.org/>`_.
 
-`unreleased`_ changes
+`4.0.0.beta1`_ (2024-01-31)
 ---------------------
-* `#565`_: Front-end modernization. Vite, Boostrap 5, CodeMirror 6, etc.
+* `#565`_: Front-end modernization. Code completion via CodeMirror 6. Bootstrap5. Vite-based build
 * `#566`_: Django 5 support & tests
 * `#537`_: S3 signature version support
 * `#562`_: Visually show whether the last run was successful
+* `#571`_: Replace isort and flake8 with Ruff (linting)
 
 
 `3.2.1`_ (2023-07-13)

diff --git a/MANIFEST.in b/MANIFEST.in
@@ -1,3 +1,5 @@
 recursive-include explorer *
 recursive-exclude * *.pyc __pycache__ .DS_Store
+include package.json
+include vite.config.js
 include README.rst
diff --git a/docs/install.rst b/docs/install.rst
@@ -1,7 +1,7 @@
 Install
 =======
 
-* Requires Python 3.6 or higher.
+* Requires Python 3.10 or higher.
 * Requires Django 3.2 or higher.
 
 Set up a Django project with the following:
@@ -36,21 +36,6 @@ Add to your ``INSTALLED_APPS``, located in the ``settings.py`` file in your proj
         ...
     )
 
-Add the following to your urls.py (all Explorer URLs are restricted
-via the ``EXPLORER_PERMISSION_VIEW`` and ``EXPLORER_PERMISSION_CHANGE``
-settings. See Settings section below for further documentation.):
-
-.. code-block:: python
-   :emphasize-lines: 5
-
-    from django.urls import path
-
-    urlpatterns = [
-        ...
-        path('explorer/', include('explorer.urls')),
-        ...
-    ]
-
 Configure your settings to something like:
 
 .. code-block:: python
@@ -65,6 +50,21 @@ Explorer users, and the values are the actual database aliases used in
 in your database, add them in your project's ``DATABASES`` setting and
 use these read-only connections in the ``EXPLORER_CONNECTIONS``.
 
+Add the following to your urls.py (all Explorer URLs are restricted
+via the ``EXPLORER_PERMISSION_VIEW`` and ``EXPLORER_PERMISSION_CHANGE``
+settings. See Settings section below for further documentation.):
+
+.. code-block:: python
+   :emphasize-lines: 5
+
+    from django.urls import path, include
+
+    urlpatterns = [
+        ...
+        path('explorer/', include('explorer.urls')),
+        ...
+    ]
+
 If you want to quickly use django-sql-explorer with the existing default
 connection **and know what you are doing** (or you are on development), you
 can use the following settings:
@@ -74,11 +74,19 @@ can use the following settings:
     EXPLORER_CONNECTIONS = { 'Default': 'default' }
     EXPLORER_DEFAULT_CONNECTION = 'default'
 
-Finally, run migrate to create the tables:
+Run migrate to create the tables:
 
 ``python manage.py migrate``
 
-You can now browse to https://yoursite/explorer/ and get exploring!
+Create a superuser:
+
+``python manage.py createsuperuser``
+
+And run the server:
+
+``python manage.py runserver``
+
+You can now browse to http://127.0.0.1:8000/explorer/ and get exploring!
 
 The default behavior when viewing a parameterized query is to autorun the associated
 SQL with the default parameter values. This may perform poorly and you may want
@@ -94,3 +102,33 @@ There are a handful of features (snapshots, emailing queries) that
 rely on Celery and the dependencies in optional-requirements.txt. If
 you have Celery installed, set ``EXPLORER_TASKS_ENABLED=True`` in your
 settings.py to enable these features.
+
+Installing From Source
+----------------------
+
+If you are installing SQL Explorer from source (by cloning the repository),
+you may want to first look at simply running test_project/start.sh.
+
+If you want to install it into an existing project, you can do so by following
+the instructions above, and additionally building the front-end dependencies.
+
+After cloning, simply run:
+
+::
+
+    nvm install
+    nvm use
+    npm install
+    npm run build
+
+The front-end assets will be built and placed in the /static/ folder
+and collected properly by your Django installation during the `collect static`
+phase. Copy the /explorer directory into site-packages and you're ready to go.
+
+And frankly, as long as you have a reasonably modern version of Node and NPM
+installed, you can probably skip the nvm steps.
+
+Because the front-end assets must be built, installing SQL Explorer via pip
+from github is not supported. The package will be installed, but the front-end
+assets will be missing and will not be able to be built, as the necessary
+configuration files are not included when github builds the wheel for pip.
diff --git a/explorer/__init__.py b/explorer/__init__.py
@@ -1,9 +1,9 @@
 __version_info__ = {
-    "major": 3,
-    "minor": 2,
-    "patch": 1,
-    "releaselevel": "final",
-    "serial": 0
+    "major": 4,
+    "minor": 0,
+    "patch": 0,
+    "releaselevel": "beta",
+    "serial": 1
 }
 
 

diff --git a/explorer/app_settings.py b/explorer/app_settings.py
@@ -146,3 +146,4 @@
 # If set to False will not autorun queries containing parameters when viewed
 # - user will need to run by clicking the Save & Run Button to execute
 EXPLORER_AUTORUN_QUERY_WITH_PARAMS = getattr(settings, "EXPLORER_AUTORUN_QUERY_WITH_PARAMS", True)
+VITE_DEV_MODE = getattr(settings, "VITE_DEV_MODE", False)
diff --git a/explorer/src/scss/explorer.scss b/explorer/src/scss/explorer.scss
@@ -3,6 +3,10 @@
     border: 1px solid silver
 }
 
+.cm-editor {
+    outline: none !important;
+}
+
 .cm-scroller {
     overflow: auto;
     min-height: 350px
@@ -95,9 +99,28 @@ div.sort {
 }
 
 .btn-save-only {
-    border-radius: 0px !important;
+    border-radius: 0 !important;
+}
+
+.vite-not-running-canary {
+    display: none;
+}
+
+.nav-link {
+    color: white;
+}
+
+.nav-link:hover, .nav-link:focus {
+    color: var(--bs-primary-bg-subtle);
+}
+
+.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
+    color: var(--bs-nav-pills-link-active-color);
+    border: 1px solid var(--bs-secondary-bg);
+    background: none;
 }
 
-.dropdown-toggle::after{
-    margin-left: 0px !important;
+.navbar .navbar-brand:hover {
+    background: none;
+    color: var(--bs-primary-bg-subtle) !important;
 }
diff --git a/explorer/src/scss/main.scss b/explorer/src/scss/main.scss
@@ -4,6 +4,7 @@
 $bootstrap-icons-font-dir: "../../../node_modules/bootstrap-icons/font/fonts";
 @import "~bootstrap-icons/font/bootstrap-icons.css";
 
+@import "variables";
 @import "explorer";
 
 @import "pivot.css";
diff --git a/explorer/src/scss/variables.scss b/explorer/src/scss/variables.scss
@@ -0,0 +1,3 @@
+:root {
+  --bs-dark-rgb: 44, 62, 80;
+}
diff --git a/explorer/templates/explorer/base.html b/explorer/templates/explorer/base.html
@@ -20,36 +20,55 @@
 </head>
 
 <body>
+{% if vite_dev_mode %}
+    <div class="vite-not-running-canary" style="text-align:center;">
+        <hr>
+        <h1>Looks like Vite isn't running</h1>
+        <h2>This is easy to fix, I promise!</h2>
+        <div>You can run:</div>
+            <pre>
+npm run dev
+            </pre>
+        <div>Then refresh this page, and you'll get all of your styles, JS, and hot-reloading!</div>
+        <div>If this is the first time you are running the project, then run:</div>
+        <pre>
+nvm install
+nvm use
+npm install
+npm run dev
+        </pre>
+        <hr>
+    </div>
+{% endif %}
+
 {% block sql_explorer_content_takeover %}
-        <nav class="navbar navbar-expand-lg navbar-light bg-light my-3">
-            <div class="container-xxl bd-gutter flex-wrap flex-lg-nowrap">
-                <a class="navbar-brand{% if view_name == 'explorer_index' %} btn btn-primary text-white{% endif %}"
-                   href="{% url 'explorer_index' %}">{% trans "Explorer Home" %}</a>
-                <ul class="nav nav-pills">
-                    {% if can_change %}
-                        <li class="nav-item">
-                            <a class="nav-link{% if not query and view_name == 'query_create' %} active{% endif %}"
-                               href="{% url 'query_create' %}">{% trans "New Query" %}</a>
-                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link{% if not query and view_name == 'explorer_playground' %} active{% endif %}"
-                               href="{% url 'explorer_playground' %}"><i class="small me-1 bi-code-square"></i>{% trans "Playground" %}</a>
-                        </li>
-                    {% endif %}
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
+        <div class="container bd-gutter flex-wrap flex-lg-nowrap">
+            <a class="navbar-brand{% if view_name == 'explorer_index' %} btn btn-outline-light text-white{% endif %}"
+               href="{% url 'explorer_index' %}">{% trans "Explorer Home" %}</a>
+            <ul class="nav nav-pills">
+                {% if can_change %}
                     <li class="nav-item">
-                        <a class="nav-link{% if not query and view_name == 'explorer_logs' %} active{% endif %}"
-                           href="{% url 'explorer_logs' %}">{% trans "Logs" %}</a>
+                        <a class="nav-link{% if not query and view_name == 'query_create' %} active{% endif %}"
+                           href="{% url 'query_create' %}">{% trans "New Query" %}</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link{% if not query and view_name == 'query_favorites' %} active{% endif %}"
-                           href="{% url 'query_favorites' %}"><i class="small me-1 bi-heart"></i>{% trans "Favorites" %}</a>
+                        <a class="nav-link{% if not query and view_name == 'explorer_playground' %} active{% endif %}"
+                           href="{% url 'explorer_playground' %}"><i class="small me-1 bi-code-square"></i>{% trans "Playground" %}</a>
                     </li>
-                </ul>
-            </div>
-        </nav>
-    <div class="container">
-        {% block sql_explorer_content %}{% endblock %}
-    </div>
+                {% endif %}
+                <li class="nav-item">
+                    <a class="nav-link{% if not query and view_name == 'explorer_logs' %} active{% endif %}"
+                       href="{% url 'explorer_logs' %}">{% trans "Logs" %}</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link{% if not query and view_name == 'query_favorites' %} active{% endif %}"
+                       href="{% url 'query_favorites' %}"><i class="small me-1 bi-heart"></i>{% trans "Favorites" %}</a>
+                </li>
+            </ul>
+        </div>
+    </nav>
+{% block sql_explorer_content %}{% endblock %}
 {% endblock %}
 {% block sql_explorer_footer %}
     <div class="container">