Merge branch 'master' into 512

2024-11-11 05:10:51 +03:00 · 2020-09-08 10:23:31 -07:00 · 2020-09-08 10:23:31 -07:00 · 34c80f2a8c
commit 34c80f2a8c
parent 2ae43c4a48 600a01d2fd
8 changed files with 335 additions and 37 deletions
--- a/docs/_static/scripts/mysql-subscribe.js
+++ b/docs/_static/scripts/mysql-subscribe.js
@ -0,0 +1,119 @@
+const mysql_email_input = document.getElementById('mysql-EMAIL');
+const mysql_submit_btn = document.getElementById('mysql-embedded-subscribe');
+const mysql_success_status = document.getElementById('mysql-success-response');
+const mysql_status_error = document.getElementById('mysql-error-response');
+
+mysql_email_input.addEventListener('input', function() {
+    mysql_submit_btn.value = 'Subscribe';
+    mysql_submit_btn.disabled = false;
+
+    mysql_status_error.innerHTML = '';
+    mysql_status_error.classList.add('hide');
+});
+
+const showMySQLErrorMsg = () => {
+    mysql_submit_btn.value = 'Subscribe';
+    mysql_submit_btn.disabled = false;
+    mysql_status_error.innerHTML = 'Please enter a valid email';
+    mysql_status_error.classList.remove('hide');
+    clearMySQLMsg();
+};
+
+const clearMySQLMsg = () => {
+    setTimeout(function(){
+        mysql_success_status.innerHTML = '';
+        mysql_status_error.innerHTML = '';
+
+        mysql_success_status.classList.add('hide');
+        mysql_status_error.classList.add('hide');
+        mysql_submit_btn.disabled = true;
+        //reset input
+        mysql_email_input.value = '';
+    }, 3000);
+}
+
+const submitMySQLForm = function (form) {
+
+    let gqlEndpoint = 'https://graphql-engine-website.hasura.io/v1/graphql';
+    if(window.location.host !== "hasura.io") {
+        gqlEndpoint = 'https://graphql-engine-website.hasura-stg.hasura-app.io/v1/graphql';
+    }
+    // change button state
+    mysql_submit_btn.value = 'Subscribing...';
+    mysql_submit_btn.disabled = true;
+
+    const email = form.elements["EMAIL"].value;
+
+    const hbs_context = {
+        "hutk": readCookie("hubspotutk"), // include this parameter and set it to the hubspotutk cookie value to enable cookie tracking on your submission
+        "pageUri": window.location.host + window.location.pathname,
+        "pageName": document.title,
+    };
+
+    const gqlMutation = `mutation notifyDatabaseSupport($object: databaseSupportInput!) {
+      notifyDatabaseSupport(object: $object) {
+        id
+      }
+    }`;
+
+    const object = {
+      "category": "docs",
+      "database": "MySQL",
+      "email": email,
+      "hbs_context": hbs_context
+    };
+
+    fetch(gqlEndpoint, {
+      method: 'POST',
+      body: JSON.stringify({
+          query: gqlMutation,
+          variables: { object: object }
+      }),
+    })
+    .then(response => response.json())
+    .then(data => {
+        // change button state
+        mysql_submit_btn.value = 'Subscribe';
+        mysql_submit_btn.disabled = false;
+        if (data && data.data && data.data.notifyDatabaseSupport.id) {
+            mysql_success_status.innerHTML = 'Subscribed!';
+            mysql_success_status.classList.remove('hide');
+        } else {
+            if(data.errors && data.errors[0].message.includes('Uniqueness violation')) {
+                mysql_status_error.innerHTML = 'You have already subscribed';
+            } else {
+                mysql_status_error.innerHTML = 'Something went wrong';
+            }
+            mysql_status_error.classList.remove('hide');
+        }
+        clearMySQLMsg();
+    })
+    .catch((error) => {
+        console.error('Error:', error);
+        mysql_submit_btn.value = 'Subscribe';
+        mysql_submit_btn.disabled = false;
+    });
+
+};
+
+document.addEventListener('submit', function (event) {
+
+    // Only run on forms flagged for mysql-subscribe-form validation
+    if (!event.target.classList.contains('mysql-subscribe-form')) return;
+
+    // Prevent form from submitting
+    event.preventDefault();
+
+    // email validation
+    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+    if(!emailPattern.test(mysql_email_input.value)) {
+      showMySQLErrorMsg();
+      return;
+    }
+
+    // Otherwise, let the form submit normally
+    submitMySQLForm(event.target);
+
+
+}, false);
--- a/docs/_static/scripts/newsletter.js
+++ b/docs/_static/scripts/newsletter.js
@ -1,7 +1,7 @@
 const email_input = document.getElementById('mce-EMAIL');
 const submit_btn = document.getElementById('mc-embedded-subscribe');
-const mcStatusSuccess = document.querySelector('.mce-success-response');
-const mcStatusError = document.querySelector('.mce-error-response');
+const mcStatusSuccess = document.getElementById('mce-success-response');
+const mcStatusError = document.getElementById('mce-error-response');

 email_input.addEventListener('input', function() {
    submit_btn.value = 'Subscribe';
@ -60,16 +60,19 @@ const submitNewsletterForm = function (form) {
        "pageUri": window.location.host + window.location.pathname,
        "pageName": document.title,
    };
+
    const gqlMutation = `mutation docsNewsletterSignup($objects: [newsletterSignupInput!]! ) {
      signupNewsletter(objects: $objects) {
        affected_rows
      }
    }`;
+
    const objects = [{
        "email": email,
        "hbs_context": hbs_context,
        "category": "docs"
-    }]
+    }];
+
    fetch(gqlEndpoint, {
      method: 'POST',
      body: JSON.stringify({
--- a/docs/_static/styles/main.css
+++ b/docs/_static/styles/main.css
@ -99,16 +99,16 @@ p {
 }

 /* Newsletter */
-#mc_embed_signup {
+.mc_embed_signup {
  display: flex;
  align-items: center;
 }
-#mc_embed_signup .subscribe-form-content {
+.mc_embed_signup .subscribe-form-content {
  font-weight: bold;
  color: #001934;
  padding-right: 40px;
 }
-#mc_embed_signup form {
+.mc_embed_signup form {
  display: flex !important;
  padding: 0 0 0 0 !important;
  flex: 1 !important;
@ -116,17 +116,17 @@ p {
  font-size: 16px;
  }
 /* todo: redesign & clean up */
-#mc_embed_signup input:focus {border-color:#333;}
-#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
-#mc_embed_signup .button:hover {background-color:#777;}
-#mc_embed_signup .clear {clear:both;}
+.mc_embed_signup input:focus {border-color:#333;}
+.mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}
+.mc_embed_signup .button:hover {background-color:#777;}
+.mc_embed_signup .clear {clear:both;}

-#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
-#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
-#mc_embed_signup #mce-error-response {display:none;}
-#mc_embed_signup #mce-success-response {color:#529214; display:none;}
-#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
-#mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}
+.mc_embed_signup div.mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%; margin: 0 5%; clear: both;}
+.mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
+/*.mc_embed_signup .mce-error-response {display:none;}*/
+.mc_embed_signup .mce-success-response {color:#529214;}
+.mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
+.mc-embedded-subscribe {clear:both; width:auto; display:block; margin:1em 0 1em 5%;}

 .newsletter-link,
 .newsletter-link:hover,
@ -204,7 +204,7 @@ p {
 .submit-box input:focus {
  outline: none;
 }
-#mce-responses .error-message, #mce-responses .success-message {
+.mce-responses .error-message, .mce-responses .success-message {
  background-color: #001934;
  padding: 8px 12px !important;
  border-radius: 4px;
@ -216,13 +216,13 @@ p {
  width: auto !important;
 }

-#mce-responses .error-message a, #mce-responses .success-message a {
+.mce-responses .error-message a, .mce-responses .success-message a {
  color: #fff !important;
 }
-#mce-responses .error-message {
+.mce-responses .error-message {
  color: #efc371 !important;
 }
-#mce-responses .success-message {
+.mce-responses .success-message {
  color: #1cd3c6 !important;
 }
 #content_inner_wrapper {
@ -1014,17 +1014,17 @@ article ol ol {
  }
 }
@media (min-width: 768px) and (max-width: 1385px) {
-  #mc_embed_signup form {
+  .mc_embed_signup form {
    padding-top: 10px !important;
  }
-  #mc_embed_signup {
+  .mc_embed_signup {
    display: block;
  }
-  #mc_embed_signup .subscribe-form-content {
+  .mc_embed_signup .subscribe-form-content {
    padding-right: 0;
    text-align: center;
  }
-  #mce-responses .error-message, #mce-responses .success-message {
+  .mce-responses .error-message, .mce-responses .success-message {
    top: 34px !important;
  }
 }
@ -1034,20 +1034,20 @@ article ol ol {
    top: 170px;
    height: calc(100% - 170px);
  }
-  #mc_embed_signup {
+  .mc_embed_signup {
    display: block;
  }
-  #mc_embed_signup .subscribe-form-content {
+  .mc_embed_signup .subscribe-form-content {
    padding-right: 0;
    text-align: center;
  }
-  #mc_embed_signup form {
+  .mc_embed_signup form {
    padding-top: 10px !important;
  }
  .submit-box input {
    padding: 0 4px !important;
  }
-  #mce-responses .error-message, #mce-responses .success-message {
+  .mce-responses .error-message, .mce-responses .success-message {
    top: 34px !important;
  }
  #input_search_box {
--- a/docs/_theme/djangodocs/layout.html
+++ b/docs/_theme/djangodocs/layout.html
@ -29,6 +29,10 @@

 {% set deferred_script_files = ['_static/react/react.min.js', '_static/react/react-dom.min.js', '_static/graphiql/graphiql.min.js', '_static/scripts/hdocs.js', '_static/scripts/newsletter.js'] %}

+{%- if pagename.endswith('mysql-preview') %}
+  {% set deferred_script_files = deferred_script_files + ['_static/scripts/mysql-subscribe.js'] %}
+{%- endif %}
+
 {%- macro secondnav() %}
  {%- if prev %}
    &laquo; <a href="{{ prev.link|e }}" title="{{ prev.title|e }}">previous</a>
@ -290,29 +294,27 @@
                </div>
              </div>
              <div class="subscribe-form-wrapper">
-                <div id="mc_embed_signup">
+                <div id="mc_embed_signup" class="mc_embed_signup">
                  <div class="subscribe-form-content">
                    Stay up to date with product & security news
-                    <!-- <a target="_blank" class="newsletter-link" href="https://us13.campaign-archive.com/home/?u=9b63e92a98ecdc99732456b0e&id=f5c4f66bcf" rel="noopener">See past editions</a> -->
                  </div>
-                  <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form newsletter-form" target="_blank" rel="noopener" novalidate>
+                  <form id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mc-embedded-subscribe-form newsletter-form" target="_blank" rel="noopener" novalidate>
                    <div class="full-width">
                      <div class="input-box">
-                        <input type="email" name="EMAIL" id="mce-EMAIL" aria-label="Email" placeholder="Your Email Address" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" required>
+                        <input type="email" name="EMAIL" id="mce-EMAIL" class="mce-EMAIL" aria-label="Email" placeholder="Your Email Address" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" required>
                      </div>
-                      <div id="mce-responses" class="clear display-inline">
-                        <div class="mce-error-response response error-message hide">
+                      <div id="mce-responses" class="clear display-inline mce-responses">
+                        <div id="mce-error-response" class="mce-error-response response error-message hide">
                        </div>
-                        <div class="mce-success-response response success-message hide">
+                        <div id="mce-success-response" class="mce-success-response response success-message hide">
                        </div>
                      </div>
                    </div>
                    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9b63e92a98ecdc99732456b0e_f5c4f66bcf" tabindex="-1" value=""></div>
                    <div class="clear submit-box">
-                      <input type="submit" disabled="true" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">
+                      <input type="submit" disabled="true" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button mc-embedded-subscribe">
                    </div>
                  </form>
-
                </div>
              </div>
              <div class="footer-hasura-custom">
--- a/docs/graphql/core/getting-started/index.rst
+++ b/docs/graphql/core/getting-started/index.rst
@ -42,6 +42,11 @@ Get started using an existing database

  Hasura GraphQL engine supports **Postgres 9.5 and above**

+
+.. admonition:: MySQL support
+
+  We are in the process of launching support for MySQL, head to :ref:`this guide <mysql_preview>` to try it out in preview.
+
 .. toctree::
   :maxdepth: 2
   :titlesonly:
--- a/docs/graphql/core/guides/index.rst
+++ b/docs/graphql/core/guides/index.rst
@ -24,6 +24,7 @@ Guides / Tutorials / Resources
   Auditing tables <auditing-tables>
   Telemetry <telemetry>
   Code Editor Integrations <code-editor-integrations/index>
+   MySQL preview <mysql-preview>



--- a/docs/graphql/core/guides/mysql-preview.rst
+++ b/docs/graphql/core/guides/mysql-preview.rst
@ -0,0 +1,127 @@
+.. meta::
+   :description: MySQL preview
+   :keywords: hasura, mysql, preview
+
+.. _mysql_preview:
+
+MySQL preview
+=============
+
+.. contents:: Table of contents
+  :backlinks: none
+  :depth: 2
+  :local:
+
+Introduction
+------------
+
+We are in the process of launching support for MySQL, and we have a preview available for you to try.
+
+Try it out
+----------
+
+MySQL support can be tried out using ``docker-compose`` and an existing MySQL database
+as follows:
+
+Prerequisites
+^^^^^^^^^^^^^
+
+- `Docker <https://docs.docker.com/install/>`_
+- `Docker Compose <https://docs.docker.com/compose/install/>`_
+- An existing MySQL database
+
+Step 1: Get the docker-compose file
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+Get the Hasura MySQL preview docker compose file:
+
+.. code-block:: bash
+
+   # in a new directory run
+   wget https://raw.githubusercontent.com/hasura/graphql-engine/master/install-manifests/docker-compose-mysql-preview/docker-compose.yaml
+   # or run
+   curl https://raw.githubusercontent.com/hasura/graphql-engine/master/install-manifests/docker-compose-mysql-preview/docker-compose.yaml -o docker-compose.yaml
+
+Step 2: Update MySQL config
+^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+You need to now update the ``docker-compose.yaml`` file with credentials for your
+MySQL database *(replace the values surrounded by <>)*
+
+.. code-block:: yaml
+
+   ...
+   command:
+    - graphql-engine
+    - --mysql-host
+    - <mysql-host>
+    - --mysql-user
+    - <mysql-user>
+    - --mysql-port
+    - <mysql-port>
+    - --mysql-dbname
+    - <mysql-dbname>
+    - --mysql-password
+    - <mysql-password>
+    ...
+
+Step 3: Run Hasura GraphQL engine
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+.. code-block::  bash
+
+   $ docker-compose up -d
+
+Check if the containers are running:
+
+.. code-block:: bash
+
+  $ docker ps
+
+  CONTAINER ID IMAGE                 ... CREATED STATUS PORTS          ...
+  097f58433a2b hasura/graphql-engine ... 1m ago  Up 1m  8080->8080/tcp ...
+  b0b1aac0508d postgres              ... 1m ago  Up 1m  5432/tcp       ...
+
+Step 4: Try out the GraphQL API
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+
+The console available at ``http://localhost:8080/console`` can be used to try
+out the generated API.
+
+The Hasura console currently does not support MySQL (support coming very soon)
+and hence the database needs to be managed externally as of now. i.e. The ``Data``
+section of the console will not display the MySQL tables, etc.
+
+Keep up to date
+---------------
+
+If you'd like to stay informed about the status of MySQL support, subscribe here:
+
+.. raw:: html
+
+    <div>
+      <div id="mysql_embed_signup" class="mc_embed_signup">
+        <form id="mysql-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate post-subscription-form mc-embedded-subscribe-form mysql-subscribe-form" target="_blank" rel="noopener" novalidate>
+          <div style="width: 40%">
+            <div class="input-box">
+              <input type="email" name="EMAIL" id="mysql-EMAIL" class="mce-EMAIL" aria-label="Email" placeholder="Your Email Address" pattern="^([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x22([^\x0d\x22\x5c\x80-\xff]|\x5c[\x00-\x7f])*\x22))*\x40([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d)(\x2e([^\x00-\x20\x22\x28\x29\x2c\x2e\x3a-\x3c\x3e\x40\x5b-\x5d\x7f-\xff]+|\x5b([^\x0d\x5b-\x5d\x80-\xff]|\x5c[\x00-\x7f])*\x5d))*(\.\w{2,})+$" required>
+            </div>
+            <div id="mysql-responses" class="clear display-inline mce-responses">
+              <div id="mysql-error-response" class="mce-error-response response error-message hide">
+              </div>
+              <div id="mysql-success-response" class="mce-success-response response success-message hide">
+              </div>
+            </div>
+          </div>
+          <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_9b63e92a98ecdc99732456b0e_f5c4f66bcf" tabindex="-1" value=""></div>
+          <div class="clear submit-box" style="max-width: 120px !important">
+              <input type="submit" disabled="true" value="Subscribe" name="subscribe" id="mysql-embedded-subscribe" class="button mc-embedded-subscribe">
+          </div>
+        </form>
+      </div>
+    </div>
+
+Give us feedback
+----------------
+
+We appreciate any feedback. Please open a new `Github discussion <https://github.com/hasura/graphql-engine/discussions>`__, and we can discuss there.
--- a/install-manifests/docker-compose-mysql-preview/docker-compose.yaml
+++ b/install-manifests/docker-compose-mysql-preview/docker-compose.yaml
@ -0,0 +1,41 @@
+version: '3.6'
+services:
+  postgres:
+    image: postgres:12
+    restart: always
+    volumes:
+    - db_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_PASSWORD: postgrespassword
+  graphql-engine:
+    image: hasura/graphql-engine:pull5655-633f084f
+    ports:
+    - "8080:8080"
+    depends_on:
+    - "postgres"
+    command:
+    - graphql-engine
+    - --mysql-host 
+    - <mysql-host>
+    - --mysql-user 
+    - <mysql-user>
+    - --mysql-port 
+    - <mysql-port>
+    - --mysql-dbname 
+    - <mysql-dbname>
+    - --mysql-password 
+    - <mysql-password>
+    - serve 
+    restart: always
+    environment:
+      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
+      ## enable the console served by server
+      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
+      ## enable debugging mode. It is recommended to disable this in production
+      HASURA_GRAPHQL_DEV_MODE: "true"
+      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
+      ## uncomment next line to set an admin secret
+      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
+volumes:
+  db_data:
+