UI for bulk deleting projects

jsapp/js/api.ts

@@ -13,7 +13,7 @@ const fetchData = async <T>(
    * Useful if you already have a full URL to be called and there is no point
    * adding `ROOT_URL` to it.
    */
-  prependRootUrl = true,
+  prependRootUrl = true
 ) => {
   const headers: {[key: string]: string} = {
     Accept: JSON_HEADER,
@@ -35,6 +35,11 @@ const fetchData = async <T>(
     headers,
     body: JSON.stringify(data),
   });
+
+  if (!response.ok) {
+    throw response;
+  }
+
   const contentType = response.headers.get('content-type');
   if (contentType && contentType.indexOf('application/json') !== -1) {
     return (await response.json()) as Promise<T>;

jsapp/js/components/common/checkbox-and-radio.scss

@@ -16,14 +16,14 @@ $checkbox-size: sizes.$x20;
 
     &:hover .radio__input:not([disabled]),
     &:hover .checkbox__input:not([disabled]) {
-      &:checked::after { opacity: 0.8; }
-      &:not(:checked)::after { opacity: 0.1; }
+      &:checked::after {opacity: 0.8;}
+      &:not(:checked)::after {opacity: 0.1;}
     }
 
     &:active .radio__input:not([disabled]),
     &:active .checkbox__input:not([disabled]) {
-      &:checked::after { opacity: 0.6; }
-      &:not(:checked)::after { opacity: 0.3; }
+      &:checked::after {opacity: 0.6;}
+      &:not(:checked)::after {opacity: 0.3;}
     }
   }
 
@@ -75,7 +75,7 @@ $checkbox-size: sizes.$x20;
     border-radius: sizes.$x2;
 
     &::after {
-      content: "✓";
+      content: '✓';
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
@@ -97,7 +97,6 @@ $checkbox-size: sizes.$x20;
     border: sizes.$x1 solid colors.$kobo-gray-40;
     width: $checkbox-size;
     height: $checkbox-size;
-    outline: 0;
     background-color: colors.$kobo-white;
     color: colors.$kobo-gray-40;
     cursor: pointer;
@@ -112,7 +111,7 @@ $checkbox-size: sizes.$x20;
     &:checked {
       border-color: colors.$kobo-blue;
 
-      &::after { opacity: 1; }
+      &::after {opacity: 1;}
     }
 
     &[disabled] {

jsapp/js/components/modals/koboPrompt.tsx

@@ -12,6 +12,8 @@ interface KoboPromptButton {
   color?: ButtonColor;
   label: string;
   onClick: () => void;
+  isDisabled?: boolean;
+  isPending?: boolean;
 }
 
 const defaultButtonType = 'full';
@@ -65,6 +67,8 @@ export default function KoboPrompt(props: KoboPromptProps) {
             size='m'
             label={promptButton.label}
             onClick={promptButton.onClick}
+            isDisabled={promptButton.isDisabled}
+            isPending={promptButton.isPending}
           />
         ))}
       </KoboModalFooter>

jsapp/js/projects/customViewStore.ts

@@ -240,11 +240,11 @@ class CustomViewStore {
     }
   }
 
-  public handleAssetDeleted(deletedAssetUid: string) {
+  public handleAssetsDeleted(deletedAssetsUids: string[]) {
     // When asset is deleted, we simply remove it from loaded assets list as it
     // seems there is no need to fetch all the data again
     this.assets = this.assets.filter(
-      (asset: ProjectViewAsset) => asset.uid !== deletedAssetUid
+      (asset: ProjectViewAsset) => !deletedAssetsUids.includes(asset.uid)
     );
   }
 

jsapp/js/projects/myProjectsRoute.tsx

@@ -20,6 +20,7 @@ import routeStyles from './myProjectsRoute.module.scss';
 import {toJS} from 'mobx';
 import {COMMON_QUERIES, ROOT_URL} from 'js/constants';
 import ProjectQuickActions from './projectsTable/projectQuickActions';
+import ProjectBulkActions from './projectsTable/projectBulkActions';
 import Dropzone from 'react-dropzone';
 import {validFileTypes} from 'js/utils';
 import Icon from 'js/components/common/icon';
@@ -90,10 +91,16 @@ function MyProjectsRoute() {
           />
 
           {selectedAssets.length === 1 && (
-            <div className={styles.quickActions}>
+            <div className={styles.actions}>
               <ProjectQuickActions asset={selectedAssets[0]} />
             </div>
           )}
+
+          {selectedAssets.length > 1 && (
+            <div className={styles.actions}>
+              <ProjectBulkActions assets={selectedAssets} />
+            </div>
+          )}
         </header>
 
         <ProjectsTable

jsapp/js/projects/projectViews.module.scss

@@ -13,7 +13,7 @@
   padding: sizes.$x30 sizes.$x30 sizes.$x40;
 }
 
-.quickActions {
+.actions {
   @include mixins.centerRowFlex;
   flex: 1;
   justify-content: flex-end;

jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.module.scss

@@ -0,0 +1,11 @@
+@use 'scss/sizes';
+
+.promptContent {
+  display: flex;
+  flex-direction: column;
+  gap: sizes.$x20;
+
+  :global p {
+    margin: 0;
+  }
+}

jsapp/js/projects/projectsTable/bulkActions/bulkDeletePrompt.tsx

@@ -0,0 +1,110 @@
+import React, {useState} from 'react';
+import {fetchPost} from 'js/api';
+import {handleApiFail, notify} from 'js/utils';
+import KoboPrompt from 'js/components/modals/koboPrompt';
+import Checkbox from 'js/components/common/checkbox';
+import styles from './bulkDeletePrompt.module.scss';
+import customViewStore from 'js/projects/customViewStore';
+import {searches} from 'js/searches';
+
+type AssetsBulkAction = 'archive' | 'delete' | 'unarchive';
+interface AssetsBulkResponse {
+  detail: string;
+}
+
+interface BulkDeletePromptProps {
+  assetUids: string[];
+  /** Being used by the parent component to close the prompt. */
+  onRequestClose: () => void;
+}
+
+export default function BulkDeletePrompt(props: BulkDeletePromptProps) {
+  const [isDataChecked, setIsDataChecked] = useState(false);
+  const [isFormChecked, setIsFormChecked] = useState(false);
+  const [isRecoverChecked, setIsRecoverChecked] = useState(false);
+  const [isConfirmDeletePending, setIsConfirmDeletePending] = useState(false);
+
+  function onConfirmDelete() {
+    setIsConfirmDeletePending(true);
+
+    const payload: {asset_uids: string[]; action: AssetsBulkAction} = {
+      asset_uids: props.assetUids,
+      action: 'delete',
+    };
+
+    fetchPost<AssetsBulkResponse>('/api/v2/assets/bulk/', {payload: payload})
+      .then((response) => {
+        props.onRequestClose();
+        customViewStore.handleAssetsDeleted(props.assetUids);
+
+        // Temporarily we do this hacky thing to update the sidebar list of
+        // projects. After the Bookmarked Projects feature is done (see the
+        // https://github.com/kobotoolbox/kpi/issues/4220 for history of
+        // discussion and more details) we would remove this code.
+        searches.forceRefreshFormsList();
+
+        notify(response.detail);
+      })
+      .catch(handleApiFail);
+  }
+
+  return (
+    <KoboPrompt
+      // This is always open, because parent is conditionally rendering this component
+      isOpen
+      onRequestClose={props.onRequestClose}
+      title={t('Delete ##count## projects').replace(
+        '##count##',
+        String(props.assetUids.length)
+      )}
+      buttons={[
+        {
+          type: 'frame',
+          color: 'storm',
+          label: 'Cancel',
+          onClick: props.onRequestClose,
+          isDisabled: isConfirmDeletePending,
+        },
+        {
+          type: 'full',
+          color: 'red',
+          label: 'Delete',
+          onClick: onConfirmDelete,
+          isDisabled: !isDataChecked || !isFormChecked || !isRecoverChecked,
+          isPending: isConfirmDeletePending,
+        },
+      ]}
+    >
+      <div className={styles.promptContent}>
+        <p>
+          {t('You are about to permanently delete ##count## projects').replace(
+            '##count##',
+            String(props.assetUids.length)
+          )}
+        </p>
+
+        <Checkbox
+          checked={isDataChecked}
+          onChange={setIsDataChecked}
+          label={t('All data gathered for these projects will be deleted')}
+        />
+
+        <Checkbox
+          checked={isFormChecked}
+          onChange={setIsFormChecked}
+          label={t('Forms associated with these projects will be deleted')}
+        />
+
+        <strong>
+          <Checkbox
+            checked={isRecoverChecked}
+            onChange={setIsRecoverChecked}
+            label={t(
+              'I understand that if I delete these projects I will not be able to recover them'
+            )}
+          />
+        </strong>
+      </div>
+    </KoboPrompt>
+  );
+}

jsapp/js/projects/projectsTable/projectBulkActions.tsx

@@ -0,0 +1,38 @@
+import React, {useState} from 'react';
+import type {AssetResponse, ProjectViewAsset} from 'js/dataInterface';
+import Button from 'js/components/common/button';
+import actionsStyles from './projectActions.module.scss';
+import BulkDeletePrompt from './bulkActions/bulkDeletePrompt';
+
+interface ProjectBulkActionsProps {
+  /** A list of selected assets for bulk operations. */
+  assets: Array<AssetResponse | ProjectViewAsset>;
+}
+
+export default function ProjectBulkActions(props: ProjectBulkActionsProps) {
+  const [isDeletePromptOpen, setIsDeletePromptOpen] = useState(false);
+
+  return (
+    <div className={actionsStyles.root}>
+      <Button
+        type='bare'
+        color='storm'
+        size='s'
+        startIcon='trash'
+        tooltip={t('Delete ##count## projects').replace(
+          '##count##',
+          String(props.assets.length)
+        )}
+        onClick={() => setIsDeletePromptOpen(true)}
+        classNames={['right-tooltip']}
+      />
+
+      {isDeletePromptOpen && (
+        <BulkDeletePrompt
+          assetUids={props.assets.map((asset) => asset.uid)}
+          onRequestClose={() => setIsDeletePromptOpen(false)}
+        />
+      )}
+    </div>
+  );
+}

jsapp/js/projects/projectsTable/projectQuickActions.tsx

@@ -7,7 +7,7 @@ import type {
 import {ASSET_TYPES} from 'js/constants';
 import Button from 'js/components/common/button';
 import KoboDropdown from 'jsapp/js/components/common/koboDropdown';
-import styles from './projectQuickActions.module.scss';
+import styles from './projectActions.module.scss';
 import {getAssetDisplayName} from 'jsapp/js/assetUtils';
 import {
   archiveAsset,
@@ -116,7 +116,7 @@ export default function ProjectQuickActions(props: ProjectQuickActionsProps) {
             props.asset,
             getAssetDisplayName(props.asset).final,
             (deletedAssetUid: string) => {
-              customViewStore.handleAssetDeleted(deletedAssetUid);
+              customViewStore.handleAssetsDeleted([deletedAssetUid]);
             }
           )
         }

jsapp/js/searches.d.ts

@@ -0,0 +1,3 @@
+export namespace searches {
+  const forceRefreshFormsList: () => void;
+}

jsapp/js/searches.es6

@@ -545,8 +545,17 @@ function getSearchContext(name, opts={}) {
   return contexts[name];
 }
 
+/** A temporary function for glueing things together with `BulkDeletePrompt`. */
+function forceRefreshFormsList() {
+  const formsContext = getSearchContext('forms');
+  if (formsContext?.mixin?.searchSemaphore) {
+    formsContext.mixin.searchSemaphore();
+  }
+}
+
 export const searches = {
   getSearchContext: getSearchContext,
   common: commonMethods,
   isSearchContext: isSearchContext,
+  forceRefreshFormsList: forceRefreshFormsList,
 };

jsapp/scss/libs/_mdl.buttons.scss

@@ -22,7 +22,6 @@
   position: relative;
   display: inline-block;
   overflow: hidden;
-  outline: none;
   cursor: pointer;
   color: colors.$kobo-gray-40;
 

jsapp/scss/libs/react-tagsinput.scss

@@ -48,12 +48,10 @@
   background: transparent;
   border: 0 none;
   color: colors.$kobo-gray-40;
-  font-family: sans-serif;
   font-size: 13px;
   font-weight: 400;
   margin-bottom: 2px;
   margin-top: 1px;
-  outline: none;
   padding: 5px;
   min-width: 90px;
 }

jsapp/scss/stylesheets/partials/_base.scss

@@ -1,4 +1,5 @@
-@use "scss/_variables";
+@use 'scss/sizes';
+@use 'scss/_variables';
 @use '~kobo-common/src/styles/colors';
 
 /* ==========================================================================
@@ -82,7 +83,7 @@ textarea {
 }
 
 :focus {
-  outline: 1px solid colors.$kobo-blue;
+  outline: sizes.$x1 solid colors.$kobo-blue;
 }
 
 i {