Set up species manager page and links to it (#1113)

- Added a mostly blank page for species management at /species-selector/manage-species
- Added an element for navigating to and away from that page
- Added a variation of the close button, which combines the close icon and a short, single-line label into a single button

src/content/app/entity-viewer/shared/components/entity-viewer-app-bar/EntityViewerAppBar.tsx

@@ -20,7 +20,7 @@ import isEqual from 'lodash/isEqual';
 
 import { useAppSelector } from 'src/store';
 import * as urlFor from 'src/shared/helpers/urlHelper';
-import { AppName } from 'src/global/globalConfig';
+import { AppName as AppNameText } from 'src/global/globalConfig';
 import {
   parseFocusObjectId,
   buildFocusIdForUrl
@@ -35,7 +35,8 @@ import { getAllGeneViews } from 'src/content/app/entity-viewer/state/gene-view/v
 
 import useEntityViewerAnalytics from 'src/content/app/entity-viewer/hooks/useEntityViewerAnalytics';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
@@ -98,7 +99,8 @@ const EntityViewerAppBar = () => {
 
   return (
     <AppBar
-      appName={AppName.ENTITY_VIEWER}
+      topLeft={<AppName>{AppNameText.ENTITY_VIEWER}</AppName>}
+      topRight={<SpeciesManagerIndicator />}
       mainContent={mainContent}
       aside={<HelpPopupButton slug="entity-viewer" />}
     />

src/content/app/genome-browser/components/browser-app-bar/BrowserAppBar.tsx

@@ -20,18 +20,20 @@ import { Link } from 'react-router-dom';
 import isEqual from 'lodash/isEqual';
 
 import * as urlFor from 'src/shared/helpers/urlHelper';
-import { AppName } from 'src/global/globalConfig';
+import { AppName as AppNameText } from 'src/global/globalConfig';
 
 import useGenomeBrowserAnalytics from 'src/content/app/genome-browser/hooks/useGenomeBrowserAnalytics';
 
 import { getBrowserActiveGenomeId } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
 import { getEnabledCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
+
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
 
 type BrowserAppBarProps = {
@@ -77,7 +79,8 @@ const BrowserAppBar = (props: BrowserAppBarProps) => {
 
   return (
     <AppBar
-      appName={AppName.GENOME_BROWSER}
+      topLeft={<AppName>{AppNameText.GENOME_BROWSER}</AppName>}
+      topRight={<SpeciesManagerIndicator />}
       mainContent={mainContent}
       aside={<HelpPopupButton slug="genome-browser" />}
     />

src/content/app/species-selector/SpeciesSelector.tsx

@@ -19,9 +19,11 @@ import { Route, Routes } from 'react-router-dom';
 
 import SpeciesSelectorAppBar from './components/species-selector-app-bar/SpeciesSelectorAppBar';
 import SpeciesSearchResultsModalAppBar from './components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar';
+import SpeciesManagerAppBar from './views/species-manager/species-manager-app-bar/SpeciesManagerAppBar';
 import SpeciesSelectorResultsView from './views/species-selector-results-view/SpeciesSelectorResultsView';
 import SpeciesSelectorMainView from './views/species-selector-main-view/SpeciesSelectorMainView';
 import SpeciesSelectorGeneSearchView from './views/species-selector-gene-search-view/SpeciesSelectorGeneSearchView';
+import SpeciesManager from './views/species-manager/SpeciesManager';
 
 import styles from './SpeciesSelector.module.css';
 
@@ -31,6 +33,7 @@ const SpeciesSelector = () => {
       <Route index element={<SpeciesSelectorAppBar />} />
       <Route path="/search" element={<SpeciesSearchResultsModalAppBar />} />
       <Route path="/search/gene" element={<SpeciesSelectorAppBar />} />
+      <Route path="/manage" element={<SpeciesManagerAppBar />} />
     </Routes>
   );
 
@@ -39,6 +42,7 @@ const SpeciesSelector = () => {
       <Route index element={<SpeciesSelectorMainView />} />
       <Route path="/search" element={<SpeciesSelectorResultsView />} />
       <Route path="/search/gene" element={<SpeciesSelectorGeneSearchView />} />
+      <Route path="/manage" element={<SpeciesManager />} />
     </Routes>
   );
 

src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar.tsx

@@ -23,7 +23,8 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
 
 import { getCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 import SpeciesLozenge from 'src/shared/components/selected-species/SpeciesLozenge';
 import GeneSearchButton from 'src/shared/components/gene-search-button/GeneSearchButton';
@@ -53,7 +54,8 @@ export const SpeciesSelectorAppBar = () => {
 
   return (
     <AppBar
-      appName="Species Selector"
+      topLeft={<AppName>Species Selector</AppName>}
+      topRight={<SpeciesManagerIndicator />}
       mainContent={mainContent}
       aside={<HelpPopupButton slug="species-selector-intro" />}
     />

src/content/app/species-selector/components/species-selector-search-results-app-bar/SpeciesSelectorSearchResultsAppBar.tsx

@@ -17,16 +17,14 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
-import CloseButton from 'src/shared/components/close-button/CloseButton';
-
-import styles from './SpeciesSelectorSearchResultsAppBar.module.css';
+import { CloseButtonWithLabel } from 'src/shared/components/close-button/CloseButton';
 
 const SpeciesSearchResultsModalAppBar = () => {
   return (
     <AppBar
-      appName="Species Selector"
+      topLeft={<AppName>Species Selector</AppName>}
       mainContent={<CloseModalView />}
       aside={<HelpPopupButton slug="species-selector-intro" />}
     />
@@ -41,12 +39,11 @@ const CloseModalView = () => {
   };
 
   return (
-    <div className={styles.container}>
-      <div className={styles.close} onClick={handleClick}>
-        <CloseButton />
-        <span>Find a species</span>
-      </div>
-    </div>
+    <CloseButtonWithLabel
+      label="Find a species"
+      labelPosition="right"
+      onClick={handleClick}
+    />
   );
 };
 

src/content/app/species-selector/views/species-manager/SpeciesManager.module.css

@@ -0,0 +1,5 @@
+.container {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  padding-left: var(--double-standard-gutter);
+}

src/content/app/species-selector/views/species-manager/SpeciesManager.tsx

@@ -0,0 +1,45 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import ModalView from 'src/shared/components/modal-view/ModalView';
+
+import SelectedGenomesTable from './selected-genomes-table/SelectedGenomesTable';
+
+import styles from './SpeciesManager.module.css';
+
+const SpeciesManager = () => {
+  const navigate = useNavigate();
+
+  const onClose = () => {
+    navigate(-1);
+  };
+
+  return (
+    <ModalView onClose={onClose}>
+      <div className={styles.container}>
+        <div style={{ height: '60px' }}>Here will be the dropdown</div>
+        <div>
+          <SelectedGenomesTable />
+        </div>
+      </div>
+    </ModalView>
+  );
+};
+
+export default SpeciesManager;

src/content/app/species-selector/views/species-manager/selected-genomes-table/SelectedGenomesTable.tsx

@@ -0,0 +1,23 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+
+const SelectedGenomesTable = () => {
+  return <div>This is the table of selected genomes</div>;
+};
+
+export default SelectedGenomesTable;

src/content/app/species-selector/views/species-manager/species-manager-app-bar/SpeciesManagerAppBar.tsx

@@ -0,0 +1,69 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { useAppSelector } from 'src/store';
+
+import { getCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
+
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
+import { HelpPopupButton } from 'src/shared/components/help-popup';
+import SpeciesLozenge from 'src/shared/components/selected-species/SpeciesLozenge';
+import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
+
+import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
+
+export const SpeciesManagerAppBar = () => {
+  const selectedSpecies = useAppSelector(getCommittedSpecies);
+  const navigate = useNavigate();
+
+  const onClose = () => navigate(-1);
+
+  const mainContent = <AppBarMainContent selectedSpecies={selectedSpecies} />;
+
+  const appName = <AppName>Species Selector</AppName>;
+
+  return (
+    <AppBar
+      topLeft={appName}
+      topRight={<SpeciesManagerIndicator mode="close" onClose={onClose} />}
+      mainContent={mainContent}
+      aside={<HelpPopupButton slug="species-selector-intro" />}
+    />
+  );
+};
+
+const AppBarMainContent = (props: { selectedSpecies: CommittedItem[] }) => {
+  const selectedSpecies = props.selectedSpecies.map((species) => (
+    <SpeciesLozenge
+      key={species.genome_id}
+      species={species}
+      theme="grey"
+      disabled={true}
+    />
+  ));
+
+  return (
+    <div>
+      <SpeciesTabsSlider>{selectedSpecies}</SpeciesTabsSlider>
+    </div>
+  );
+};
+
+export default SpeciesManagerAppBar;

src/content/app/species/components/species-app-bar/SpeciesAppBar.tsx

@@ -17,12 +17,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { AppName } from 'src/global/globalConfig';
+import { AppName as AppNameText } from 'src/global/globalConfig';
 
 import { getActiveGenomeId } from 'src/content/app/species/state/general/speciesGeneralSelectors';
 import { getCommittedSpecies } from 'src/content/app/species-selector/state/species-selector-general-slice/speciesSelectorGeneralSelectors';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SelectedSpecies } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
@@ -50,7 +51,8 @@ const SpeciesAppBar = (props: SpeciesAppBarProps) => {
 
   return (
     <AppBar
-      appName={AppName.SPECIES_SELECTOR}
+      topLeft={<AppName>{AppNameText.SPECIES_SELECTOR}</AppName>}
+      topRight={<SpeciesManagerIndicator />}
       mainContent={tabsSlider}
       aside={<HelpPopupButton slug="species-homepage" />}
     />

src/content/app/tools/blast/components/blast-app-bar/BlastAppBar.tsx

@@ -35,13 +35,14 @@ import { getSelectedSpeciesIds } from 'src/content/app/tools/blast/state/blast-f
 import { placeholderMessage } from 'src/content/app/species-selector/components/species-selector-app-bar/SpeciesSelectorAppBar';
 import { getBlastView } from 'src/content/app/tools/blast/state/general/blastGeneralSelectors';
 
-import AppBar from 'src/shared/components/app-bar/AppBar';
+import AppBar, { AppName } from 'src/shared/components/app-bar/AppBar';
+import SpeciesManagerIndicator from 'src/shared/components/species-manager-indicator/SpeciesManagerIndicator';
 import { SpeciesLozenge } from 'src/shared/components/selected-species';
 import SpeciesTabsSlider from 'src/shared/components/species-tabs-slider/SpeciesTabsSlider';
 import SpeciesTabsWrapper from 'src/shared/components/species-tabs-wrapper/SpeciesTabsWrapper';
 import { HelpPopupButton } from 'src/shared/components/help-popup';
 
-import { AppName } from 'src/global/globalConfig';
+import { AppName as AppNameText } from 'src/global/globalConfig';
 import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
 
 const BlastAppBar = () => {
@@ -56,7 +57,7 @@ const BlastAppBar = () => {
   const isSmallViewport = useMediaQuery(smallViewportMediaQuery);
 
   const appBarProps = {
-    appName: AppName.TOOLS,
+    topLeft: <AppName>{AppNameText.TOOLS}</AppName>,
     aside: <HelpPopupButton slug="blast" />
   };
 
@@ -112,7 +113,13 @@ const BlastAppBar = () => {
     </SpeciesTabsWrapper>
   );
 
-  return <AppBar mainContent={speciesTabsSlider} {...appBarProps} />;
+  return (
+    <AppBar
+      mainContent={speciesTabsSlider}
+      topRight={<SpeciesManagerIndicator />}
+      {...appBarProps}
+    />
+  );
 };
 
 const shouldEnableSpecies = (params: {