Update species removal confirmation (#847)

* Also, fix useResizeObserver

Author: ridwanamo

src/content/app/species/components/species-title-area/SpeciesTitleArea.scss

@@ -2,61 +2,17 @@
 
 $container-padding-right: 20px;
 
-@mixin narrow-grid {
-  grid-template-areas:
-    'icon species-name usage-toggle'
-    'icon geneSearchWrapper remove';
-  grid-template-columns: 60px 150px 1fr;
-  padding: 20px $container-padding-right 12px 0;
-  height: auto;
-
-  .speciesIcon {
-    align-self: start;
-  }
-
-  .speciesNameWrapper {
-    min-height: 60px;
-    display: flex;
-    align-items: center;
-  }
-
-  .speciesToggle {
-    padding: 0;
-  }
-
-  .remove {
-    align-self: start;
-    white-space: nowrap;
-  }
-
-  .speciesRemove {
-    white-space: normal;
-  }
-
-  .geneSearchWrapper {
-    margin: 0;
-  }
-}
-
 .speciesTitleArea {
   display: grid;
-  grid-template-areas: 'icon species-name usage-toggle search remove';
+  grid-template-areas:
+    'icon species-name usage-toggle search remove'
+    '. remove-message remove-message remove-message remove-message';
   grid-template-columns: 60px fit-content(60%) minmax(200px, 680px) auto 1fr;
+  grid-template-rows: 80px auto;
   grid-column-gap: 20px;
   align-items: center;
-  height: 90px;
   margin-left: 60px;
   padding-right: $container-padding-right;
-
-  @media (max-width: 999px) {
-    @include narrow-grid;
-  }
-
-  &Narrow {
-    @media (max-width: 1199px) {
-      @include narrow-grid;
-    }
-  }
 }
 
 .speciesIcon {
@@ -85,6 +41,7 @@ $container-padding-right: 20px;
 }
 
 .speciesToggle {
+  grid-area: usage-toggle;
   padding-left: 25px;
 }
 
@@ -94,11 +51,21 @@ $container-padding-right: 20px;
   white-space: nowrap;
 }
 
-.search {
-  grid-area: search;
+.disabledRemoveButton {
+  background-color: $grey;
+  color: $white;
+  border: 1px solid $grey;
+  cursor: default;
+}
+
+.speciesRemoveMessage {
+  grid-area: remove-message;
+  justify-content: end;
+  margin-bottom: 20px;
 }
 
 .geneSearchWrapper {
+  grid-area: search;
   color: $blue;
   cursor: pointer;
   display: inline-flex;
@@ -111,3 +78,66 @@ $container-padding-right: 20px;
     width: 13px;
   }
 }
+
+.speciesTitleAreaCompact {
+  grid-template-areas:
+    'icon species-name usage-toggle remove'
+    '. remove-message remove-message remove-message'
+    '. search . .';
+  grid-template-columns: 60px 150px auto 1fr;
+  grid-template-rows: 80px auto auto;
+  margin-bottom: 20px;
+
+  .speciesNameWrapper {
+    grid-area: species-name;
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+  }
+
+  .speciesToggle {
+    grid-area: usage-toggle;
+    padding: 0;
+  }
+
+  .remove {
+    grid-area: remove;
+    align-self: start;
+    white-space: nowrap;
+  }
+
+  .speciesRemove {
+    white-space: normal;
+  }
+
+  .speciesRemoveMessage {
+    grid-area: remove-message;
+    justify-content: start;
+  }
+
+  .geneSearchWrapper {
+    grid-area: search;
+    margin: 0;
+  }
+}
+
+.speciesTitleAreaMinimal {
+  grid-template-areas:
+    'icon species-name .'
+    '. usage-toggle remove'
+    '. remove-message remove-message'
+    '. search .';
+  grid-template-columns: 60px 150px 1fr;
+  grid-template-rows: 80px 0px auto 40px;
+  grid-row-gap: 10px;
+  margin-bottom: 20px;
+
+  .speciesRemoveMessage {
+    margin-top: 20px;
+    justify-content: start;
+  }
+
+  .speciesToggle {
+    padding: 0;
+  }
+}

src/content/app/species/components/species-title-area/SpeciesTitleArea.tsx

@@ -14,32 +14,51 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import classNames from 'classnames';
+import { useNavigate } from 'react-router-dom';
 
 import { useAppSelector, useAppDispatch } from 'src/store';
 
+import * as urlFor from 'src/shared/helpers/urlHelper';
 import { getDisplayName } from 'src/shared/components/selected-species/selectedSpeciesHelpers';
+
+import useSpeciesAnalytics from 'src/content/app/species/hooks/useSpeciesAnalytics';
+import useResizeObserver from 'src/shared/hooks/useResizeObserver';
+
+import { SecondaryButton } from 'src/shared/components/button/Button';
+import DeletionConfirmation from 'src/shared/components/deletion-confirmation/DeletionConfirmation';
+
 import SearchIcon from 'static/icons/icon_search.svg';
 
-import { isSpeciesSidebarOpen as getSidebarStatus } from 'src/content/app/species/state/sidebar/speciesSidebarSelectors';
 import { getCommittedSpeciesById } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
 import { getActiveGenomeId } from 'src/content/app/species/state/general/speciesGeneralSelectors';
 import { getPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorSelectors';
+
 import {
   SpeciesSidebarModalView,
   updateSpeciesSidebarModalForGenome
 } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
-
-import { fetchPopularSpecies } from 'src/content/app/species-selector/state/speciesSelectorSlice';
+import {
+  fetchPopularSpecies,
+  deleteSpeciesAndSave
+} from 'src/content/app/species-selector/state/speciesSelectorSlice';
 
 import SpeciesUsageToggle from './species-usage-toggle/SpeciesUsageToggle';
-import SpeciesRemove from './species-remove/SpeciesRemove';
 
 import { RootState } from 'src/store';
 
 import styles from './SpeciesTitleArea.scss';
 
+const MEDIUM_WIDTH = 720;
+const SMALL_WIDTH = 560;
+
+enum Display {
+  FULL = 'full',
+  COMPACT = 'compact',
+  MINIMAL = 'minimal'
+}
+
 const useSpecies = () => {
   const activeGenomeId = useAppSelector(getActiveGenomeId);
   const popularSpecies = useAppSelector(getPopularSpecies);
@@ -68,12 +87,31 @@ const useSpecies = () => {
 
 const SpeciesTitleArea = () => {
   const activeGenomeId = useAppSelector(getActiveGenomeId);
-  const isSidebarOpen = useAppSelector(getSidebarStatus);
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const { species, iconUrl } = useSpecies() || {};
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [display, setDisplay] = useState(Display.FULL);
+  const { trackDeletedSpecies } = useSpeciesAnalytics();
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { width: containerWidth } = useResizeObserver({ ref: containerRef });
+
+  // TODO:
+  // Remove the useEffect below when all of our target browsers support CSS container queries
+  useEffect(() => {
+    if (containerWidth < SMALL_WIDTH) {
+      display !== Display.MINIMAL && setDisplay(Display.MINIMAL);
+    } else if (containerWidth < MEDIUM_WIDTH) {
+      display !== Display.COMPACT && setDisplay(Display.COMPACT);
+    } else {
+      display !== Display.FULL && setDisplay(Display.FULL);
+    }
+  }, [containerWidth]);
 
   const blockClasses = classNames(styles.speciesTitleArea, {
-    [styles.speciesTitleAreaNarrow]: isSidebarOpen
+    [styles.speciesTitleAreaMinimal]: display === Display.MINIMAL,
+    [styles.speciesTitleAreaCompact]: display === Display.COMPACT
   });
 
   if (!activeGenomeId) {
@@ -89,8 +127,18 @@ const SpeciesTitleArea = () => {
     );
   };
 
+  const toggleRemovalDialog = () => {
+    setIsRemoving(!isRemoving);
+  };
+
+  const onRemove = () => {
+    dispatch(deleteSpeciesAndSave(activeGenomeId));
+    species && trackDeletedSpecies(species);
+    navigate(urlFor.speciesSelector());
+  };
+
   return species && iconUrl ? (
-    <div className={blockClasses}>
+    <div className={blockClasses} ref={containerRef}>
       <div className={styles.speciesIcon}>
         <img src={iconUrl} />
       </div>
@@ -106,8 +154,24 @@ const SpeciesTitleArea = () => {
         <SearchIcon />
       </div>
       <div className={styles.speciesRemove}>
-        <SpeciesRemove />
+        <SecondaryButton
+          onClick={toggleRemovalDialog}
+          isDisabled={isRemoving}
+          className={classNames({ [styles.disabledRemoveButton]: isRemoving })}
+        >
+          Remove species
+        </SecondaryButton>
       </div>
+      {isRemoving && (
+        <DeletionConfirmation
+          warningText="If you remove this species, any views you have configured will be lost — do you wish to continue?"
+          confirmText="Remove"
+          cancelText="Do not remove"
+          className={styles.speciesRemoveMessage}
+          onCancel={toggleRemovalDialog}
+          onConfirm={onRemove}
+        />
+      )}
     </div>
   ) : (
     <div className={blockClasses} />