Fix a number of linting errors

mathesar-foundation · Dec 4, 2023 · 749d190 · 749d190
1 parent 4467e0f
commit 749d190
Show file tree

Hide file tree

Showing 27 changed files with 56 additions and 63 deletions.
diff --git a/mathesar_ui/src/component-library/checkbox-group/CheckboxGroup.svelte b/mathesar_ui/src/component-library/checkbox-group/CheckboxGroup.svelte
@@ -25,6 +25,7 @@
     optionToCompare: Option | undefined,
     selectedOption: Option | undefined,
   ) => boolean = (a, b) => a === b;
+
   export let disabled = false;
 
   function handleChange(option: Option, checked: boolean) {
@@ -42,15 +43,15 @@
   {label}
   {disabled}
   let:option
-  let:disabled
+  let:disabled={innerDisabled}
   on:change
   labelKey={checkboxLabelKey}
   getLabel={getCheckboxLabel}
 >
   <Checkbox
     on:change={({ detail: checked }) => handleChange(option, checked)}
     checked={values.some((o) => valuesAreEqual(o, option))}
-    {disabled}
+    disabled={innerDisabled}
   />
   <slot slot="label" />
 </FieldsetGroup>
diff --git a/mathesar_ui/src/component-library/dropdown/Dropdown.svelte b/mathesar_ui/src/component-library/dropdown/Dropdown.svelte
@@ -91,7 +91,7 @@
   on:close={close}
   on:open
   on:close
-  let:close
+  let:close={innerClose}
 >
-  <slot name="content" {close} />
+  <slot name="content" close={innerClose} />
 </AttachableDropdown>
diff --git a/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte b/mathesar_ui/src/component-library/radio-group/RadioGroup.svelte
@@ -39,13 +39,13 @@
   {disabled}
   {boxed}
   let:option
-  let:disabled
+  let:disabled={innerDisabled}
   on:change
   labelKey={radioLabelKey}
   getLabel={getRadioLabel}
 >
   <Radio
-    {disabled}
+    disabled={innerDisabled}
     checked={valuesAreEqual(value, option)}
     on:change={({ detail: checked }) => {
       if (checked) {

diff --git a/mathesar_ui/src/component-library/toast/ToastItem.svelte b/mathesar_ui/src/component-library/toast/ToastItem.svelte
@@ -23,9 +23,9 @@
   $: readableTextColor = ensureReadable(props.textColor);
   $: readableProgressColor = ensureReadable(props.progressColor);
   $: style = `
-    --toast-item-background-color: ${$readableBackgroundColor as string};
-    --toast-item-text-color: ${$readableTextColor as string};
-    --toast-item-progress-color: ${$readableProgressColor as string};
+    --toast-item-background-color: ${$readableBackgroundColor};
+    --toast-item-text-color: ${$readableTextColor};
+    --toast-item-progress-color: ${$readableProgressColor};
   `;
 </script>
 

diff --git a/mathesar_ui/src/components/EditableTextWithActions.svelte b/mathesar_ui/src/components/EditableTextWithActions.svelte
@@ -1,8 +1,8 @@
-<!-- 
+<!--
   @component
 
   Enables inline editing with support for "Save" & "Cancel" actions.
- -->
+-->
 <script lang="ts">
   import {
     CancelOrProceedButtonPair,

diff --git a/mathesar_ui/src/components/NameWithIcon.svelte b/mathesar_ui/src/components/NameWithIcon.svelte
@@ -20,8 +20,8 @@
       {#if isLoading}
         <Spinner />
       {:else}
-        {#each icons as icon}
-          <Icon {...icon} size="min(1em, 0.75em + 0.25rem)" />
+        {#each icons as innerIcon}
+          <Icon {...innerIcon} size="min(1em, 0.75em + 0.25rem)" />
         {/each}
       {/if}
     </span>&nbsp;<span class="name">

diff --git a/mathesar_ui/src/components/RecordSummary.svelte b/mathesar_ui/src/components/RecordSummary.svelte
@@ -4,4 +4,5 @@
   export let recordSummary: string;
 </script>
 
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 {@html displayRecordSummaryAsHtml(recordSummary)}
diff --git a/mathesar_ui/src/components/abstract-type-control/AbstractTypeDBOptions.svelte b/mathesar_ui/src/components/abstract-type-control/AbstractTypeDBOptions.svelte
@@ -18,8 +18,6 @@
   export let typeOptions: ColumnWithAbstractType['type_options'];
   export let column: ColumnWithAbstractType;
 
-  let dbFormHasError = false;
-
   $: ({ dbOptionsConfig, dbForm, dbFormValues } = constructDbForm(
     selectedAbstractType,
     selectedDbType,
@@ -31,7 +29,6 @@
     let isValid = true;
     if (dbForm) {
       const isDbFormValid = dbForm.getValidationResult().isValid;
-      dbFormHasError = !isDbFormValid;
       isValid = isValid && isDbFormValid;
     }
     return isValid;

diff --git a/mathesar_ui/src/components/abstract-type-control/AbstractTypeDisplayOptions.svelte b/mathesar_ui/src/components/abstract-type-control/AbstractTypeDisplayOptions.svelte
@@ -17,14 +17,11 @@
   export let displayFormValues: Readable<FormValues>;
   export let disabled = false;
 
-  let displayFormHasError = false;
-
   const validationContext = getValidationContext();
   validationContext.addValidator('AbstractTypeConfigValidator', () => {
     let isValid = true;
     if (displayForm) {
       const isDisplayFormValid = displayForm.getValidationResult().isValid;
-      displayFormHasError = !isDisplayFormValid;
       isValid = isValid && isDisplayFormValid;
     }
     return isValid;

diff --git a/mathesar_ui/src/components/rich-text/RichText.svelte b/mathesar_ui/src/components/rich-text/RichText.svelte
@@ -1,9 +1,9 @@
-<!-- 
+<!--
   @component
 
   Use this component to render translated strings that contain components or
   html tags. This enables the translations of such strings while maintaining the
-  context for the translator using the slot names. 
+  context for the translator using the slot names.
 
   ## Step 1
 
@@ -30,7 +30,7 @@
     {/if}
   </RichText>
   ```
- -->
+-->
 <script lang="ts">
   import { assertExhaustive } from '@mathesar/utils/typeUtils';
   import { parse } from './richTextUtils';

diff --git a/mathesar_ui/src/components/sheet/SheetVirtualRows.svelte b/mathesar_ui/src/components/sheet/SheetVirtualRows.svelte
@@ -27,15 +27,15 @@
       estimatedItemSize={rowHeightPx}
       {itemKey}
       let:items
-      let:api
+      let:api={virtualListApi}
       on:scroll={(e) => {
         api.setScrollOffset(e.detail);
       }}
       on:h-scroll={(e) => {
         api.setHorizontalScrollOffset(e.detail);
       }}
     >
-      <slot {items} {api} />
+      <slot {items} api={virtualListApi} />
     </VirtualList>
   </Resizer>
 </div>

diff --git a/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte b/mathesar_ui/src/pages/import/preview/ImportPreviewSheet.svelte
@@ -52,10 +52,10 @@
           {#each columns as column (column)}
             <SheetCell
               columnIdentifierKey={column.id}
-              let:htmlAttributes
+              let:htmlAttributes={sheetCellHtmlAttributes}
               let:style
             >
-              <div {...htmlAttributes} {style}>
+              <div {...sheetCellHtmlAttributes} {style}>
                 <CellFabric
                   columnFabric={column}
                   value={record[column.column.name]}

diff --git a/mathesar_ui/src/pages/schema/CreateNewExplorationTutorial.svelte b/mathesar_ui/src/pages/schema/CreateNewExplorationTutorial.svelte
@@ -12,12 +12,12 @@
   <span slot="title"
     >It's time to use your tables. Create your first exploration.</span
   >
-  <span slot="body"
-    >Explorations let you query your data to uncover trends and insights. They
+  <span slot="body">
+    Explorations let you query your data to uncover trends and insights. They
     may be stored and run anytime to see the latest data. Explorations make
     great reports. You might, for example, create an exploration that shows your
-    monthly spending.</span
-  >
+    monthly spending.
+  </span>
   <AnchorButton
     slot="footer"
     href={getDataExplorerPageUrl(database.nickname, schema.id)}

diff --git a/mathesar_ui/src/pages/schema/TableSkeleton.svelte b/mathesar_ui/src/pages/schema/TableSkeleton.svelte
@@ -2,10 +2,12 @@
   import { Skeleton } from '@mathesar/component-library';
 
   export let numTables = 9;
+
+  $: skeletons = Array.from({ length: numTables }, (x, i) => i);
 </script>
 
 <div class="table-skeleton-container">
-  {#each Array(numTables) as _, index (index)}
+  {#each skeletons as _ (_)}
     <div class="table-skeleton">
       <Skeleton loading={true} />
     </div>

diff --git a/mathesar_ui/src/routes/RootRoute.svelte b/mathesar_ui/src/routes/RootRoute.svelte
@@ -9,7 +9,7 @@
   export let commonData: CommonData;
 </script>
 
-<!-- 
+<!--
   We're explicity having two separate routing context for the app to avoid the user
   from client routing across either of them.
 -->

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/QueryRunErrors.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/QueryRunErrors.svelte
@@ -18,7 +18,7 @@
 
   function deleteMissingColumns(column_id: number) {
     if (queryManager) {
-      queryManager.update((q) => q.withoutColumnsById([column_id]));
+      void queryManager.update((q) => q.withoutColumnsById([column_id]));
     }
   }
 </script>

diff --git a/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte b/mathesar_ui/src/systems/data-explorer/result-pane/Results.svelte
@@ -122,10 +122,10 @@
                   columnIdentifierKey={ID_ROW_CONTROL_COLUMN}
                   isStatic
                   isControlCell
-                  let:htmlAttributes
+                  let:htmlAttributes={sheetCellHtmlAttributes}
                   let:style
                 >
-                  <div {...htmlAttributes} {style}>
+                  <div {...sheetCellHtmlAttributes} {style}>
                     <CellBackground color="var(--cell-bg-color-header)" />
                     {$pagination.offset + item.index + 1}
                   </div>

diff --git a/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte b/mathesar_ui/src/systems/record-selector/RecordSelectorTable.svelte
@@ -233,7 +233,7 @@
             {overflowDetails}
           />
           {#each [...$processedColumns] as [columnId, processedColumn] (columnId)}
-            {@const column = processedColumn.column}
+            {@const { column } = processedColumn}
             <RecordSelectorColumnHeaderCell
               hasNestedSelectorOpen={column === $columnWithNestedSelectorOpen}
               {overflowDetails}

diff --git a/mathesar_ui/src/systems/table-view/Body.svelte b/mathesar_ui/src/systems/table-view/Body.svelte
@@ -31,7 +31,7 @@
 
   export let usesVirtualList = false;
 
-  $: ({ id, display, columnsDataStore, selection } = $tabularData);
+  $: ({ id, display, columnsDataStore } = $tabularData);
   $: ({ displayableRecords } = display);
   $: ({ pkColumn } = columnsDataStore);
 

diff --git a/mathesar_ui/src/systems/table-view/StatusPane.svelte b/mathesar_ui/src/systems/table-view/StatusPane.svelte
@@ -75,7 +75,7 @@
         size="medium"
         appearance="primary"
         on:click={() => {
-          recordsData.addEmptyRecord();
+          void recordsData.addEmptyRecord();
           selection.selectAndActivateFirstDataEntryCellInLastRow();
         }}
       >

diff --git a/mathesar_ui/src/systems/table-view/constraints/ForeignKeyConstraintDetails.svelte b/mathesar_ui/src/systems/table-view/constraints/ForeignKeyConstraintDetails.svelte
@@ -43,12 +43,12 @@
         {#await getReferentColumns(constraint)}
           <Spinner />
         {:then referentColumns}
-          {#each referentColumns as referentColumn, index (referentColumn.id)}
+          {#each referentColumns as referentColumn (referentColumn.id)}
             <span class="entity-name-container">
               <ColumnName column={referentColumn} />
             </span>
           {/each}
-        {:catch error}
+        {:catch}
           <Icon {...iconError} />
         {/await}
       </div>

diff --git a/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte b/mathesar_ui/src/systems/table-view/header/drag-and-drop/Droppable.svelte
@@ -10,6 +10,8 @@
   $: draggedOverRight = columnLocationDifference < 0;
   $: draggedOverLeft = columnLocationDifference > 0;
 
+  let isDraggedOverCounter = 0;
+
   // Needs to be a counter because dragEnter and dragLeave are fired for child elements
   function dragEnter(e: DragEvent) {
     e.preventDefault();
@@ -20,16 +22,9 @@
     isDraggedOverCounter -= 1;
   }
 
-  function shouldReset(
-    locationOfFirstDraggedColumnParam: number | undefined,
-  ): number {
-    if (locationOfFirstDraggedColumnParam === undefined) {
-      return 0;
-    }
-    return isDraggedOverCounter;
+  $: if (locationOfFirstDraggedColumn === undefined) {
+    isDraggedOverCounter = 0;
   }
-
-  $: isDraggedOverCounter = shouldReset(locationOfFirstDraggedColumn);
 </script>
 
 <div

diff --git a/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte b/mathesar_ui/src/systems/table-view/header/header-cell/HeaderCell.svelte
@@ -1,8 +1,8 @@
-<!-- 
+<!--
   TODO: Implement the loader while renaming
   when implementing rename functionality
   using table inspector
- -->
+-->
 <script lang="ts">
   import { Icon } from '@mathesar-component-library';
   import {

diff --git a/mathesar_ui/src/systems/table-view/link-table/LinkTableForm.svelte b/mathesar_ui/src/systems/table-view/link-table/LinkTableForm.svelte
@@ -60,13 +60,6 @@
   $: allTables = [...$tablesDataStore.data.values()];
   $: ({ columnsDataStore } = $tabularData);
   $: baseColumns = columnsDataStore.columns;
-  $: targetColumnsStore = target
-    ? new ColumnsDataStore({ tableId: target.id })
-    : undefined;
-  $: targetColumns = ensureReadable(targetColumnsStore?.columns ?? []);
-  $: targetColumnsFetchStatus = ensureReadable(targetColumnsStore?.fetchStatus);
-  $: targetColumnsAreLoading =
-    $targetColumnsFetchStatus?.state === 'processing';
 
   // ===========================================================================
   // Fields
@@ -80,6 +73,13 @@
       : ['manyToOne', 'oneToMany', 'manyToMany'])();
   $: linkType = requiredField<LinkType>('manyToOne');
   $: $targetTable, linkType.reset();
+  $: targetColumnsStore = target
+    ? new ColumnsDataStore({ tableId: target.id })
+    : undefined;
+  $: targetColumns = ensureReadable(targetColumnsStore?.columns ?? []);
+  $: targetColumnsFetchStatus = ensureReadable(targetColumnsStore?.fetchStatus);
+  $: targetColumnsAreLoading =
+    $targetColumnsFetchStatus?.state === 'processing';
   $: columnNameInBase = requiredField(
     getSuggestedFkColumnName(target, $baseColumns),
     [columnNameIsAvailable($baseColumns)],

diff --git a/mathesar_ui/src/systems/table-view/row/Row.svelte b/mathesar_ui/src/systems/table-view/row/Row.svelte
@@ -90,11 +90,11 @@
       isStatic
       isControlCell
       let:htmlAttributes={cellHtmlAttr}
-      let:style
+      let:style={sheetCellStyle}
     >
       <div
         {...cellHtmlAttr}
-        {style}
+        style={sheetCellStyle}
         on:mousedown={handleRowMouseDown}
         on:mouseenter={handleRowMouseEnter}
       >

diff --git a/mathesar_ui/src/systems/table-view/row/RowControl.svelte b/mathesar_ui/src/systems/table-view/row/RowControl.svelte
@@ -59,8 +59,8 @@
 <style lang="scss">
   .control {
     /**
-    * To avoid text selection while 
-    * while dragging through rows for 
+    * To avoid text selection while
+    * while dragging through rows for
     * multi-row selection
     */
     user-select: none;

diff --git a/mathesar_ui/src/systems/table-view/table-inspector/table/TableDeleteConfirmationBody.svelte b/mathesar_ui/src/systems/table-view/table-inspector/table/TableDeleteConfirmationBody.svelte
@@ -7,7 +7,7 @@
 
   let value = '';
 
-  let { canProceed } = confirmationController;
+  const { canProceed } = confirmationController;
   $: $canProceed = value.trim().toLowerCase() === tableName.toLowerCase();
 </script>