fix: don't allow invalid filter selections on timeline (#13855)

Author: teallarson

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineFilters.module.scss

@@ -4,7 +4,6 @@
 .filterButton {
   background-color: colors.$foreground;
   border-radius: variables.$border-radius-sm;
-  color: colors.$grey-400;
   border: variables.$border-thin solid colors.$grey-300;
   min-height: auto;
   height: variables.$button-height-xs;

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/ConnectionTimelineFilters.tsx

@@ -65,17 +65,18 @@ export const ConnectionTimelineFilters: React.FC<ConnectionTimelineFiltersProps>
               buttonClassName={styles.filterButton}
               optionClassName={styles.filterOption}
               optionTextAs="span"
-              options={statusFilterOptions}
+              options={statusFilterOptions(filterValues)}
               selectedValue={filterValues.status}
               onSelect={(value) => setFilterValue("status", value)}
+              isDisabled={!["sync", "clear", "refresh", ""].includes(filterValues.eventCategory)}
             />
           </FlexItem>
           <FlexItem>
             <ListBox
               buttonClassName={styles.filterButton}
               optionClassName={styles.filterOption}
               optionTextAs="span"
-              options={eventTypeFilterOptions}
+              options={eventTypeFilterOptions(filterValues)}
               selectedValue={filterValues.eventCategory}
               onSelect={(value) => setFilterValue("eventCategory", value)}
             />

airbyte-webapp/src/pages/connections/ConnectionTimelinePage/utils.tsx

@@ -180,32 +180,38 @@ const generateEventTypeFilterOption = (value: TimelineFilterValues["eventCategor
   value,
 });
 
-export const statusFilterOptions = [
-  {
-    label: (
-      <Text color="grey" bold>
-        <FormattedMessage id="connection.timeline.filters.allStatuses" />
-      </Text>
-    ),
-    value: "",
-  },
-  generateStatusFilterOption("success", "connection.timeline.filters.success", "statusSuccess"),
-  generateStatusFilterOption("failure", "connection.timeline.filters.failure", "statusError"),
-  generateStatusFilterOption("incomplete", "connection.timeline.filters.incomplete", "statusWarning"),
-  generateStatusFilterOption("cancelled", "connection.timeline.filters.cancelled", "statusCancelled"),
-];
-
-export const eventTypeFilterOptions = [
-  {
-    label: (
-      <Text color="grey" bold>
-        <FormattedMessage id="connection.timeline.filters.allEventTypes" />
-      </Text>
-    ),
-    value: "",
-  },
-  generateEventTypeFilterOption("sync", "connection.timeline.filters.sync"),
-  generateEventTypeFilterOption("refresh", "connection.timeline.filters.refresh"),
-  generateEventTypeFilterOption("clear", "connection.timeline.filters.clear"),
-  generateEventTypeFilterOption("connection_settings", "connection.timeline.filters.connection_settings"),
-];
+export const statusFilterOptions = (filterValues: TimelineFilterValues) => {
+  return [
+    {
+      label: (
+        <Text color={!["sync", "clear", "refresh", ""].includes(filterValues.eventCategory) ? "grey300" : "grey"} bold>
+          <FormattedMessage id="connection.timeline.filters.allStatuses" />
+        </Text>
+      ),
+      value: "",
+    },
+    generateStatusFilterOption("success", "connection.timeline.filters.success", "statusSuccess"),
+    generateStatusFilterOption("failure", "connection.timeline.filters.failure", "statusError"),
+    generateStatusFilterOption("incomplete", "connection.timeline.filters.incomplete", "statusWarning"),
+    generateStatusFilterOption("cancelled", "connection.timeline.filters.cancelled", "statusCancelled"),
+  ];
+};
+
+export const eventTypeFilterOptions = (filterValues: TimelineFilterValues) => {
+  return [
+    {
+      label: (
+        <Text color="grey" bold>
+          <FormattedMessage id="connection.timeline.filters.allEventTypes" />
+        </Text>
+      ),
+      value: "",
+    },
+    generateEventTypeFilterOption("sync", "connection.timeline.filters.sync"),
+    generateEventTypeFilterOption("refresh", "connection.timeline.filters.refresh"),
+    generateEventTypeFilterOption("clear", "connection.timeline.filters.clear"),
+    ...(filterValues.status === ""
+      ? [generateEventTypeFilterOption("connection_settings", "connection.timeline.filters.connection_settings")]
+      : []),
+  ];
+};