Merge branch 'master' into null_cell_edit

mathesar-foundation · Jan 30, 2022 · 332043e · 332043e
2 parents e414943 + 3b7c26b
commit 332043e
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 53 deletions.
diff --git a/.github/workflows/run-lint-audit-tests-ui.yml b/.github/workflows/run-lint-audit-tests-ui.yml
@@ -49,6 +49,29 @@ jobs:
       - run: npm install --no-audit --prefer-offline
       - run: npm run lint
 
+  typecheck:
+    runs-on: ubuntu-latest
+    # We only want to run on external PRs, since internal PRs are covered by "push"
+    # This prevents this from running twice on internal PRs
+    if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name != github.repository
+    defaults:
+      run:
+        working-directory: ./mathesar_ui
+    timeout-minutes: 5
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+      - id: npm-cache-dir
+        run: echo "::set-output name=dir::$(npm config get cache)"
+      - uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: ${{ steps.npm-cache-dir.outputs.dir }}
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-
+      - run: npm install --no-audit --prefer-offline
+      - run: npm run typecheck
+
   audit:
     runs-on: ubuntu-latest
     # We only want to run on external PRs, since internal PRs are covered by "push"

diff --git a/mathesar/templates/mathesar/base.html b/mathesar/templates/mathesar/base.html
@@ -8,70 +8,84 @@
     <title>Mathesar - {% block title %}{% endblock %}</title>
 
     <!-- TODO: Specify Mathesar favicon. Using a dummy data URI until then. -->
-    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
+    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
 
     <style type="text/css">
-      html, body {
+      html,
+      body {
         position: absolute;
         width: 100%;
         height: 100%;
         overflow: hidden;
-        font-family: -apple-system,system-ui,BlinkMacSystemFont,'Segoe UI',
-                      Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',
-                      Helvetica, Arial, sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol';
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+          Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica,
+          Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Segoe UI Symbol";
         font-weight: 400;
         margin: 0;
         padding: 0;
         font-size: 14px;
-        line-height: 1em;
-        color: #1E1E1E;
+        line-height: 1.2;
+        color: #1e1e1e;
       }
       * {
         box-sizing: border-box;
         outline: 0;
       }
     </style>
-    {% if not development_mode %}
-      {% for css_file in manifest_data.module_css %}
-        <link rel="stylesheet" href="{% static css_file %}">
-      {% endfor %}
-    {% endif %}
-    {% block styles %}
-    {% endblock %}
+    {% if not development_mode %} {% for css_file in manifest_data.module_css %}
+    <link rel="stylesheet" href="{% static css_file %}" />
+    {% endfor %} {% endif %} {% block styles %} {% endblock %}
   </head>
   <body>
-    {% block scripts %}
-    {% endblock %}
-
-    {% if development_mode %}
-      <script type="module" src="{{ client_dev_url }}/@vite/client"></script>
-      <script type="module" src="{{ client_dev_url }}/src/main.ts"></script>
+    {% block scripts %} {% endblock %} {% if development_mode %}
+    <script type="module" src="{{ client_dev_url }}/@vite/client"></script>
+    <script type="module" src="{{ client_dev_url }}/src/main.ts"></script>
     {% else %}
-      <!-- For legacy browsers that do not support modules -->
-      <script nomodule>
-        !function(){
-          var e=document,t=e.createElement("script");
-          if(!("noModule"in t)&&"onbeforeload"in t){
-            var n=!1;e.addEventListener(
-              "beforeload",
-              (function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()}),
-              !0
-            ),t.type="module",t.src=".",e.head.appendChild(t),t.remove()
-          }
-        }();
-      </script>
+    <!-- For legacy browsers that do not support modules -->
+    <script nomodule>
+      !(function () {
+        var e = document,
+          t = e.createElement("script");
+        if (!("noModule" in t) && "onbeforeload" in t) {
+          var n = !1;
+          e.addEventListener(
+            "beforeload",
+            function (e) {
+              if (e.target === t) n = !0;
+              else if (!e.target.hasAttribute("nomodule") || !n) return;
+              e.preventDefault();
+            },
+            !0
+          ),
+            (t.type = "module"),
+            (t.src = "."),
+            e.head.appendChild(t),
+            t.remove();
+        }
+      })();
+    </script>
 
-      {% for js_file in manifest_data.module_vendor_js %}
-        <link rel="modulepreload" href="{% static js_file %}">
-      {% endfor %}
-      <script type="module" src="{% static manifest_data.module_js %}"></script>
-      <script nomodule src="{% static manifest_data.legacy_polyfill_js %}"></script>
-      {% for js_file in manifest_data.legacy_vendor_js %}
-        <script nomodule src="{% static js_file %}"></script>
-      {% endfor %}
-      <script nomodule id="vite-legacy-entry" data-src="{% static manifest_data.legacy_js %}">
-        System.import(document.getElementById("vite-legacy-entry").getAttribute("data-src"))
-      </script>
+    {% for js_file in manifest_data.module_vendor_js %}
+    <link rel="modulepreload" href="{% static js_file %}" />
+    {% endfor %}
+    <script type="module" src="{% static manifest_data.module_js %}"></script>
+    <script
+      nomodule
+      src="{% static manifest_data.legacy_polyfill_js %}"
+    ></script>
+    {% for js_file in manifest_data.legacy_vendor_js %}
+    <script nomodule src="{% static js_file %}"></script>
+    {% endfor %}
+    <script
+      nomodule
+      id="vite-legacy-entry"
+      data-src="{% static manifest_data.legacy_js %}"
+    >
+      System.import(
+        document.getElementById("vite-legacy-entry").getAttribute("data-src")
+      );
+    </script>
     {% endif %}
   </body>
 </html>
diff --git a/mathesar_ui/package.json b/mathesar_ui/package.json
@@ -7,7 +7,7 @@
     "format": "prettier --write .",
     "check-format": "prettier --check .",
     "lint": "eslint .",
-    "typecheck": "svelte-check",
+    "typecheck": "svelte-check --tsconfig tsconfig.json --threshold error .",
     "build": "vite build",
     "test": "jest",
     "storybook": "start-storybook -p 6006",

diff --git a/...r_ui/src/component-library/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte b/...r_ui/src/component-library/cancel-or-proceed-button-pair/CancelOrProceedButtonPair.svelte
@@ -38,12 +38,18 @@
   export let canProceed = true;
   export let canCancel = true;
   export let isProcessing = false;
-  /**
-   * Bind to this function if you want to be able to programmatically call the
-   * proceed function from within the parent component and show the loading
-   * spinner while the promise is resolving.
-   */
-  export let proceed: () => Promise<void> = async () => {};
+
+  let spinnerButtonProceed: () => Promise<void> = async () => {};
+
+  export function proceed(): Promise<void> {
+    // Why do we have `spinnerButtonProceed` and `proceed` separately?
+    //
+    // Because we want to export a const (`proceed` here) to make it clear to
+    // consuming components that they can't supply their own function. AND we
+    // need for _this_ component to be able to change the function in the
+    // process of binding to the value from lower down in the component tree.
+    return spinnerButtonProceed();
+  }
 
   $: fullCancelButton = { ...cancelButtonDefaults, ...cancelButton };
   $: fullProceedButton = { ...proceedButtonDefaults, ...proceedButton };
@@ -56,7 +62,7 @@
   </Button>
   <SpinnerButton
     bind:isProcessing
-    bind:proceed
+    bind:proceed={spinnerButtonProceed}
     onClick={onProceed}
     icon={fullProceedButton.icon}
     label={fullProceedButton.label}

diff --git a/mathesar_ui/src/header/Header.scss b/mathesar_ui/src/header/Header.scss
@@ -25,6 +25,13 @@ header {
     border-radius: 3px;
     margin-left: auto;
     margin-right: auto;
+    display: flex;
+    align-items: center;
+
+    > * {
+      flex-shrink: 0;
+      flex-grow: 1;
+    }
   }
 
   .right-options {

diff --git a/mathesar_ui/src/sections/table-view/row/Row.scss b/mathesar_ui/src/sections/table-view/row/Row.scss
@@ -122,7 +122,7 @@ section.table-section .tab-container .table-data .body {
         right: 0;
         top: 0;
         bottom: 0;
-        padding: 7px 14px;
+        padding: 6px 14px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;