Improve the UI around deleting.

web/blueprint/src/lib/components/ButtonDropdown.svelte

@@ -47,7 +47,7 @@
   }
 </script>
 
-<div class="relative z-50 h-8">
+<div class="relative h-8">
   <div
     use:hoverTooltip={{
       text: disabled ? disabledMessage : ''

web/blueprint/src/lib/components/datasetView/DeleteRowsButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {deleteRowsMutation} from '$lib/queries/datasetQueries';
+  import {queryAuthInfo} from '$lib/queries/serverQueries';
   import {getDatasetViewContext} from '$lib/stores/datasetViewStore';
   import type {DeleteRowsOptions} from '$lilac';
   import {Modal} from 'carbon-components-svelte';
@@ -11,6 +12,10 @@
   export let searches: DeleteRowsOptions['searches'] | undefined = undefined;
   export let filters: DeleteRowsOptions['filters'] | undefined = undefined;
   export let numRows: number | undefined = undefined;
+  export let modalOpen = false;
+
+  const authInfo = queryAuthInfo();
+  $: canDeleteRows = $authInfo.data?.access.dataset.delete_rows;
 
   const dispatch = createEventDispatcher();
 
@@ -46,19 +51,24 @@
 
   // Disable when no rows are selected and no searches or filters are applied to avoid accidentally
   // deleting everything.
-  $: disabled = rowIds == null && searches == null && filters == null;
-
-  let modalOpen = false;
+  $: disabled = !canDeleteRows || (rowIds == null && searches == null && filters == null);
 </script>
 
 <div
-  use:hoverTooltip={{text: rowIds != null && rowIds.length === 1 ? 'Delete row' : 'Delete rows'}}
+  use:hoverTooltip={{
+    text: canDeleteRows
+      ? rowIds != null && rowIds.length === 1
+        ? 'Delete row'
+        : 'Delete rows'
+      : 'User does not have access to delete rows.'
+  }}
 >
   <button
     {disabled}
     class:opacity-30={disabled}
     class="h-8 rounded border border-gray-300 bg-white hover:border-red-500 hover:bg-transparent"
     on:click={() => {
+      if (disabled) return;
       modalOpen = true;
     }}
   >
@@ -67,7 +77,7 @@
 </div>
 <Modal
   size="xs"
-  open={modalOpen}
+  open={modalOpen && !disabled}
   modalHeading="Delete rows"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"

web/blueprint/src/lib/components/datasetView/RestoreRowsButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {restoreRowsMutation} from '$lib/queries/datasetQueries';
+  import {queryAuthInfo} from '$lib/queries/serverQueries';
   import {getDatasetViewContext} from '$lib/stores/datasetViewStore';
   import type {DeleteRowsOptions} from '$lilac';
   import {Modal} from 'carbon-components-svelte';
@@ -12,6 +13,9 @@
   export let filters: DeleteRowsOptions['filters'] | undefined = undefined;
   export let numRows: number | undefined = undefined;
 
+  const authInfo = queryAuthInfo();
+  $: canRestoreRows = $authInfo.data?.access.dataset.delete_rows;
+
   const dispatch = createEventDispatcher();
 
   $: {
@@ -47,21 +51,31 @@
   let modalOpen = false;
 </script>
 
-<button
+<div
+  class="ml-2 inline-block"
   use:hoverTooltip={{
-    text: rowIds != null && rowIds.length === 1 ? 'Restore deleted row' : 'Restore deleted rows'
-  }}
-  class="rounded border border-gray-300 bg-white hover:border-gray-500 hover:bg-transparent"
-  on:click={() => {
-    modalOpen = true;
+    text: canRestoreRows
+      ? rowIds != null && rowIds.length === 1
+        ? 'Restore deleted row'
+        : 'Restore deleted rows'
+      : 'User does not have access to restore rows.'
   }}
 >
-  <Undo />
-</button>
+  <button
+    class:opacity-30={!canRestoreRows}
+    disabled={!canRestoreRows}
+    class="rounded border border-gray-300 bg-white hover:border-gray-500 hover:bg-transparent"
+    on:click={() => {
+      modalOpen = true;
+    }}
+  >
+    <Undo />
+  </button>
+</div>
 
 <Modal
   size="xs"
-  open={modalOpen}
+  open={modalOpen && canRestoreRows}
   modalHeading="Restore rows"
   primaryButtonText="Confirm"
   secondaryButtonText="Cancel"

web/blueprint/src/lib/components/datasetView/RowItem.svelte

@@ -42,6 +42,7 @@
   export let updateSequentialRowId: ((direction: 'previous' | 'next') => void) | undefined =
     undefined;
   export let nextRowId: string | undefined = undefined;
+  export let openDeleteModal = false;
 
   const datasetViewStore = getDatasetViewContext();
   const notificationStore = getNotificationsContext();
@@ -143,6 +144,10 @@
   <div class="sticky top-0 z-10 flex w-full flex-row justify-between bg-white">
     <div
       class="mx-4 flex w-full rounded-t-lg border border-neutral-300 bg-violet-200 bg-opacity-70 py-2"
+      class:bg-violet-200={!$datasetViewStore.viewTrash}
+      class:bg-opacity-70={!$datasetViewStore.viewTrash}
+      class:bg-red-500={$datasetViewStore.viewTrash}
+      class:bg-opacity-20={$datasetViewStore.viewTrash}
     >
       <!-- Left arrow -->
       <div class="flex w-1/3 flex-row">
@@ -155,7 +160,7 @@
             <div class:opacity-50={labelsInProgress.has(label)}>
               <LabelPill
                 {label}
-                disabled={labelsInProgress.has(label)}
+                disabled={labelsInProgress.has(label) || disableLabels}
                 active={rowLabels.includes(label)}
                 on:click={() => {
                   if (rowLabels.includes(label)) {
@@ -234,6 +239,7 @@
         {#if rowId != null}
           {#if !$datasetViewStore.viewTrash}
             <DeleteRowsButton
+              bind:modalOpen={openDeleteModal}
               rowIds={[rowId]}
               on:deleted={() => (nextRowId != null ? datasetViewStore.setRowId(nextRowId) : null)}
             />

web/blueprint/src/lib/components/datasetView/SingleItemView.svelte

@@ -69,11 +69,14 @@
     }
   }
 
+  let openDeleteModal = false;
   function onKeyDown(key: KeyboardEvent) {
     if (key.code === 'ArrowLeft') {
       updateSequentialRowId('previous');
     } else if (key.code === 'ArrowRight') {
       updateSequentialRowId('next');
+    } else if (key.code === 'Delete' || key.code === 'Backspace') {
+      openDeleteModal = true;
     }
   }
 </script>
@@ -97,6 +100,7 @@
     {mediaFields}
     {highlightedFields}
     {updateSequentialRowId}
+    bind:openDeleteModal
   />
 </div>
 <svelte:window on:keydown={onKeyDown} />

web/blueprint/src/lib/components/schemaView/SchemaView.svelte

@@ -3,7 +3,7 @@
   import {getDatasetViewContext, getSelectRowsSchemaOptions} from '$lib/stores/datasetViewStore';
   import {DELETED_LABEL_KEY, ROWID, formatValue} from '$lilac';
   import {SkeletonText} from 'carbon-components-svelte';
-  import {TrashCan, View} from 'carbon-icons-svelte';
+  import {TrashCan, View, ViewOff} from 'carbon-icons-svelte';
   import {hoverTooltip} from '../common/HoverTooltip';
   import RestoreRowsButton from '../datasetView/RestoreRowsButton.svelte';
   import SchemaField from './SchemaField.svelte';
@@ -47,7 +47,7 @@
   <!-- Deleted rows. -->
   {#if numDeletedRows}
     <div
-      class="flex w-full flex-row items-center justify-between gap-x-2 border-b border-gray-300 bg-red-500 bg-opacity-10 p-2 px-4"
+      class="flex w-full flex-row items-center justify-between gap-x-2 border-b border-gray-300 bg-red-500 bg-opacity-20 p-2 px-4"
     >
       <div class="flex flex-row items-center gap-x-6">
         <div>
@@ -61,8 +61,14 @@
         <button
           use:hoverTooltip={{text: 'Show deleted rows'}}
           class="border border-gray-300 bg-white hover:border-gray-500"
-          on:click={() => datasetViewStore.showTrash(!$datasetViewStore.viewTrash)}><View /></button
+          on:click={() => datasetViewStore.showTrash(!$datasetViewStore.viewTrash)}
         >
+          {#if $datasetViewStore.viewTrash}
+            <ViewOff />
+          {:else}
+            <View />
+          {/if}
+        </button>
         <RestoreRowsButton numRows={numDeletedRows} />
       </div>
     </div>