Refactor ClusterTasks and dropdown containers to be functional compon…

…ents Update the ClusterTasks and *Dropdown containers to use the React Hooks API (i.e. convert from class-based to functional components) so we can adopt `react-query` and other libraries that only provide a hook-based API.
tektoncd · Apr 23, 2021 · 2ce9981 · 2ce9981
1 parent 5b68115
commit 2ce9981
Show file tree

Hide file tree

Showing 14 changed files with 399 additions and 462 deletions.
diff --git a/src/containers/ClusterTasks/ClusterTasks.js b/src/containers/ClusterTasks/ClusterTasks.js
diff --git a/src/containers/ClusterTasks/index.js b/src/containers/ClusterTasks/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -10,5 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 export { default } from './ClusterTasks';
diff --git a/src/containers/ClusterTasksDropdown/ClusterTasksDropdown.js b/src/containers/ClusterTasksDropdown/ClusterTasksDropdown.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { TooltipDropdown } from '@tektoncd/dashboard-components';
@@ -21,44 +21,35 @@ import {
   isFetchingClusterTasks,
   isWebSocketConnected
 } from '../../reducers';
-import { fetchClusterTasks } from '../../actions/tasks';
+import { fetchClusterTasks as fetchClusterTasksActionCreator } from '../../actions/tasks';
 
-class ClusterTasksDropdown extends React.Component {
-  componentDidMount() {
-    this.props.fetchClusterTasks();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { webSocketConnected } = this.props;
-    const { webSocketConnected: prevWebSocketConnected } = prevProps;
-    if (webSocketConnected && prevWebSocketConnected === false) {
-      this.props.fetchClusterTasks();
+function ClusterTasksDropdown({
+  fetchClusterTasks,
+  intl,
+  label,
+  webSocketConnected,
+  ...rest
+}) {
+  useEffect(() => {
+    if (webSocketConnected !== false) {
+      fetchClusterTasks();
     }
-  }
+  }, [webSocketConnected]);
 
-  render() {
-    const {
-      fetchClusterTasks: _fetchClusterTasks,
-      intl,
-      label,
-      webSocketConnected,
-      ...rest
-    } = this.props;
-    const emptyText = intl.formatMessage({
-      id: 'dashboard.clusterTasksDropdown.empty',
-      defaultMessage: 'No ClusterTasks found'
-    });
+  const emptyText = intl.formatMessage({
+    id: 'dashboard.clusterTasksDropdown.empty',
+    defaultMessage: 'No ClusterTasks found'
+  });
 
-    const labelString =
-      label ||
-      intl.formatMessage({
-        id: 'dashboard.clusterTasksDropdown.label',
-        defaultMessage: 'Select ClusterTask'
-      });
-    return (
-      <TooltipDropdown {...rest} emptyText={emptyText} label={labelString} />
-    );
-  }
+  const labelString =
+    label ||
+    intl.formatMessage({
+      id: 'dashboard.clusterTasksDropdown.label',
+      defaultMessage: 'Select ClusterTask'
+    });
+  return (
+    <TooltipDropdown {...rest} emptyText={emptyText} label={labelString} />
+  );
 }
 
 ClusterTasksDropdown.defaultProps = {
@@ -76,7 +67,7 @@ function mapStateToProps(state) {
 }
 
 const mapDispatchToProps = {
-  fetchClusterTasks
+  fetchClusterTasks: fetchClusterTasksActionCreator
 };
 
 export default connect(

diff --git a/src/containers/ClusterTasksDropdown/ClusterTasksDropdown.test.js b/src/containers/ClusterTasksDropdown/ClusterTasksDropdown.test.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -20,6 +20,7 @@ import { renderWithIntl } from '@tektoncd/dashboard-components/src/utils/test';
 
 import ClusterTasksDropdown from './ClusterTasksDropdown';
 import * as API from '../../api/clusterTasks';
+import * as reducers from '../../reducers';
 
 const props = {
   id: 'clustertasks-dropdown',
@@ -188,4 +189,22 @@ describe('ClusterTasksDropdown', () => {
     fireEvent.click(getByText(/clustertask-1/i));
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it('does not make the API call when the websocket disconnects', () => {
+    jest
+      .spyOn(reducers, 'isWebSocketConnected')
+      .mockImplementation(() => false);
+    jest.spyOn(API, 'getClusterTasks');
+
+    const store = mockStore({
+      ...clusterTasksStoreDefault,
+      notifications: {}
+    });
+    renderWithIntl(
+      <Provider store={store}>
+        <ClusterTasksDropdown {...props} />
+      </Provider>
+    );
+    expect(API.getClusterTasks).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/containers/ClusterTasksDropdown/index.js b/src/containers/ClusterTasksDropdown/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Tekton Authors
+Copyright 2020-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -10,5 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 export { default } from './ClusterTasksDropdown';
diff --git a/src/containers/NamespacesDropdown/index.js b/src/containers/NamespacesDropdown/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -10,5 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 export { default } from './NamespacesDropdown';
diff --git a/src/containers/PipelineResourcesDropdown/PipelineResourcesDropdown.js b/src/containers/PipelineResourcesDropdown/PipelineResourcesDropdown.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -11,7 +11,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, { useEffect } from 'react';
 import { injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { ALL_NAMESPACES } from '@tektoncd/dashboard-utils';
@@ -23,82 +23,66 @@ import {
   isFetchingPipelineResources,
   isWebSocketConnected
 } from '../../reducers';
-import { fetchPipelineResources } from '../../actions/pipelineResources';
+import { fetchPipelineResources as fetchPipelineResourcesActionCreator } from '../../actions/pipelineResources';
 
-class PipelineResourcesDropdown extends React.Component {
-  componentDidMount() {
-    const { namespace } = this.props;
-    this.props.fetchPipelineResources({ namespace });
-  }
+function PipelineResourcesDropdown({
+  fetchPipelineResources,
+  intl,
+  label,
+  namespace,
+  type,
+  webSocketConnected,
+  ...rest
+}) {
+  useEffect(() => {
+    fetchPipelineResources({ namespace });
+  }, [namespace, webSocketConnected]);
 
-  componentDidUpdate(prevProps) {
-    const { namespace, webSocketConnected } = this.props;
-    const { webSocketConnected: prevWebSocketConnected } = prevProps;
-    if (
-      namespace !== prevProps.namespace ||
-      (webSocketConnected && prevWebSocketConnected === false)
-    ) {
-      this.props.fetchPipelineResources({ namespace });
-    }
+  let emptyText = intl.formatMessage({
+    id: 'dashboard.pipelineResourcesDropdown.empty.allNamespaces',
+    defaultMessage: 'No PipelineResources found'
+  });
+  if (type && namespace !== ALL_NAMESPACES) {
+    emptyText = intl.formatMessage(
+      {
+        id: 'dashboard.pipelineResourcesDropdown.empty.selectedNamespace.type',
+        defaultMessage:
+          "No PipelineResources found of type ''{type}'' in the ''{namespace}'' namespace"
+      },
+      {
+        namespace,
+        type
+      }
+    );
+  } else if (type) {
+    emptyText = intl.formatMessage(
+      {
+        id: 'dashboard.pipelineResourcesDropdown.empty.allNamespaces.type',
+        defaultMessage: "No PipelineResources found of type ''{type}''"
+      },
+      { type }
+    );
+  } else if (namespace !== ALL_NAMESPACES) {
+    emptyText = intl.formatMessage(
+      {
+        id: 'dashboard.pipelineResourcesDropdown.empty.selectedNamespace',
+        defaultMessage:
+          "No PipelineResources found in the ''{namespace}'' namespace"
+      },
+      { namespace }
+    );
   }
 
-  render() {
-    const {
-      fetchPipelineResources: _fetchPipelineResources,
-      intl,
-      label,
-      namespace,
-      type,
-      webSocketConnected,
-      ...rest
-    } = this.props;
-    let emptyText = intl.formatMessage({
-      id: 'dashboard.pipelineResourcesDropdown.empty.allNamespaces',
-      defaultMessage: 'No PipelineResources found'
+  const labelString =
+    label ||
+    intl.formatMessage({
+      id: 'dashboard.pipelineResourcesDropdown.label',
+      defaultMessage: 'Select PipelineResource'
     });
-    if (type && namespace !== ALL_NAMESPACES) {
-      emptyText = intl.formatMessage(
-        {
-          id:
-            'dashboard.pipelineResourcesDropdown.empty.selectedNamespace.type',
-          defaultMessage:
-            "No PipelineResources found of type ''{type}'' in the ''{namespace}'' namespace"
-        },
-        {
-          namespace,
-          type
-        }
-      );
-    } else if (type) {
-      emptyText = intl.formatMessage(
-        {
-          id: 'dashboard.pipelineResourcesDropdown.empty.allNamespaces.type',
-          defaultMessage: "No PipelineResources found of type ''{type}''"
-        },
-        { type }
-      );
-    } else if (namespace !== ALL_NAMESPACES) {
-      emptyText = intl.formatMessage(
-        {
-          id: 'dashboard.pipelineResourcesDropdown.empty.selectedNamespace',
-          defaultMessage:
-            "No PipelineResources found in the ''{namespace}'' namespace"
-        },
-        { namespace }
-      );
-    }
 
-    const labelString =
-      label ||
-      intl.formatMessage({
-        id: 'dashboard.pipelineResourcesDropdown.label',
-        defaultMessage: 'Select PipelineResource'
-      });
-
-    return (
-      <TooltipDropdown {...rest} emptyText={emptyText} label={labelString} />
-    );
-  }
+  return (
+    <TooltipDropdown {...rest} emptyText={emptyText} label={labelString} />
+  );
 }
 
 PipelineResourcesDropdown.defaultProps = {
@@ -121,7 +105,7 @@ function mapStateToProps(state, ownProps) {
 }
 
 const mapDispatchToProps = {
-  fetchPipelineResources
+  fetchPipelineResources: fetchPipelineResourcesActionCreator
 };
 
 export default connect(

diff --git a/src/containers/PipelineResourcesDropdown/index.js b/src/containers/PipelineResourcesDropdown/index.js
@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Tekton Authors
+Copyright 2019-2021 The Tekton Authors
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
@@ -10,5 +10,6 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+/* istanbul ignore file */
 
 export { default } from './PipelineResourcesDropdown';