fix(graphCard,rhelView,openshiftView): issues/10 query prop (#360)

* graphCard, c3GraphCard, prop graphQuery to query * rhelView, openshiftView, toolbar, graphQuery to query * redux, viewReducer, selectors, graphQuery to query
RedHatInsights · Jul 31, 2020 · d20307b · d20307b
1 parent f2f8948
commit d20307b
Show file tree

Hide file tree

Showing 15 changed files with 131 additions and 131 deletions.
diff --git a/src/components/c3GraphCard/c3GraphCard.js b/src/components/c3GraphCard/c3GraphCard.js
@@ -28,9 +28,9 @@ class C3GraphCard extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { graphQuery, productId } = this.props;
+    const { query, productId } = this.props;
 
-    if (productId !== prevProps.productId || !_isEqual(graphQuery, prevProps.graphQuery)) {
+    if (productId !== prevProps.productId || !_isEqual(query, prevProps.query)) {
       this.onUpdateGraphData();
     }
   }
@@ -41,18 +41,18 @@ class C3GraphCard extends React.Component {
    * @event onUpdateGraphData
    */
   onUpdateGraphData = () => {
-    const { getGraphReportsCapacity, graphQuery, isDisabled, productId } = this.props;
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { getGraphReportsCapacity, query, isDisabled, productId } = this.props;
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     if (!isDisabled && graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
-      const query = {
+      const graphQuery = {
         [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
         [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
-        ...graphQuery
+        ...query
       };
 
-      getGraphReportsCapacity(productId, query);
+      getGraphReportsCapacity(productId, graphQuery);
     }
   };
 
@@ -121,9 +121,9 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, graphQuery, selectOptionsType, productId, productShortLabel } = this.props;
+    const { filterGraphData, graphData, query, selectOptionsType, productId, productShortLabel } = this.props;
 
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -171,14 +171,14 @@ class C3GraphCard extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { cardTitle, children, error, graphQuery, isDisabled, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, children, error, query, isDisabled, selectOptionsType, pending, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     return (
       <Card className="curiosity-usage-graph fadein">
@@ -216,7 +216,7 @@ class C3GraphCard extends React.Component {
 /**
  * Prop types.
  *
- * @type {{productId: string, pending: boolean, error: boolean, graphQuery: object, cardTitle: string,
+ * @type {{productId: string, pending: boolean, error: boolean, query: object, cardTitle: string,
  *     filterGraphData: Array, getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
  *     viewId: string, t: Function, children: Node, graphData: object, isDisabled: boolean}}
  */
@@ -232,7 +232,7 @@ C3GraphCard.propTypes = {
   ),
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
-  graphQuery: PropTypes.shape({
+  query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
   }).isRequired,
   isDisabled: PropTypes.bool,

diff --git a/src/components/c3GraphCard/tests/c3GraphCard.test.js b/src/components/c3GraphCard/tests/c3GraphCard.test.js
@@ -7,7 +7,7 @@ import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } f
 describe('C3GraphCard Component', () => {
   it('should render a non-connected component', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
     const component = shallow(<C3GraphCard {...props} />);
@@ -17,7 +17,7 @@ describe('C3GraphCard Component', () => {
 
   it('should render multiple states', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         physicalSockets: [
@@ -88,7 +88,7 @@ describe('C3GraphCard Component', () => {
           id: 'thresholdLoremIpsumSockets'
         }
       ],
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         loremIpsumSockets: [
@@ -151,7 +151,7 @@ describe('C3GraphCard Component', () => {
 
   it('should render a custom legend', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
 
@@ -171,7 +171,7 @@ describe('C3GraphCard Component', () => {
 
   it('should return an empty render when disabled', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       isDisabled: true,
       productId: 'lorem'
     };

diff --git a/src/components/graphCard/__tests__/graphCard.test.js b/src/components/graphCard/__tests__/graphCard.test.js
@@ -7,7 +7,7 @@ import { RHSM_API_QUERY_GRANULARITY_TYPES as GRANULARITY_TYPES, rhsmApiTypes } f
 describe('GraphCard Component', () => {
   it('should render a non-connected component', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem'
     };
     const component = shallow(<GraphCard {...props} />);
@@ -17,7 +17,7 @@ describe('GraphCard Component', () => {
 
   it('should render multiple states', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         physicalSockets: [
@@ -88,7 +88,7 @@ describe('GraphCard Component', () => {
           id: 'thresholdLoremIpsumSockets'
         }
       ],
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       productId: 'lorem',
       graphData: {
         loremIpsumSockets: [
@@ -152,7 +152,7 @@ describe('GraphCard Component', () => {
 
   it('should return an empty render when disabled', () => {
     const props = {
-      graphQuery: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
+      query: { [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: GRANULARITY_TYPES.DAILY },
       isDisabled: true,
       productId: 'lorem'
     };

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -28,9 +28,9 @@ class GraphCard extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { graphQuery, productId } = this.props;
+    const { query, productId } = this.props;
 
-    if (productId !== prevProps.productId || !_isEqual(graphQuery, prevProps.graphQuery)) {
+    if (productId !== prevProps.productId || !_isEqual(query, prevProps.query)) {
       this.onUpdateGraphData();
     }
   }
@@ -41,18 +41,18 @@ class GraphCard extends React.Component {
    * @event onUpdateGraphData
    */
   onUpdateGraphData = () => {
-    const { getGraphReportsCapacity, graphQuery, isDisabled, productId } = this.props;
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { getGraphReportsCapacity, query, isDisabled, productId } = this.props;
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     if (!isDisabled && graphGranularity && productId) {
       const { startDate, endDate } = dateHelpers.getRangedDateTime(graphGranularity);
-      const query = {
+      const graphQuery = {
         [rhsmApiTypes.RHSM_API_QUERY_START_DATE]: startDate.toISOString(),
         [rhsmApiTypes.RHSM_API_QUERY_END_DATE]: endDate.toISOString(),
-        ...graphQuery
+        ...query
       };
 
-      getGraphReportsCapacity(productId, query);
+      getGraphReportsCapacity(productId, graphQuery);
     }
   };
 
@@ -84,8 +84,8 @@ class GraphCard extends React.Component {
    * @returns {Node}
    */
   renderChart() {
-    const { filterGraphData, graphData, graphQuery, selectOptionsType, productShortLabel, viewId } = this.props;
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const { filterGraphData, graphData, query, selectOptionsType, productShortLabel, viewId } = this.props;
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
     const { selected } = graphCardTypes.getGranularityOptions(selectOptionsType);
     const updatedGranularity = graphGranularity || selected;
 
@@ -158,14 +158,14 @@ class GraphCard extends React.Component {
    * @returns {Node}
    */
   render() {
-    const { cardTitle, children, error, graphQuery, isDisabled, selectOptionsType, pending, t } = this.props;
+    const { cardTitle, children, error, query, isDisabled, selectOptionsType, pending, t } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const { options } = graphCardTypes.getGranularityOptions(selectOptionsType);
-    const graphGranularity = graphQuery && graphQuery[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
+    const graphGranularity = query && query[rhsmApiTypes.RHSM_API_QUERY_GRANULARITY];
 
     return (
       <Card className="curiosity-usage-graph fadein">
@@ -196,7 +196,7 @@ class GraphCard extends React.Component {
 /**
  * Prop types.
  *
- * @type {{productId: string, pending: boolean, error: boolean, graphQuery: object, cardTitle: string,
+ * @type {{productId: string, pending: boolean, error: boolean, query: object, cardTitle: string,
  *     filterGraphData: Array, getGraphReportsCapacity: Function, productShortLabel: string, selectOptionsType: string,
  *     viewId: string, t: Function, children: Node, graphData: object, isDisabled: boolean}}
  */
@@ -213,7 +213,7 @@ GraphCard.propTypes = {
   ),
   getGraphReportsCapacity: PropTypes.func,
   graphData: PropTypes.object,
-  graphQuery: PropTypes.shape({
+  query: PropTypes.shape({
     [rhsmApiTypes.RHSM_API_QUERY_GRANULARITY]: PropTypes.oneOf([...Object.values(GRANULARITY_TYPES)]).isRequired
   }).isRequired,
   isDisabled: PropTypes.bool,

diff --git a/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap b/src/components/openshiftView/__tests__/__snapshots__/openshiftView.test.js.snap
@@ -10,12 +10,12 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
   </PageHeader>
   <PageToolbar>
     <Toolbar
-      graphQuery={
+      isDisabled={false}
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      isDisabled={false}
       t={[Function]}
       viewId="OpenShift"
     />
@@ -36,14 +36,14 @@ exports[`OpenshiftView Component should display an alternate graph on query-stri
           },
         ]
       }
-      graphQuery={
+      key="lorem ipsum"
+      productId="lorem ipsum"
+      productShortLabel="OpenShift"
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      key="lorem ipsum"
-      productId="lorem ipsum"
-      productShortLabel="OpenShift"
       viewId="OpenShift"
     >
       <Select
@@ -86,12 +86,12 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
   </PageHeader>
   <PageToolbar>
     <Toolbar
-      graphQuery={
+      isDisabled={false}
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      isDisabled={false}
       t={[Function]}
       viewId="OpenShift"
     />
@@ -112,14 +112,14 @@ exports[`OpenshiftView Component should have a fallback title: title 1`] = `
           },
         ]
       }
-      graphQuery={
+      key="lorem ipsum"
+      productId="lorem ipsum"
+      productShortLabel="OpenShift"
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      key="lorem ipsum"
-      productId="lorem ipsum"
-      productShortLabel="OpenShift"
       viewId="OpenShift"
     >
       <Select
@@ -162,12 +162,12 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
   </PageHeader>
   <PageToolbar>
     <Toolbar
-      graphQuery={
+      isDisabled={false}
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      isDisabled={false}
       t={[Function]}
       viewId="OpenShift"
     />
@@ -188,14 +188,14 @@ exports[`OpenshiftView Component should render a non-connected component: non-co
           },
         ]
       }
-      graphQuery={
+      key="lorem ipsum"
+      productId="lorem ipsum"
+      productShortLabel="OpenShift"
+      query={
         Object {
           "granularity": "daily",
         }
       }
-      key="lorem ipsum"
-      productId="lorem ipsum"
-      productShortLabel="OpenShift"
       viewId="OpenShift"
     >
       <Select