Ensured export servers btn is not displayed when there are no servers

src/servers/ManageServers.tsx

@@ -43,10 +43,12 @@ export const ManageServers = (
 
       <Row className="mb-3">
         <div className="col-md-6 d-flex d-md-block mb-2 mb-md-0">
-          <ImportServersBtn className="flex-fill" onImportError={setErrorImporting} />
-          <Button outline className="ml-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
-            <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
-          </Button>
+          <ImportServersBtn className="flex-fill" onImportError={setErrorImporting}>Import servers</ImportServersBtn>
+          {allServers.length > 0 && (
+            <Button outline className="ml-2 flex-fill" onClick={async () => serversExporter.exportServers()}>
+              <FontAwesomeIcon icon={exportIcon} fixedWidth /> Export servers
+            </Button>
+          )}
         </div>
         <div className="col-md-6 text-md-right d-flex d-md-block">
           <Button outline color="primary" className="flex-fill" tag={Link} to="/server/create">

src/servers/helpers/ImportServersBtn.tsx

@@ -1,4 +1,4 @@
-import { useRef, RefObject, ChangeEvent, MutableRefObject } from 'react';
+import { useRef, RefObject, ChangeEvent, MutableRefObject, FC } from 'react';
 import { Button, UncontrolledTooltip } from 'reactstrap';
 import { faFileUpload as importIcon } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -20,14 +20,15 @@ interface ImportServersBtnConnectProps extends ImportServersBtnProps {
   fileRef: Ref<HTMLInputElement>;
 }
 
-const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
+const ImportServersBtn = ({ importServersFromFile }: ServersImporter): FC<ImportServersBtnConnectProps> => ({
   createServers,
   fileRef,
+  children,
   onImport = () => {},
   onImportError = () => {},
   tooltipPlacement = 'bottom',
   className = '',
-}: ImportServersBtnConnectProps) => {
+}) => {
   const ref = fileRef ?? useRef<HTMLInputElement>();
   const onChange = async ({ target }: ChangeEvent<HTMLInputElement>) =>
     importServersFromFile(target.files?.[0])
@@ -42,7 +43,7 @@ const ImportServersBtn = ({ importServersFromFile }: ServersImporter) => ({
   return (
     <>
       <Button outline id="importBtn" className={className} onClick={() => ref.current?.click()}>
-        <FontAwesomeIcon icon={importIcon} fixedWidth /> Import from file
+        <FontAwesomeIcon icon={importIcon} fixedWidth /> {children ?? 'Import from file'}
       </Button>
       <UncontrolledTooltip placement={tooltipPlacement} target="importBtn">
         You can create servers by importing a CSV file with columns <b>name</b>, <b>apiKey</b> and <b>url</b>.

test/servers/helpers/ImportServersBtn.test.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { UncontrolledTooltip } from 'reactstrap';
 import { Mock } from 'ts-mockery';
@@ -16,12 +17,13 @@ describe('<ImportServersBtn />', () => {
     current: Mock.of<HTMLInputElement>({ click }),
   };
   const ImportServersBtn = importServersBtnConstruct(serversImporterMock);
-  const createWrapper = (className?: string) => {
+  const createWrapper = (className?: string, children?: ReactNode) => {
     wrapper = shallow(
       <ImportServersBtn
         createServers={createServersMock}
         className={className}
         fileRef={fileRef}
+        children={children}
         onImport={onImportMock}
       />,
     );
@@ -50,6 +52,21 @@ describe('<ImportServersBtn />', () => {
     expect(wrapper.find('#importBtn').prop('className')).toEqual(expectedClassName);
   });
 
+  it.each([
+    [ undefined, true ],
+    [ 'foo', false ],
+    [ 'bar', false ],
+  ])('has expected text', (children, expectToHaveDefaultText) => {
+    const wrapper = createWrapper(undefined, children);
+
+    if (expectToHaveDefaultText) {
+      expect(wrapper.find('#importBtn').html()).toContain('Import from file');
+    } else {
+      expect(wrapper.find('#importBtn').html()).toContain(children);
+      expect(wrapper.find('#importBtn').html()).not.toContain('Import from file');
+    }
+  });
+
   it('triggers click on file ref when button is clicked', () => {
     const wrapper = createWrapper();
     const btn = wrapper.find('#importBtn');