feat: default timepicker to last week when dataset is changed (#12609)

* set up timepicker to last when dataset is changed

* simplify logic for dataset change

* update modal code

* remove uneeded code

* fix bug

* fix bug

superset-frontend/src/explore/components/ControlPanelsContainer.jsx

@@ -132,7 +132,6 @@ class ControlPanelsContainer extends React.Component {
     if (visibility && !visibility.call(config, this.props, controlData)) {
       return null;
     }
-
     return (
       <Control
         key={`control-${name}`}
@@ -140,6 +139,7 @@ class ControlPanelsContainer extends React.Component {
         validationErrors={validationErrors}
         actions={actions}
         formData={provideFormDataToProps ? formData : null}
+        datasource={formData?.datasource}
         {...restProps}
       />
     );

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterControl.tsx

@@ -74,7 +74,6 @@ const fetchTimeRange = async (
 ) => {
   const query = rison.encode(timeRange);
   const endpoint = `/api/v1/time_range/?q=${query}`;
-
   try {
     const response = await SupersetClient.get({ endpoint });
     const timeRangeString = buildTimeRangeString(
@@ -171,20 +170,23 @@ interface DateFilterLabelProps {
   onChange: (timeRange: string) => void;
   value?: string;
   endpoints?: TimeRangeEndpoints;
+  datasource?: string;
 }
 
 export default function DateFilterControl(props: DateFilterLabelProps) {
-  const { value = 'Last week', endpoints, onChange } = props;
+  const { value = 'Last week', endpoints, onChange, datasource } = props;
   const [actualTimeRange, setActualTimeRange] = useState<string>(value);
 
   const [show, setShow] = useState<boolean>(false);
   const [frame, setFrame] = useState<FrameType>(guessFrame(value));
+  const [isMounted, setIsMounted] = useState<boolean>(false);
   const [timeRangeValue, setTimeRangeValue] = useState(value);
   const [validTimeRange, setValidTimeRange] = useState<boolean>(false);
   const [evalResponse, setEvalResponse] = useState<string>(value);
   const [tooltipTitle, setTooltipTitle] = useState<string>(value);
 
   useEffect(() => {
+    if (!isMounted) setIsMounted(true);
     fetchTimeRange(value, endpoints).then(({ value: actualRange, error }) => {
       if (error) {
         setEvalResponse(error || '');
@@ -218,6 +220,14 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
     });
   }, [value]);
 
+  useEffect(() => {
+    if (isMounted) {
+      onChange('Last week');
+      setTimeRangeValue('Last week');
+      setFrame(guessFrame('Last week'));
+    }
+  }, [datasource]);
+
   useEffect(() => {
     fetchTimeRange(timeRangeValue, endpoints).then(({ value, error }) => {
       if (error) {
@@ -236,8 +246,8 @@ export default function DateFilterControl(props: DateFilterLabelProps) {
   }
 
   function onHide() {
-    setFrame(guessFrame(value));
     setTimeRangeValue(value);
+    setFrame(guessFrame(value));
     setShow(false);
   }