Update zmenu layout in genome browser (#583)

src/ensembl/src/content/app/browser/zmenu/Zmenu.scss

@@ -40,20 +40,7 @@
 .zmenuAppLinks {
   display: flex;
   align-items: center;
-}
-
-.zmenuAppButton {
-  flex: 0 0 auto;
-  height: 20px;
-  width: 20px;
-  margin-left: 16px;
-
-  svg {
-    width: 20px;
-    height: 20px;
-    fill: $white;
-    background-color: $blue;
-  }
+  justify-content: space-between;
 }
 
 .zmenuToggleFooter {

src/ensembl/src/content/app/browser/zmenu/ZmenuAppLinks.tsx

@@ -21,11 +21,7 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
 import { parseFeatureId } from 'src/content/app/browser/browserHelper';
 import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
 
-import {
-  getBrowserActiveGenomeId,
-  getBrowserActiveEnsObjectId,
-  isFocusObjectPositionDefault
-} from '../browserSelectors';
+import { getBrowserActiveGenomeId } from '../browserSelectors';
 
 import { ToggleButton as ToolboxToggleButton } from 'src/shared/components/toolbox';
 import ViewInApp, { UrlObj } from 'src/shared/components/view-in-app/ViewInApp';
@@ -38,8 +34,6 @@ type Props = {
 
 const ZmenuAppLinks = (props: Props) => {
   const genomeId = useSelector(getBrowserActiveGenomeId);
-  const activeFeatureId = useSelector(getBrowserActiveEnsObjectId);
-  const isInDefaultPosition = useSelector(isFocusObjectPositionDefault);
 
   const parsedFeatureId = parseFeatureId(props.featureId);
 
@@ -52,33 +46,26 @@ const ZmenuAppLinks = (props: Props) => {
   const getBrowserLink = () =>
     urlFor.browser({ genomeId, focus: featureIdForUrl });
 
-  const getEntityViewerLink = () =>
-    urlFor.entityViewer({
-      genomeId,
-      entityId: featureIdForUrl
-    });
-
-  const shouldShowBrowserButton =
-    props.featureId !== activeFeatureId || !isInDefaultPosition;
-
-  const links: UrlObj = {};
-
-  if (shouldShowBrowserButton) {
-    links['genomeBrowser'] = {
+  const links: UrlObj = {
+    genomeBrowser: {
       url: getBrowserLink(),
       replaceState: true
-    };
-  }
-
-  links['entityViewer'] = { url: getEntityViewerLink() };
+    },
+    entityViewer: {
+      url: urlFor.entityViewer({
+        genomeId,
+        entityId: featureIdForUrl
+      })
+    }
+  };
 
   return (
     <div className={styles.zmenuAppLinks}>
-      <ViewInApp links={links} />
       <ToolboxToggleButton
         className={styles.zmenuToggleFooter}
-        openElement={<span>Download</span>}
+        label="Download"
       />
+      <ViewInApp links={links} />
     </div>
   );
 };

src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.scss

 @import 'src/styles/common';
 
-$toggleButtonHeight: 14px;
-
 .main {
   position: relative;
 }
-
-.toggleButton {
-  display: inline-block;
-  user-select: none;
-  cursor: pointer;
-}

src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.test.tsx

@@ -25,7 +25,7 @@ import ToolboxExpandableContent, {
 const MainContent = () => (
   <div data-test-id="main content">
     <span>This is main content</span>
-    <ToggleButton openElement={<span>Click me!</span>} />
+    <ToggleButton label="Click me!" />
   </div>
 );
 const FooterContent = () => (
@@ -51,7 +51,7 @@ describe('<ToolboxExpandableContent />', () => {
     render(<ToolboxExpandableContent {...minimalProps} />);
     const toggleButton = screen.getByText('Click me!');
 
-    userEvent.click(toggleButton);
+    userEvent.click(toggleButton as HTMLElement);
 
     const footerContent = screen.queryByTestId('footer content');
     expect(footerContent).toBeTruthy();

src/ensembl/src/shared/components/toolbox/toolbox-expandable-content/ToolboxExpandableContent.tsx

@@ -15,10 +15,9 @@
  */
 
 import React, { useState, useContext, ReactNode } from 'react';
-import classNames from 'classnames';
 import noop from 'lodash/noop';
 
-import CloseButton from 'src/shared/components/close-button/CloseButton';
+import ShowHide from 'src/shared/components/show-hide/ShowHide';
 
 import styles from './ToolboxExpandableContent.scss';
 
@@ -34,12 +33,11 @@ type ToolboxExpandableContentProps = {
 
 type ToggleButtonProps = {
   className?: string;
-  openElement: ReactNode;
+  label: string;
 };
 
-const ToolboxExpandableContentContext = React.createContext<ToolboxContext | null>(
-  null
-);
+const ToolboxExpandableContentContext =
+  React.createContext<ToolboxContext | null>(null);
 
 const ToolboxExpandableContent = (props: ToolboxExpandableContentProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -69,13 +67,12 @@ export const ToggleButton = (props: ToggleButtonProps) => {
     toggleExpanded();
   };
 
-  const buttonClasses = classNames(styles.toggleButton, props.className);
-  return isExpanded ? (
-    <CloseButton className={buttonClasses} onClick={handleClick} />
-  ) : (
-    <span className={buttonClasses} onClick={handleClick}>
-      {props.openElement}
-    </span>
+  return (
+    <ShowHide
+      label={props.label}
+      onClick={handleClick}
+      isExpanded={isExpanded}
+    />
   );
 };
 

src/ensembl/stories/shared-components/toolbox/Toolbox.stories.scss

@@ -18,10 +18,6 @@
     margin-left: 1em;
     float: right;
   }
-  .download {
-    color: $blue;
-    font-size: 12px;
-  }
 }
 
 .mainToolboxContent,

src/ensembl/stories/shared-components/toolbox/Toolbox.stories.tsx

@@ -32,15 +32,13 @@ export const DefaultStory = () => {
     setIsShowing(!isShowing);
   };
 
-  const downloadElement = <span className={styles.download}>Download</span>;
-
   const mainToolboxContent = (
     <div className={styles.mainToolboxContent}>
       <p>This is main toolbox content</p>
       <p>
         This is the second paragraph
         <span className={styles.toggleButton}>
-          <ToolboxToggleButton openElement={downloadElement} />
+          <ToolboxToggleButton label="Download" />
         </span>
       </p>
     </div>