feat(alert/report): add 'not null' condition option to modal (#12077)

superset-frontend/src/views/CRUD/alert/AlertReportModal.tsx

@@ -74,6 +74,10 @@ const CONDITIONS = [
     label: t('!= (Is Not Equal)'),
     value: '!=',
   },
+  {
+    label: t('Not Null'),
+    value: 'not null',
+  },
 ];
 
 const RETENTION_OPTIONS = [
@@ -215,6 +219,10 @@ export const StyledInputContainer = styled.div`
     flex: 1 1 auto;
   }
 
+  input[disabled] {
+    color: ${({ theme }) => theme.colors.grayscale.base};
+  }
+
   textarea {
     height: 160px;
     resize: none;
@@ -455,7 +463,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   > | null>();
   const [isHidden, setIsHidden] = useState<boolean>(true);
   const [contentType, setContentType] = useState<string>('dashboard');
+
   // Dropdown options
+  const [conditionNotNull, setConditionNotNull] = useState<boolean>(false);
   const [sourceOptions, setSourceOptions] = useState<MetaObject[]>([]);
   const [dashboardOptions, setDashboardOptions] = useState<MetaObject[]>([]);
   const [chartOptions, setChartOptions] = useState<MetaObject[]>([]);
@@ -536,6 +546,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
 
     const data: any = {
       ...currentAlert,
+      validator_type: conditionNotNull ? 'not null' : 'operator',
+      validator_config_json: conditionNotNull
+        ? {}
+        : currentAlert?.validator_config_json,
       chart: contentType === 'chart' ? currentAlert?.chart?.value : undefined,
       dashboard:
         contentType === 'dashboard'
@@ -566,7 +580,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
         delete data.last_value;
         delete data.last_value_row_json;
 
-        updateResource(update_id, data).then(() => {
+        updateResource(update_id, data).then(response => {
+          if (!response) {
+            return;
+          }
+
           if (onAdd) {
             onAdd();
           }
@@ -577,6 +595,10 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
     } else if (currentAlert) {
       // Create
       createResource(data).then(response => {
+        if (!response) {
+          return;
+        }
+
         if (onAdd) {
           onAdd(response);
         }
@@ -787,6 +809,8 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   };
 
   const onConditionChange = (op: Operator) => {
+    setConditionNotNull(op === 'not null');
+
     const config = {
       op,
       threshold: currentAlert
@@ -851,8 +875,9 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       } else if (
         !!currentAlert.database &&
         currentAlert.sql?.length &&
-        !!currentAlert.validator_config_json?.op &&
+        (conditionNotNull || !!currentAlert.validator_config_json?.op) &&
-        currentAlert.validator_config_json?.threshold !== undefined
+        (conditionNotNull ||
+          currentAlert.validator_config_json?.threshold !== undefined)
       ) {
         setDisableSave(false);
       } else {
@@ -890,6 +915,13 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           setNotificationSettings(settings);
           setContentType(resource.chart ? 'chart' : 'dashboard');
 
+          const validatorConfig =
+            typeof resource.validator_config_json === 'string'
+              ? JSON.parse(resource.validator_config_json)
+              : resource.validator_config_json;
+
+          setConditionNotNull(resource.validator_type === 'not null');
+
           setCurrentAlert({
             ...resource,
             chart: resource.chart
@@ -913,9 +945,11 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
             })),
             // @ts-ignore: Type not assignable
             validator_config_json:
-              typeof resource.validator_config_json === 'string'
+              resource.validator_type === 'not null'
-                ? JSON.parse(resource.validator_config_json)
+                ? {
-                : resource.validator_config_json,
+                    op: 'not null',
+                  }
+                : validatorConfig,
           });
         }
       });
@@ -935,7 +969,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
       sql: '',
       type: isReport ? 'Report' : 'Alert',
       validator_config_json: {},
-      validator_type: 'not null',
+      validator_type: '',
     });
 
     setNotificationSettings([]);
@@ -960,6 +994,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
           currentAlert.chart,
           contentType,
           notificationSettings,
+          conditionNotNull,
         ]
       : [],
   );
@@ -1138,6 +1173,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
                     <input
                       type="number"
                       name="threshold"
+                      disabled={conditionNotNull}
                       value={
                         currentAlert && currentAlert.validator_config_json
                           ? currentAlert.validator_config_json.threshold || ''

superset-frontend/src/views/CRUD/alert/types.ts

@@ -38,7 +38,7 @@ export type MetaObject = {
   value?: number | string;
 };
 
-export type Operator = '<' | '>' | '<=' | '>=' | '==' | '!=';
+export type Operator = '<' | '>' | '<=' | '>=' | '==' | '!=' | 'not null';
 
 export type AlertObject = {
   active?: boolean;

superset-frontend/src/views/CRUD/hooks.ts

@@ -254,18 +254,23 @@ export function useSingleViewResource<D extends object = any>(
         ({ json = {} }) => {
           updateState({
             resource: json.result,
+            error: null,
           });
           return json.id;
         },
-        createErrorHandler(errMsg =>
+        createErrorHandler(errMsg => {
           handleErrorMsg(
             t(
               'An error occurred while creating %ss: %s',
               resourceLabel,
               JSON.stringify(errMsg),
             ),
-          ),
+          );
-        ),
+
+          updateState({
+            error: errMsg,
+          });
+        }),
       )
       .finally(() => {
         updateState({ loading: false });
@@ -287,18 +292,25 @@ export function useSingleViewResource<D extends object = any>(
         ({ json = {} }) => {
           updateState({
             resource: json.result,
+            error: null,
           });
           return json.result;
         },
-        createErrorHandler(errMsg =>
+        createErrorHandler(errMsg => {
           handleErrorMsg(
             t(
               'An error occurred while fetching %ss: %s',
               resourceLabel,
               JSON.stringify(errMsg),
             ),
-          ),
+          );
-        ),
+
+          updateState({
+            error: errMsg,
+          });
+
+          return errMsg;
+        }),
       )
       .finally(() => {
         updateState({ loading: false });