BASIRA #275 - Adjusting style of value list tabs to allow scrolling

client/src/pages/admin/ValueLists.css

@@ -0,0 +1,4 @@
+.value-lists > .tab > .ui.menu {
+  overflow: auto;
+  padding-bottom: 0.25em;
+}

client/src/pages/admin/ValueLists.js

@@ -1,15 +1,13 @@
 // @flow
 
 import type { EditContainerProps } from '@performant-software/shared-components/types';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Container, Header, Tab } from 'semantic-ui-react';
+import _ from 'underscore';
 import ValueListsTable from '../../components/ValueListsTable';
 import withMenuBar from '../../hooks/MenuBar';
 import ValueListsService from '../../services/ValueLists';
-import {
-  Container,
-  Header,
-  Tab
-} from 'semantic-ui-react';
+import './ValueLists.css';
 
 import type { ValueList as ValueListType } from '../../types/ValueList';
 import type { Translateable } from '../../types/Translateable';
@@ -21,24 +19,49 @@ type Props = EditContainerProps & Translateable & {
 const ValueLists = (props: Props) => {
   const [objectsList, setObjectsList] = useState([]);
 
-  useEffect(() => {
-    ValueListsService.getObjectsList()
-      .then((response) => setObjectsList(response.data.objects));
-  }, []);
-
-  const panes = objectsList.map((objectName) => ({
+  /**
+   * Memo-izes the tab panes.
+   *
+   * @type {{menuItem: *, render: function(): *}[]}
+   */
+  const panes = useMemo(() => objectsList.map((objectName) => ({
     menuItem: objectName,
     render: () => (
-      <Tab.Pane attached={false}>
-        <ValueListsTable objectName={objectName} />
+      <Tab.Pane
+        attached={false}
+      >
+        <ValueListsTable
+          objectName={objectName}
+        />
       </Tab.Pane>
     )
-  }));
+  })), [objectsList]);
+
+  /**
+   * Sets the tab list on the state.
+   */
+  useEffect(() => {
+    ValueListsService
+      .getObjectsList()
+      .then((response) => setObjectsList(response.data.objects))
+  }, []);
 
   return (
-    <Container>
-      <Header as='h2'>{props.t('Admin.menu.valueLists')}</Header>
-      <Tab menu={{ secondary: true, pointing: true }} panes={panes} />
+    <Container
+      className='value-lists'
+    >
+      <Header
+        as='h2'
+      >
+        { props.t('Admin.menu.valueLists') }
+      </Header>
+      <Tab
+        className='tab'
+        menu={{
+          secondary: true
+        }}
+        panes={panes}
+      />
     </Container>
   );
 };