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>
-      <DropdownItem active={excludeBots} onClick={() => onChange({ ...selected, excludeBots: !selected?.excludeBots })}>
-        Exclude potential bots
-      </DropdownItem>
+      {botsSupported && (
+        <>
+          <DropdownItem header>Bots:</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>