Merge branch 'develop' into wip/radeusgd/8805-self-type-check

# Conflicts:
#	CHANGELOG.md

CHANGELOG.md

@@ -1044,8 +1044,9 @@
 - [DataflowError.withoutTrace doesn't store stacktrace][8608]
 - [Derive --in-project from --run source location][8775]
 - [Binary operator resolution based on that value][8779]
-- [Check type of `self` when calling a method using the static syntax][8867]
+- [Add run_google_report method][8907]
 - [Execute and debug individual Enso files in VSCode extension][8923]
+- [Check type of `self` when calling a method using the static syntax][8867]
 
 [3227]: https://github.com/enso-org/enso/pull/3227
 [3248]: https://github.com/enso-org/enso/pull/3248
@@ -1201,8 +1202,9 @@
 [8608]: https://github.com/enso-org/enso/pull/8608
 [8775]: https://github.com/enso-org/enso/pull/8775
 [8779]: https://github.com/enso-org/enso/pull/8779
-[8867]: https://github.com/enso-org/enso/pull/8867
+[8907]: https://github.com/enso-org/enso/pull/8907
 [8923]: https://github.com/enso-org/enso/pull/8923
+[8867]: https://github.com/enso-org/enso/pull/8867
 
 # Enso 2.0.0-alpha.18 (2021-10-12)
 

app/gui/view/graph-editor/src/builtin/visualization/java_script/sql.js

@@ -81,8 +81,9 @@ loadScript('https://cdnjs.cloudflare.com/ajax/libs/sql-formatter/4.0.2/sql-forma
  */
 class SqlVisualization extends Visualization {
     // TODO Change the type below once #837 is done:
-    // 'Standard.Database.Data.Table.Table | Standard.Database.Data.Column.Column'
-    static inputType = 'Standard.Database.Data.Table.Table | Standard.Database.Data.Column.Column'
+    // 'Standard.Database.Data.Table.Table | Standard.Database.Data.DB_Column.DB_Column'
+    static inputType =
+        'Standard.Database.Data.Table.Table | Standard.Database.Data.DB_Column.DB_Column'
     static label = 'SQL Query'
 
     constructor(api) {

app/gui2/e2e/main.ts

@@ -1,5 +1,6 @@
 import 'enso-dashboard/src/tailwind.css'
 import { createPinia } from 'pinia'
+import { initializeFFI } from 'shared/ast/ffi'
 import { createApp, ref } from 'vue'
 import { mockDataHandler, mockLSHandler } from '../mock/engine'
 import '../src/assets/base.css'
@@ -55,4 +56,4 @@ provideVisualizationConfig._mock(
   },
   app,
 )
-app.mount('#app')
+initializeFFI().then(() => app.mount('#app'))

app/gui2/package.json

@@ -129,7 +129,6 @@
     "unbzip2-stream": "^1.4.3",
     "vite": "^4.4.9",
     "vite-plugin-inspect": "^0.7.38",
-    "vite-plugin-top-level-await": "^1.3.1",
     "vitest": "^0.34.2",
     "vue-react-wrapper": "^0.3.1",
     "vue-tsc": "^1.8.8"

app/gui2/src/components/ComponentBrowser/__tests__/input.test.ts

@@ -17,9 +17,12 @@ import {
 import type { AstId } from '@/util/ast/abstract'
 import { unwrap } from '@/util/data/result'
 import { tryIdentifier, tryQualifiedName } from '@/util/qualifiedName'
+import { initializeFFI } from 'shared/ast/ffi'
 import type { ExternalId, Uuid } from 'shared/yjsModel'
 import { expect, test } from 'vitest'
 
+await initializeFFI()
+
 test.each([
   ['', 0, { type: 'insert', position: 0 }, {}],
   [

app/gui2/src/components/GraphEditor/GraphNode.vue

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script setup lang="ts">
 import { nodeEditBindings } from '@/bindings'
 import CircularMenu from '@/components/CircularMenu.vue'
 import GraphNodeError from '@/components/GraphEditor/GraphNodeError.vue'
@@ -38,9 +38,7 @@ const prefixes = Prefixes.FromLines({
   skip: 'SKIP __',
   freeze: 'FREEZE __',
 })
-</script>
 
-<script setup lang="ts">
 const props = defineProps<{
   node: Node
   edited: boolean

app/gui2/src/components/visualizations/SQLVisualization.vue

@@ -1,7 +1,8 @@
 <script lang="ts">
 export const name = 'SQL Query'
 export const icon = 'braces'
-export const inputType = 'Standard.Database.Data.Table.Table | Standard.Database.Data.Column.Column'
+export const inputType =
+  'Standard.Database.Data.Table.Table | Standard.Database.Data.DB_Column.DB_Column'
 export const defaultPreprocessor = [
   'Standard.Visualization.SQL.Visualization',
   'prepare_visualization',

app/gui2/src/providers/__tests__/widgetRegistry.test.ts

@@ -9,11 +9,14 @@ import {
 import { GraphDb } from '@/stores/graph/graphDatabase'
 import { Ast } from '@/util/ast'
 import { ApplicationKind, ArgumentInfoKey } from '@/util/callTree'
+import { initializeFFI } from 'shared/ast/ffi'
 import { describe, expect, test } from 'vitest'
 import { defineComponent } from 'vue'
 import type { PortId } from '../portInfo'
 import { DisplayMode, argsWidgetConfigurationSchema } from '../widgetRegistry/configuration'
 
+await initializeFFI()
+
 describe('WidgetRegistry', () => {
   function makeMockWidget<T extends WidgetInput>(
     name: string,

app/gui2/src/stores/graph/__tests__/graphDatabase.test.ts

@@ -1,9 +1,12 @@
 import { asNodeId, GraphDb } from '@/stores/graph/graphDatabase'
 import { Ast, RawAst } from '@/util/ast'
 import assert from 'assert'
+import { initializeFFI } from 'shared/ast/ffi'
 import { IdMap, type ExternalId } from 'shared/yjsModel'
 import { expect, test } from 'vitest'
 
+await initializeFFI()
+
 /**
  * Create a predictable fake UUID which contains given number in decimal at the end.
  * @param x sequential value, e.g. 15

app/gui2/src/util/ast/__tests__/aliasAnalysis.test.ts

@@ -28,9 +28,12 @@
 import { assertDefined } from '@/util/assert'
 import { AliasAnalyzer } from '@/util/ast/aliasAnalysis'
 import { MappedKeyMap, MappedSet } from '@/util/containers'
+import { initializeFFI } from 'shared/ast/ffi'
 import { sourceRangeKey, type SourceRange } from 'shared/yjsModel'
 import { expect, test } from 'vitest'
 
+await initializeFFI()
+
 /** The type of annotation. */
 enum AnnotationType {
   /** An identifier binding (introducing variable). */

app/gui2/src/util/ast/aliasAnalysis.ts

@@ -8,12 +8,9 @@ import {
   readTokenSpan,
 } from '@/util/ast'
 import { MappedKeyMap, MappedSet, NonEmptyStack } from '@/util/containers'
-import { initializeFFI } from 'shared/ast/ffi'
 import type { LazyObject } from 'shared/ast/parserSupport'
 import { rangeIsBefore, sourceRangeKey, type SourceRange } from 'shared/yjsModel'
 
-await initializeFFI()
-
 const ACCESSOR_OPERATOR = '.'
 
 const LAMBDA_OPERATOR = '->'

app/gui2/vite.config.ts

@@ -6,7 +6,6 @@ import postcssNesting from 'postcss-nesting'
 import tailwindcss from 'tailwindcss'
 import tailwindcssNesting from 'tailwindcss/nesting'
 import { defineConfig, type Plugin } from 'vite'
-import topLevelAwait from 'vite-plugin-top-level-await'
 // @ts-expect-error
 import * as tailwindConfig from '../ide-desktop/lib/dashboard/tailwind.config'
 import { createGatewayServer } from './ydoc-server'
@@ -18,7 +17,7 @@ const IS_CLOUD_BUILD = process.env.CLOUD_BUILD === 'true'
 // https://vitejs.dev/config/
 export default defineConfig({
   cacheDir: '../../node_modules/.cache/vite',
-  plugins: [vue(), gatewayServer(), topLevelAwait()],
+  plugins: [vue(), gatewayServer()],
   optimizeDeps: {
     entries: 'index.html',
   },

app/ide-desktop/lib/dashboard/src/layouts/dashboard/InviteUsersModal.tsx

@@ -3,6 +3,8 @@ import * as React from 'react'
 
 import isEmail from 'validator/es/lib/isEmail'
 
+import CrossIcon from 'enso-assets/cross.svg'
+
 import * as asyncEffectHooks from '#/hooks/asyncEffectHooks'
 import * as toastAndLogHooks from '#/hooks/toastAndLogHooks'
 
@@ -14,9 +16,46 @@ import Modal from '#/components/Modal'
 
 import * as backendModule from '#/services/Backend'
 
-// ==============================
-// === ManagePermissionsModal ===
-// ==============================
+// =================
+// === Constants ===
+// =================
+
+/** The minimum width of the input for adding a new email. */
+const MIN_EMAIL_INPUT_WIDTH = 120
+
+// =============
+// === Email ===
+// =============
+
+/** Props for an {@link Email}. */
+interface InternalEmailProps {
+  readonly email: string
+  readonly isValid: boolean
+  readonly doDelete: () => void
+}
+
+/** A self-validating email display. */
+function Email(props: InternalEmailProps) {
+  const { email, isValid, doDelete } = props
+  return (
+    <div
+      className={`inline-flex gap-0.5 items-center rounded-full py-0.5 px-1 m-0.5 ${
+        isValid ? 'bg-dim/5' : 'bg-red-400/25 text-red-900'
+      }`}
+    >
+      {email}{' '}
+      <img
+        className="rounded-full cursor-pointer hover:brightness-50"
+        src={CrossIcon}
+        onClick={doDelete}
+      />
+    </div>
+  )
+}
+
+// ========================
+// === InviteUsersModal ===
+// ========================
 
 /** Props for an {@link InviteUsersModal}. */
 export interface InviteUsersModalProps {
@@ -31,37 +70,23 @@ export default function InviteUsersModal(props: InviteUsersModalProps) {
   const { backend } = backendProvider.useBackend()
   const { unsetModal } = modalProvider.useSetModal()
   const toastAndLog = toastAndLogHooks.useToastAndLog()
-  const [newEmails, setNewEmails] = React.useState(new Set<string>())
+  const [newEmails, setNewEmails] = React.useState<string[]>([])
   const [email, setEmail] = React.useState<string>('')
   const position = React.useMemo(() => eventTarget?.getBoundingClientRect(), [eventTarget])
   const members = asyncEffectHooks.useAsyncEffect([], () => backend.listUsers(), [backend])
   const existingEmails = React.useMemo(
     () => new Set(members.map<string>(member => member.email)),
     [members]
   )
-  const invalidEmailError = React.useMemo(
+  const canSubmit = React.useMemo(
     () =>
-      email === ''
-        ? 'Email is blank'
-        : !isEmail(email)
-        ? `'${email}' is not a valid email`
-        : existingEmails.has(email)
-        ? `'${email}' is already in the organization`
-        : newEmails.has(email)
-        ? `You are already adding '${email}'`
-        : null,
-    [email, existingEmails, newEmails]
+      newEmails.length > 0 &&
+      newEmails.every(
+        (newEmail, i) =>
+          isEmail(newEmail) && !existingEmails.has(newEmail) && newEmails.indexOf(newEmail) === i
+      ),
+    [existingEmails, newEmails]
   )
-  const isEmailValid = invalidEmailError == null
-
-  const doAddEmail = () => {
-    if (!isEmailValid) {
-      toastAndLog(invalidEmailError)
-    } else {
-      setNewEmails(oldNewEmails => new Set([...oldNewEmails, email]))
-      setEmail('')
-    }
-  }
 
   const doSubmit = () => {
     unsetModal()
@@ -90,10 +115,7 @@ export default function InviteUsersModal(props: InviteUsersModalProps) {
         tabIndex={-1}
         style={
           position != null
-            ? {
-                left: position.left + window.scrollX,
-                top: position.top + window.scrollY,
-              }
+            ? { left: position.left + window.scrollX, top: position.top + window.scrollY }
             : {}
         }
         className="sticky w-115.25 rounded-2xl before:absolute before:bg-frame-selected before:backdrop-blur-3xl before:rounded-2xl before:w-full before:h-full"
@@ -116,50 +138,75 @@ export default function InviteUsersModal(props: InviteUsersModalProps) {
             {/* Space reserved for other tabs. */}
           </div>
           <form
-            className="flex gap-1"
+            className="grow"
             onSubmit={event => {
               event.preventDefault()
-              doAddEmail()
+              if (email !== '') {
+                setNewEmails([...newEmails, email])
+                setEmail('')
+              } else if (canSubmit) {
+                doSubmit()
+              }
             }}
           >
-            <div className="flex items-center grow rounded-full border border-black/10 gap-2 px-2">
+            <label className="block min-h-5lh rounded-2xl border border-black/10 py-0.5 px-1">
+              {Array.from(newEmails, (newEmail, i) => (
+                <Email
+                  key={i}
+                  email={newEmail}
+                  isValid={
+                    isEmail(newEmail) &&
+                    !existingEmails.has(newEmail) &&
+                    newEmails.indexOf(newEmail) === i
+                  }
+                  doDelete={() => {
+                    setNewEmails([...newEmails.slice(0, i), ...newEmails.slice(i + 1)])
+                  }}
+                />
+              ))}
               <input
+                autoFocus
                 type="text"
                 placeholder="Type email to invite"
-                className="w-full bg-transparent"
+                className="bg-transparent h-6 leading-5 py-px px-1 w-30 max-w-full"
                 value={email}
+                onKeyDown={event => {
+                  if (
+                    event.key === 'Backspace' &&
+                    event.currentTarget.selectionStart === 0 &&
+                    event.currentTarget.selectionEnd === 0
+                  ) {
+                    setNewEmails(newEmails.slice(0, -1))
+                  }
+                }}
                 onInput={event => {
-                  setEmail(event.currentTarget.value)
+                  const element = event.currentTarget
+                  const value = element.value
+                  if (/ /.test(value)) {
+                    const parts = value.split(' ')
+                    setNewEmails([...newEmails, ...parts.slice(0, -1).filter(part => part !== '')])
+                    setEmail(parts[parts.length - 1] ?? '')
+                    element.style.width = `${MIN_EMAIL_INPUT_WIDTH}px`
+                  } else {
+                    setEmail(value)
+                    element.style.width = '0px'
+                    const contentWidth = element.scrollWidth
+                    element.style.width = `${Math.max(contentWidth, MIN_EMAIL_INPUT_WIDTH)}px`
+                  }
                 }}
               />
-            </div>
-            <button
-              type="submit"
-              disabled={!isEmailValid}
-              {...(!isEmailValid ? { title: invalidEmailError } : {})}
-              className="text-tag-text bg-invite rounded-full whitespace-nowrap px-4 py-1 disabled:opacity-30"
-            >
-              <div className="h-6 py-0.5">Add User</div>
-            </button>
+            </label>
           </form>
-          <ul className="flex flex-col px-1">
-            {[...newEmails].map(newEmail => (
-              <li key={newEmail} className="h-6 leading-5 py-px">
-                {newEmail}
-              </li>
-            ))}
-          </ul>
           <div className="self-start">
             <button
               type="submit"
-              disabled={!isEmailValid && email !== ''}
-              {...(!isEmailValid && email !== '' ? { title: invalidEmailError } : {})}
+              disabled={!canSubmit}
               className="text-tag-text bg-invite rounded-full px-4 py-1 disabled:opacity-30"
               onClick={() => {
                 doSubmit()
               }}
             >
-              <div className="h-6 py-0.5">Invite All</div>
+              <div className="h-6 py-0.5">Invite</div>
             </button>
           </div>
         </div>