Merge branch 'master' of https://github.com/centerofci/mathesar into …

…pr/nk183/1211-2

mathesar/database/types.py

@@ -98,6 +98,20 @@ class UIType(Enum):
             MathesarCustomType.URI,
         }
     )
+    JSON_ARRAY = (
+        'jsonlist',
+        'JSON List',
+        {
+            MathesarCustomType.MATHESAR_JSON_ARRAY,
+        }
+    )
+    JSON_OBJECT = (
+        'map',
+        'Map',
+        {
+            MathesarCustomType.MATHESAR_JSON_OBJECT,
+        }
+    )
     # These are default Postgres types that we don't have specific behavior for yet in the UI.
     OTHER = (
         'other',

mathesar/tests/integration/conftest.py

@@ -7,6 +7,14 @@
 from mathesar.utils.tables import create_empty_table
 
 
+TIMEOUT_HACK = {
+    "timeout": 30000,
+}
+"""
+See https://github.com/centerofci/mathesar/issues/1285
+"""
+
+
 @pytest.fixture(autouse=True)
 def clear_cache():
     cache.clear()

mathesar/tests/integration/utils/table_actions.py

@@ -1,4 +1,5 @@
 from playwright.sync_api import expect
+from mathesar.tests.integration.conftest import TIMEOUT_HACK
 from mathesar.tests.integration.utils.validators import expect_modal_not_to_be_visible, expect_modal_to_be_visible
 
 
@@ -46,15 +47,15 @@ def get_column_header_locator(page, column_name):
 def open_column_options(page, column_name, column_type):
     page.click(get_column_header_locator(page, column_name))
     type_option = "button.type-switch"
-    expect(page.locator(type_option)).to_contain_text(column_type)
+    expect(page.locator(type_option)).to_contain_text(column_type, **TIMEOUT_HACK)
     page.click(type_option)
-    expect(page.locator(".type-list li.selected")).to_contain_text(column_type)
+    expect(page.locator(".type-list li.selected")).to_contain_text(column_type, **TIMEOUT_HACK)
 
 
 def open_column_options_and_verify_type(page, column_name, column_type, db_type):
     open_column_options(page, column_name, column_type)
     db_type_text = f"Database type {db_type}"
-    expect(page.locator(".type-options-content")).to_contain_text(db_type_text, use_inner_text=True)
+    expect(page.locator(".type-options-content")).to_contain_text(db_type_text, use_inner_text=True, **TIMEOUT_HACK)
 
 
 def get_cell_selector(page, table, row_number, column_name):

mathesar_ui/src/component-library/common/types/ComponentAndPropsTypes.ts

@@ -1,6 +1,17 @@
 import type { SvelteComponent } from 'svelte';
 
-export interface ComponentAndProps<T = Record<string, unknown>> {
+/**
+ * Why `T = unknown` here?
+ *
+ * This was previously `T = Record<string, unknown>` which seemed to make more
+ * sense at first because props must be objects. But then we ran into some TS
+ * errors that appeared to be related to this [open TS issue][1]. Using
+ * `unknown` sacrifices some type safety but it obviates weird hacks to get
+ * around that TS issue.
+ *
+ * [1]: https://github.com/microsoft/TypeScript/issues/37491
+ */
+export interface ComponentAndProps<T = unknown> {
   component: typeof SvelteComponent;
   props?: T;
 }

mathesar_ui/src/component-library/dynamic-input/BooleanInput.svelte → mathesar_ui/src/component-library/data-type-based-input/BooleanInput.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
   import Checkbox from '@mathesar-component-library-dir/checkbox/Checkbox.svelte';
-  import type { DynamicInputInterfaceType } from './types';
+  import type { DataTypeBasedInputInterface } from './types';
 
   export let value = false;
-  export let interfaceType: DynamicInputInterfaceType = 'checkbox';
+  export let interfaceType: DataTypeBasedInputInterface = 'checkbox';
 </script>
 
 {#if interfaceType === 'toggle'}

mathesar_ui/src/component-library/dynamic-input/DynamicInput.svelte → mathesar_ui/src/component-library/data-type-based-input/DataTypeBasedInput.svelte

@@ -4,15 +4,15 @@
   import StringInput from './StringInput.svelte';
   import BooleanInput from './BooleanInput.svelte';
   import type {
-    DynamicInputDataType,
-    DynamicInputInterfaceType,
-    DynamicInputSelectElement,
+    DataTypeBasedInputType,
+    DataTypeBasedInputInterface,
+    DataTypeBasedInputSelectElement,
   } from './types';
 
   /**
    * Type of input, one of: 'boolean', 'integer', 'float', 'string', 'date', 'datetime', 'time'
    */
-  export let dataType: DynamicInputDataType = 'string';
+  export let dataType: DataTypeBasedInputType = 'string';
 
   /**
    * Value of input. Depends on type.
@@ -26,7 +26,7 @@
    * string -> text, textarea, select. Default: text.
    */
   // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
-  export let interfaceType: DynamicInputInterfaceType = undefined;
+  export let interfaceType: DataTypeBasedInputInterface = undefined;
 
   // @ts-ignore: https://github.com/centerofci/mathesar/issues/1055
   let enumValues: unknown[] = undefined;
@@ -40,7 +40,7 @@
    * Applies when interfaceType is select. Additional configuration for options
    * that are displayed.
    */
-  export let options: DynamicInputSelectElement['options'] = undefined;
+  export let options: DataTypeBasedInputSelectElement['options'] = undefined;
 </script>
 
 {#if enumValues || interfaceType === 'select'}

mathesar_ui/src/component-library/dynamic-input/EnumInput.svelte → mathesar_ui/src/component-library/data-type-based-input/EnumInput.svelte

@@ -7,14 +7,14 @@
     getInitialValue,
   } from './utils';
   import type {
-    DynamicInputDataType,
-    DynamicInputSelectElement,
+    DataTypeBasedInputType,
+    DataTypeBasedInputSelectElement,
     EnumSelectOption,
   } from './types';
 
-  export let dataType: DynamicInputDataType;
+  export let dataType: DataTypeBasedInputType;
   export let enumValues: unknown[] | undefined = undefined;
-  export let options: DynamicInputSelectElement['options'] = undefined;
+  export let options: DataTypeBasedInputSelectElement['options'] = undefined;
   export let triggerAppearance: Appearance = 'default';
   export let value = getInitialValue(dataType, enumValues);
 

mathesar_ui/src/component-library/dynamic-input/StringInput.svelte → mathesar_ui/src/component-library/data-type-based-input/StringInput.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import TextInput from '@mathesar-component-library-dir/text-input/TextInput.svelte';
   import TextArea from '@mathesar-component-library-dir/text-area/TextArea.svelte';
-  import type { DynamicInputInterfaceType } from './types';
+  import type { DataTypeBasedInputInterface } from './types';
 
   export let value: string | undefined = undefined;
-  export let interfaceType: DynamicInputInterfaceType | undefined = undefined;
+  export let interfaceType: DataTypeBasedInputInterface | undefined = undefined;
 </script>
 
 {#if interfaceType === 'textarea'}

mathesar_ui/src/component-library/data-type-based-input/__meta__/DataTypeBasedInput.mdx

@@ -0,0 +1,24 @@
+import { Story, Canvas, ArgsTable, Source } from '@storybook/addon-docs/blocks';
+import DataTypeBasedInput from '../DataTypeBasedInput.svelte';
+
+# DataTypeBasedInput
+
+DataTypeBasedInput system design specification.
+
+## Usage
+
+### Boolean type
+
+<Canvas>
+  <Story name="boolean" id="components-datatypebasedinput--boolean" />
+</Canvas>
+
+### String type
+
+<Canvas>
+  <Story name="string" id="components-datatypebasedinput--string" />
+</Canvas>
+
+## Arguments
+
+<ArgsTable of={DataTypeBasedInput} />

mathesar_ui/src/component-library/data-type-based-input/__meta__/DataTypeBasedInput.stories.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Meta, Story } from '@storybook/addon-svelte-csf';
+  import Docs from './DataTypeBasedInput.mdx';
+  import DataTypeBasedInput from '../DataTypeBasedInput.svelte';
+
+  const meta = {
+    title: 'Components/DataTypeBasedInput',
+    parameters: {
+      docs: {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        page: Docs,
+        source: {
+          type: 'code',
+        },
+      },
+    },
+  };
+</script>
+
+<Meta {...meta} />
+
+<Story name="Boolean">
+  <DataTypeBasedInput dataType="boolean" />
+  <DataTypeBasedInput dataType="boolean" interfaceType="select" />
+</Story>
+
+<Story name="String">
+  <DataTypeBasedInput dataType="string" />
+  <DataTypeBasedInput dataType="string" interfaceType="textarea" />
+  <DataTypeBasedInput dataType="string" enum={['Pichu', 'Pikachu', 'Raichu']} />
+</Story>

mathesar_ui/src/component-library/dynamic-input/types.ts → mathesar_ui/src/component-library/data-type-based-input/types.ts

@@ -1,4 +1,4 @@
-export type DynamicInputDataType =
+export type DataTypeBasedInputType =
   | 'boolean'
   | 'integer'
   | 'float'
@@ -7,15 +7,15 @@ export type DynamicInputDataType =
   | 'datetime'
   | 'time';
 
-export type DynamicInputInterfaceType =
+export type DataTypeBasedInputInterface =
   | 'text'
   | 'textarea'
   | 'number'
   | 'checkbox'
   | 'toggle'
   | 'select';
 
-export interface DynamicInputSelectElement {
+export interface DataTypeBasedInputSelectElement {
   interfaceType: 'select';
   options?: Record<
     string,

mathesar_ui/src/component-library/dynamic-input/utils.ts → mathesar_ui/src/component-library/data-type-based-input/utils.ts

@@ -1,13 +1,13 @@
 import type {
-  DynamicInputDataType,
-  DynamicInputSelectElement,
+  DataTypeBasedInputType,
+  DataTypeBasedInputSelectElement,
   EnumSelectOption,
 } from './types';
 
 export function generateSelectOptions(
-  dataType: DynamicInputDataType,
+  dataType: DataTypeBasedInputType,
   enumValues?: unknown[],
-  options?: DynamicInputSelectElement['options'],
+  options?: DataTypeBasedInputSelectElement['options'],
 ): EnumSelectOption[] {
   if (dataType === 'boolean') {
     return [
@@ -40,7 +40,7 @@ export function getSelectedValue(
 }
 
 export function getInitialValue(
-  dataType: DynamicInputDataType,
+  dataType: DataTypeBasedInputType,
   enumValues?: unknown[],
 ): unknown {
   if (dataType === 'boolean') {

mathesar_ui/src/component-library/form-builder/FormInput.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
   // TODO: Use FormField component here
   import LabeledInput from '@mathesar-component-library-dir/labeled-input/LabeledInput.svelte';
-  import DynamicInput from '@mathesar-component-library-dir/dynamic-input/DynamicInput.svelte';
-  import type { DynamicInputDataType } from '@mathesar-component-library-dir/dynamic-input/types';
+  import DataTypeBasedInput from '@mathesar/component-library/data-type-based-input/DataTypeBasedInput.svelte';
+  import type { DataTypeBasedInputType } from '@mathesar/component-library/data-type-based-input/types';
   import type {
     FormInputElement,
     FormValueStore,
     FormValidationCheck,
   } from './types';
 
-  export let type: DynamicInputDataType;
+  export let type: DataTypeBasedInputType;
   export let label: FormInputElement['label'] = undefined;
   export let store: FormValueStore;
   export let validationErrors: FormValidationCheck[];
@@ -20,7 +20,7 @@
     {label}
     layout={type === 'boolean' ? 'inline-input-first' : 'stacked'}
   >
-    <DynamicInput
+    <DataTypeBasedInput
       {...$$restProps}
       dataType={type}
       {label}

mathesar_ui/src/component-library/form-builder/types.ts

@@ -1,6 +1,6 @@
 import type { SvelteComponent } from 'svelte';
 import type { Readable, Writable } from 'svelte/store';
-import type { DynamicInputDataType } from '@mathesar-component-library-dir/dynamic-input/types';
+import type { DataTypeBasedInputType } from '@mathesar-component-library-dir/data-type-based-input/types';
 
 export interface FormInputBaseElement {
   type: 'input';
@@ -68,7 +68,7 @@ export interface FormLayout {
 export type FormValidationCheck = 'isEmpty' | 'isInvalid';
 
 export interface FormConfigurationVariable {
-  type: DynamicInputDataType | 'custom';
+  type: DataTypeBasedInputType | 'custom';
   default?: unknown;
   enum?: unknown[];
   validation?: {

mathesar_ui/src/component-library/index.ts

@@ -37,7 +37,7 @@ export { default as TextInput } from './text-input/TextInput.svelte';
 export { AttachableDropdown, Dropdown } from './dropdown';
 export { DatePicker, InlineDateTimePicker } from './date-time-picker';
 export { default as DropdownMenu } from './dropdown-menu/DropdownMenu.svelte';
-export { default as DynamicInput } from './dynamic-input/DynamicInput.svelte';
+export { default as DataTypeBasedInput } from './data-type-based-input/DataTypeBasedInput.svelte';
 export { default as FileUpload } from './file-upload/FileUpload.svelte';
 export { default as FormattedInput } from './formatted-input/FormattedInput.svelte';
 export { default as Notification } from './notification/Notification.svelte';

mathesar_ui/src/component-library/types.ts

@@ -9,7 +9,7 @@ export type { PartiallyMissingOrUndefined } from './common/types/utilityTypes';
 export * from './icon/IconTypes';
 export * from './file-upload/FileUploadTypes';
 export * from './formatted-input/FormattedInputTypes';
-export * from './dynamic-input/types';
+export * from './data-type-based-input/types';
 export * from './form-builder/types';
 export * from './cancel-or-proceed-button-pair/CancelOrProceedButtonPairTypes';
 export * from './list-box/ListBoxTypes';

mathesar_ui/src/components/ColumnName.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Column } from '@mathesar/stores/table-data/types';
+  import type { Column } from '@mathesar/api/tables/columns';
   import { getColumnIconProps } from './cell/utils';
   import TypeIcon from './TypeIcon.svelte';