kgabryje commented on a change in pull request #18215:
URL: https://github.com/apache/superset/pull/18215#discussion_r795687145
##########
File path: superset-frontend/src/explore/components/ControlPanelsContainer.tsx
##########
@@ -190,57 +174,79 @@ function getState(
expandedCustomizeSections,
querySections,
customizeSections,
- loading: false,
};
}
-export class ControlPanelsContainer extends React.Component<
- ControlPanelsContainerProps,
- ControlPanelsContainerState
-> {
- // trigger updates to the component when async plugins load
- static contextType = PluginContext;
-
- constructor(props: ControlPanelsContainerProps) {
- super(props);
- this.state = {
- expandedQuerySections: [],
- expandedCustomizeSections: [],
- querySections: [],
- customizeSections: [],
- loading: false,
- };
- this.renderControl = this.renderControl.bind(this);
- this.renderControlPanelSection = this.renderControlPanelSection.bind(this);
- }
+export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
+ const pluginContext = useContext(PluginContext);
- componentDidUpdate(prevProps: ControlPanelsContainerProps) {
- if (
- this.props.form_data.datasource !== prevProps.form_data.datasource ||
- this.props.form_data.viz_type !== prevProps.form_data.viz_type
- ) {
- // eslint-disable-next-line react/no-did-update-set-state
- this.setState(getState(this.props));
- }
- }
+ const prevDatasource = usePrevious(props.exploreState.datasource);
- // required for an Antd bug that would otherwise malfunction re-rendering
- // a collapsed panel after changing the datasource or viz type
- UNSAFE_componentWillReceiveProps(nextProps: ControlPanelsContainerProps) {
+ const [expandedQuerySections, setExpandedQuerySections] = useState<string[]>(
+ [],
+ );
+ const [expandedCustomizeSections, setExpandedCustomizeSections] = useState<
+ string[]
+ >([]);
+ const [querySections, setQuerySections] = useState<
+ ControlPanelSectionConfig[]
+ >([]);
+ const [customizeSections, setCustomizeSections] = useState<
+ ControlPanelSectionConfig[]
+ >([]);
+ const [showDatasourceAlert, setShowDatasourceAlert] = useState(false);
+
+ useEffect(() => {
if (
- this.props.form_data.datasource !== nextProps.form_data.datasource ||
- this.props.form_data.viz_type !== nextProps.form_data.viz_type
+ prevDatasource &&
+ (props.exploreState.datasource?.id !== prevDatasource.id ||
+ props.exploreState.datasource?.type !== prevDatasource.type)
) {
- this.setState({ loading: true });
+ setShowDatasourceAlert(true);
}
- }
+ }, [
+ props.exploreState.datasource?.id,
+ props.exploreState.datasource?.type,
+ prevDatasource,
+ ]);
+
+ useEffect(() => {
+ const {
+ expandedQuerySections: newExpandedQuerySections,
+ expandedCustomizeSections: newExpandedCustomizeSections,
+ querySections: newQuerySections,
+ customizeSections: newCustomizeSections,
+ } = getState(
+ props.form_data.viz_type,
+ props.exploreState.datasource,
+ props.datasource_type,
+ );
+ setExpandedQuerySections(newExpandedQuerySections);
+ setExpandedCustomizeSections(newExpandedCustomizeSections);
+ setQuerySections(newQuerySections);
+ setCustomizeSections(newCustomizeSections);
+ }, [props.form_data.datasource, props.form_data.viz_type]);
+
+ const resetTransferredControls = useCallback(() => {
+ ensureIsArray(props.exploreState.controlsTransferred).forEach(controlName
=>
+ props.actions.setControlValue(
+ controlName,
+ props.controls[controlName].default,
+ ),
+ );
+ }, [props.actions, props.exploreState.controlsTransferred, props.controls]);
- componentDidMount() {
- this.setState(getState(this.props));
- }
+ const handleClearFormClick = useCallback(() => {
+ resetTransferredControls();
+ setShowDatasourceAlert(false);
+ }, [resetTransferredControls]);
+
+ const handleContinueClick = useCallback(() => {
+ setShowDatasourceAlert(false);
+ }, []);
- renderControl({ name, config }: CustomControlItem) {
- const { actions, controls, chart, exploreState } = this.props;
+ const renderControl = ({ name, config }: CustomControlItem) => {
+ const { controls, chart } = props;
Review comment:
🤦 I moved `exploreState` into `ControlPanelsContainer`, but then I
changed my mind and moved it back to props. For some reason, linter didn't mark
this line with "variable not found" error. Thanks for finding that!
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
