First steps towards enabling TypeScript strict mode

mathesar_ui/.eslintrc.cjs

@@ -52,6 +52,7 @@ module.exports = {
         '@typescript-eslint/no-unsafe-assignment': 'off',
         '@typescript-eslint/no-unsafe-call': 'off',
         '@typescript-eslint/no-unsafe-return': 'off',
+        'object-curly-newline': 'off',
       },
     },
     {

mathesar_ui/src/component-library/button/Button.svelte

@@ -18,7 +18,7 @@
   export { classes as class };
 
   // Underlying DOM element for direct access
-  export let element: HTMLElement = null;
+  export let element: HTMLElement | undefined = undefined;
 
   $: allClasses = ['btn', `btn-${appearance}`, `size-${size}`, classes].join(' ');
 </script>

mathesar_ui/src/component-library/common/utils/EventHandler.ts

@@ -9,7 +9,7 @@ export default class EventHandler {
     if (!this.listeners.has(eventName)) {
       this.listeners.set(eventName, new Set());
     }
-    this.listeners.get(eventName).add(callback);
+    this.listeners.get(eventName)?.add(callback);
     return () => {
       this.listeners?.get(eventName)?.delete(callback);
     };

mathesar_ui/src/component-library/dropdown/AccompanyingElements.ts

@@ -24,7 +24,7 @@ import type {
 export class AccompanyingElements implements Readable<Set<HTMLElement>> {
   elements = writable(new Set<HTMLElement>());
 
-  parent: AccompanyingElements;
+  parent: AccompanyingElements | undefined;
 
   constructor(parent?: AccompanyingElements) {
     this.parent = parent;

mathesar_ui/src/component-library/dropdown/Dropdown.svelte

@@ -27,8 +27,8 @@
   export let contentClass = '';
   export let isOpen = false;
   export let closeOnInnerClick = false;
-  export let ariaLabel:string = null;
-  export let ariaControls: string = null;
+  export let ariaLabel: string | undefined = undefined;
+  export let ariaControls: string | undefined = undefined;
   export let placement: Placement = 'bottom-start';
   export let showArrow = true;
   export let size: Size = 'medium';
@@ -41,12 +41,18 @@
     if (!contentElement) {
       await tick();
     }
+    if (!contentElement) {
+      return;
+    }
     parentAccompanyingElements?.add(contentElement);
   }
   async function unsetThisContentToAccompanyParent() {
     if (!contentElement) {
       await tick();
     }
+    if (!contentElement) {
+      return;
+    }
     parentAccompanyingElements?.delete(contentElement);
   }
   onDestroy(unsetThisContentToAccompanyParent);

mathesar_ui/src/component-library/file-upload/FileUpload.svelte

@@ -23,9 +23,9 @@
   const dispatch = createEventDispatcher();
   const componentId = `file-import-${getId()}`;
 
-  export let fileProgress: Record<string, FileUploadProgress> = null;
+  export let fileProgress: Record<string, FileUploadProgress> | undefined = undefined;
   export let multiple = false;
-  export let fileUploads: FileUpload[] = null;
+  export let fileUploads: FileUpload[] | undefined = undefined;
 
   let fileId = 0;
   let state = 'idle';
@@ -71,7 +71,10 @@
   }
 
   function onFileDrop(event: DragEvent) {
-    const fileList = event.dataTransfer.files;
+    const fileList = event.dataTransfer?.files;
+    if (!fileList) {
+      return;
+    }
     if (multiple) {
       processFiles(event, fileList);
     } else {
@@ -86,8 +89,8 @@
   }
 </script>
 
-<div class="file-upload" class:inprogress={fileUploads?.length > 0}>
-  {#if fileUploads?.length > 0}
+<div class="file-upload" class:inprogress={fileUploads && fileUploads.length > 0}>
+  {#if fileUploads && fileUploads.length > 0}
     <div class="files">
       {#each fileUploads as upload (upload.fileId)}
         <div class="file">

mathesar_ui/src/component-library/icon/Icon.svelte

@@ -16,17 +16,17 @@
   export let pulse = false;
 
   // Flips the icon. Allowed values are 'vertical', 'horizontal' or 'both'.
-  export let flip: IconFlip = null;
+  export let flip: IconFlip | undefined = undefined;
 
   // Rotates the icon to a specified angle. Allowed values are '90', '180', '270'.
-  export let rotate: IconRotate = null;
+  export let rotate: IconRotate | undefined = undefined;
 
   // Additional classes
   let classes = '';
   export { classes as class };
 
   // The aria-label for the icon. Typically describes the icon.
-  export let label: string = null;
+  export let label: string | undefined = undefined;
 
   function concatClasses(_classes?: string, _flip?: IconFlip, _rotate?: IconRotate): string {
     const faClass = ['fa-icon'];

mathesar_ui/src/component-library/icon/__meta__/Icon.stories.svelte

@@ -21,13 +21,13 @@
         },
       },
       flip: {
-        control: { type: 'inline-radio', options: ['horizontal', 'vertical', 'both', null] },
+        control: { type: 'inline-radio', options: ['horizontal', 'vertical', 'both', undefined] },
         table: {
           type: { summary: 'enum' },
         },
       },
       rotate: {
-        control: { type: 'inline-radio', options: [90, 180, 270, null] },
+        control: { type: 'inline-radio', options: [90, 180, 270, undefined] },
         table: {
           type: { summary: 'enum' },
         },

mathesar_ui/src/component-library/pagination/Pagination.svelte

@@ -25,7 +25,7 @@
   export let total = 0;
 
   // Can be used to specify a path.
-  export let getLink: (page: number, pageSize: number) => string = null;
+  export let getLink: ((page: number, pageSize: number) => string) | undefined = undefined;
 
   // Total number of pages.
   export let pageCount = 0;

mathesar_ui/src/component-library/tabs/Tab.svelte

@@ -9,16 +9,16 @@
   export let totalTabs: number;
   export let isActive = false;
   export let allowRemoval = false;
-  export let getTabURL: (tab: Tab) => string;
+  export let getTabURL: (tab: Tab) => string | undefined;
 </script>
 
 <li role="presentation" class="tab" class:active={isActive} tabindex="-1" 
-    style={isActive ? null : `width: ${Math.floor(100 / totalTabs)}%;`}>
+    style={isActive ? undefined : `width: ${Math.floor(100 / totalTabs)}%;`}>
 
-  <a role="tab" href={getTabURL(tab) || '#'} tabindex="0"
+  <a role="tab" href={getTabURL(tab) ?? '#'} tabindex="0"
       aria-selected={isActive} aria-disabled="{!!tab.disabled}"
-      id={isActive ? `mtsr-${componentId}-tab` : null} data-tinro-ignore
-      aria-controls={isActive ? `mtsr-${componentId}-tabpanel` : null}
+      id={isActive ? `mtsr-${componentId}-tab` : undefined} data-tinro-ignore
+      aria-controls={isActive ? `mtsr-${componentId}-tabpanel` : undefined}
       on:focus on:blur on:mousedown
       on:click>
         <slot></slot>

mathesar_ui/src/component-library/tree/TreeItem.svelte

@@ -55,7 +55,7 @@
 {#if entry[childKey]}
   <li aria-level={level + 1} role="treeitem" tabindex="-1">
     <Button appearance="plain" class="item parent" on:click={toggle}>
-      <Icon data={faCaretRight} rotate={isOpen ? IconRotate.NINETY : null}/>
+      <Icon data={faCaretRight} rotate={isOpen ? IconRotate.NINETY : undefined}/>
       <span>{entry[labelKey]}</span>
     </Button>
 

mathesar_ui/src/header/Header.svelte

@@ -28,6 +28,9 @@
   import ImportIndicator from './import-indicator/ImportIndicator.svelte';
 
   async function handleCreateEmptyTable() {
+    if (!$currentSchemaId) {
+      return;
+    }
     const table = await createTable($currentSchemaId);
     await refetchTablesForSchema($currentSchemaId);
     const tab = constructTabularTab(

mathesar_ui/src/header/schema-selector/SchemaSelector.svelte

@@ -67,21 +67,25 @@
     <div class="schema-selector">
       <div class="databases">
         <div class="section-header">
-          Databases ({$databases.data.length})
+          Databases ({$databases?.data?.length ?? 0})
         </div>
-        <ul>
-          {#each $databases.data as database (database.name)}
-            <li class="item" class:active={interalSelectedDB === database.name}>
-              <button type="button"
-                on:click={() => selectDB(database)}
-                on:mouseover={() => selectDB(database)}
-                on:focus={() => selectDB(database)}>
-                  <TextAvatar text={database.name} />
-                  {database.name}
-              </button>
-            </li>
-          {/each}
-        </ul>
+        {#if $databases.data && $databases.data.length}
+          <ul>
+            {#each $databases.data as database (database.name)}
+              <li class="item" class:active={interalSelectedDB === database.name}>
+                <button type="button"
+                  on:click={() => selectDB(database)}
+                  on:mouseover={() => selectDB(database)}
+                  on:focus={() => selectDB(database)}>
+                    <TextAvatar text={database.name} />
+                    {database.name}
+                </button>
+              </li>
+            {/each}
+          </ul>
+        {:else}
+          <div>No databases</div>
+        {/if}
       </div>
 
       <div class="schemas">

mathesar_ui/src/pages/schemas/AddEditSchema.svelte

@@ -14,11 +14,11 @@
 
   export let isOpen = false;
   export let isEditMode = false;
-  export let schema: SchemaEntry = null;
+  export let schema: SchemaEntry;
 
   let name = '';
   let state: States = States.Idle;
-  let error: string;
+  let error: string | undefined;
 
   onMount(() => {
     if (isEditMode) {
@@ -27,7 +27,7 @@
   });
 
   function isDuplicateName(_isEditMode: boolean, _name: string): boolean {
-    if (_isEditMode && _name.toLowerCase().trim() === schema?.name.toLowerCase().trim()) {
+    if (_isEditMode && _name.toLowerCase().trim() === schema.name.toLowerCase().trim()) {
       return false;
     }
     return Array.from($schemas?.data || []).some(
@@ -46,12 +46,9 @@
   async function saveSchema() {
     try {
       state = States.Loading;
-      error = null;
+      error = undefined;
       if (isEditMode) {
-        await updateSchema($currentDBName, {
-          ...schema,
-          name,
-        });
+        await updateSchema($currentDBName, { ...schema, name });
       } else {
         await createSchema($currentDBName, name);
       }

mathesar_ui/src/pages/schemas/Schemas.svelte

@@ -19,13 +19,13 @@
     if ($currentDBName !== _db) {
       $currentDBName = _db;
     }
-    $currentSchemaId = null;
+    $currentSchemaId = undefined;
   }
 
   $: changeCurrentDB(database);
 
   let filterQuery = '';
-  let activeSchema: SchemaEntry = null;
+  let activeSchema: SchemaEntry | undefined;
 
   function filterSchemas(schemaData: DBSchemaStoreData['data'], filter: string): SchemaEntry[] {
     const filtered: SchemaEntry[] = [];
@@ -40,7 +40,7 @@
   $: displayList = filterSchemas($schemas.data, filterQuery);
 
   function addSchema() {
-    activeSchema = null;
+    activeSchema = undefined;
     isAddModalOpen = true;
   }
 
@@ -80,9 +80,9 @@
   </div>
 </main>
 
-{#if isAddModalOpen}
+{#if isAddModalOpen && activeSchema}
   <AddEditSchema bind:isOpen={isAddModalOpen}
-    isEditMode={activeSchema !== null} schema={activeSchema}/>
+    isEditMode={activeSchema !== undefined} schema={activeSchema}/>
 {/if}
 
 <style global lang="scss">

mathesar_ui/src/sections/Base.svelte

@@ -38,9 +38,9 @@
   // TODO: Move this entire logic to data layer without involving view layer
   $: changeCurrentSchema(database, schemaId);
 
-  function getTabLink(entry: MathesarTab) {
-    if (entry.isNew) {
-      return null;
+  function getTabLink(entry: MathesarTab): string | undefined {
+    if (entry.isNew || !entry.tabularData) {
+      return undefined;
     }
     return constructTabularTabLink(
       database,

mathesar_ui/src/sections/import-data/ImportData.svelte

@@ -6,7 +6,7 @@
   import Upload from './upload/Upload.svelte';
   import { clearErrors } from './importUtils';
 
-  export let id: string;
+  export let id: string | undefined = undefined;
   export let database: Database['name'];
   export let schemaId: SchemaEntry['id'];
 

mathesar_ui/src/sections/import-data/preview/Preview.svelte

@@ -34,14 +34,17 @@
 
   function handleChangeType(e: CustomEvent) {
     const { previewColumns } = get(fileImportStore);
+    if (!previewColumns) {
+      return;
+    }
     const changedColumn = previewColumns.find((column) => column.name === e.detail.name);
-    if (changedColumn) {
-      changedColumn.type = e.detail.type as string;
-
-      setInFileStore(fileImportStore, {
-        previewColumns: [...previewColumns],
-      });
+    if (!changedColumn) {
+      return;
     }
+    changedColumn.type = e.detail.type as string;
+    setInFileStore(fileImportStore, {
+      previewColumns: [...previewColumns],
+    });
   }
 
   function handleChangeFirstRowAsHeader(e: CustomEvent) {
@@ -84,7 +87,7 @@
   {#if isLoading}<Spinner />{/if}
 </div>
 
-{#if $fileImportStore.previewColumns?.length > 0}
+{#if $fileImportStore.previewColumns?.length}
   <div class="preview-table" class:disabled={$fileImportStore.previewStatus === States.Loading}>
     <table>
       <thead>

mathesar_ui/src/sections/left-pane/LeftPane.svelte

@@ -29,7 +29,7 @@
 
   export let database: string;
   export let schemaId: SchemaEntry['id'];
-  export let activeTab: MathesarTab;
+  export let activeTab: MathesarTab | undefined = undefined;
   export let getLink: (entry: TableEntry) => string;
 
   let tree: TreeItem[] = [];
@@ -61,7 +61,7 @@
 
   $: tree = generateTree($tables);
 
-  function onActiveTabChange(_activeTab: MathesarTab) {
+  function onActiveTabChange(_activeTab: MathesarTab | undefined) {
     if (_activeTab?.tabularData) {
       activeOptionSet = new Set([
         _activeTab.tabularData.id,

mathesar_ui/src/sections/table-view/header/Header.svelte

@@ -48,7 +48,7 @@
   function getColumnPosition(
     _columnPositionMap: ColumnPositionMap,
     _name: Column['name'],
-  ): ColumnPosition {
+  ): ColumnPosition | undefined {
     return _columnPositionMap.get(_name);
   }