Ensured filter for bots does not show for Shlink older than 2.7.0

src/visits/VisitsStats.tsx

@@ -16,6 +16,7 @@ import { Result } from '../utils/Result';
 import { ShlinkApiError } from '../api/ShlinkApiError';
 import { Settings } from '../settings/reducers/settings';
 import { SelectedServer } from '../servers/data';
+import { supportsBotVisits } from '../utils/helpers/features';
 import SortableBarGraph from './helpers/SortableBarGraph';
 import GraphCard from './helpers/GraphCard';
 import LineChartCard from './helpers/LineChartCard';
@@ -86,6 +87,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
   const [ highlightedVisits, setHighlightedVisits ] = useState<NormalizedVisit[]>([]);
   const [ highlightedLabel, setHighlightedLabel ] = useState<string | undefined>();
   const [ visitsFilter, setVisitsFilter ] = useState<VisitsFilter>({});
+  const botsSupported = supportsBotVisits(selectedServer);
 
   const buildSectionUrl = (subPath?: string) => {
     const query = domain ? `?domain=${domain}` : '';
@@ -282,6 +284,7 @@ const VisitsStats: FC<VisitsStatsProps> = ({
               <VisitsFilterDropdown
                 className="ml-0 ml-md-2 mt-3 mt-md-0"
                 isOrphanVisits={isOrphanVisits}
+                botsSupported={botsSupported}
                 selected={visitsFilter}
                 onChange={setVisitsFilter}
               />

src/visits/helpers/VisitsFilterDropdown.tsx

@@ -13,28 +13,36 @@ interface VisitsFilterDropdownProps {
   selected?: VisitsFilter;
   className?: string;
   isOrphanVisits: boolean;
+  botsSupported: boolean;
 }
 
 export const VisitsFilterDropdown = (
-  { onChange, selected = {}, className, isOrphanVisits }: VisitsFilterDropdownProps,
+  { onChange, selected = {}, className, isOrphanVisits, botsSupported }: VisitsFilterDropdownProps,
 ) => {
+  if (!botsSupported && !isOrphanVisits) {
+    return null;
+  }
+
   const { orphanVisitsType, excludeBots = false } = selected;
   const propsForOrphanVisitsTypeItem = (type: OrphanVisitType): DropdownItemProps => ({
     active: orphanVisitsType === type,
     onClick: () => onChange({ ...selected, orphanVisitsType: type }),
   });
+  const onBotsClick = () => onChange({ ...selected, excludeBots: !selected?.excludeBots });
 
   return (
     <DropdownBtn text="Filters" dropdownClassName={className} className="mr-3" right minWidth={250}>
-      <DropdownItem header>Bots:</DropdownItem>
+      {botsSupported && (
-      <DropdownItem active={excludeBots} onClick={() => onChange({ ...selected, excludeBots: !selected?.excludeBots })}>
+        <>
-        Exclude potential bots
+          <DropdownItem header>Bots:</DropdownItem>
-      </DropdownItem>
+          <DropdownItem active={excludeBots} onClick={onBotsClick}>Exclude potential bots</DropdownItem>
+        </>
+      )}
+
+      {botsSupported && isOrphanVisits && <DropdownItem divider />}
 
       {isOrphanVisits && (
         <>
-          <DropdownItem divider />
-
           <DropdownItem header>Orphan visits type:</DropdownItem>
           <DropdownItem {...propsForOrphanVisitsTypeItem('base_url')}>Base URL</DropdownItem>
           <DropdownItem {...propsForOrphanVisitsTypeItem('invalid_short_url')}>Invalid short URL</DropdownItem>

test/short-urls/EditShortUrl.test.tsx

@@ -14,7 +14,7 @@ describe('<EditShortUrl />', () => {
   const ShortUrlForm = () => null;
   const goBack = jest.fn();
   const getShortUrlDetail = jest.fn();
-  const editShortUrl = jest.fn();
+  const editShortUrl = jest.fn(async () => Promise.resolve());
   const shortUrlCreation = { validateUrls: true };
   const createWrapper = (detail: Partial<ShortUrlDetail> = {}, edition: Partial<ShortUrlEdition> = {}) => {
     const EditSHortUrl = createEditShortUrl(ShortUrlForm);

test/short-urls/ShortUrlForm.test.tsx

@@ -12,7 +12,7 @@ import { SimpleCard } from '../../src/utils/SimpleCard';
 describe('<ShortUrlForm />', () => {
   let wrapper: ShallowWrapper;
   const TagsSelector = () => null;
-  const createShortUrl = jest.fn();
+  const createShortUrl = jest.fn(async () => Promise.resolve());
   const createWrapper = (selectedServer: SelectedServer = null, mode: Mode = 'create') => {
     const ShortUrlForm = createShortUrlForm(TagsSelector, () => null);
 

test/visits/helpers/VisitsFilterDropdown.test.tsx

@@ -8,7 +8,12 @@ describe('<VisitsFilterDropdown />', () => {
   const onChange = jest.fn();
   const createWrapper = (selected: VisitsFilter = {}, isOrphanVisits = true) => {
     wrapper = shallow(
-      <VisitsFilterDropdown isOrphanVisits={isOrphanVisits} selected={selected} onChange={onChange} />,
+      <VisitsFilterDropdown
+        isOrphanVisits={isOrphanVisits}
+        botsSupported={true}
+        selected={selected}
+        onChange={onChange}
+      />,
     );
 
     return wrapper;
@@ -68,4 +73,17 @@ describe('<VisitsFilterDropdown />', () => {
 
     expect(onChange).toHaveBeenCalledWith(expectedSelection);
   });
+
+  it('does not render the component when neither orphan visits or bots filtering will be displayed', () => {
+    const wrapper = shallow(
+      <VisitsFilterDropdown
+        isOrphanVisits={false}
+        botsSupported={false}
+        selected={{}}
+        onChange={onChange}
+      />,
+    );
+
+    expect(wrapper.text()).toEqual('');
+  });
 });