refactor(Grid): convert some grid files

refactor(grid): remove sm prop PR feedback from David add optional chaining fix(i18n): discovery-8 partial context into keys (quipucords#124) feat(wizard): discovery-153 pf4 wizard wrapper (quipucords#124) * confirmationModal, pass isContentOnly * modal, add isContentOnly, removes padding * wizard, consistent pf4 wrapper, allow modal sizing refactor(addSourceWizard): discovery-153, pf4 wizard (quipucords#124) * locale, wizard form strings * addSourceWizard, Constants, restructure steps * addSourceWizardStepThree, add empty-state * styling, restructure pf3 styling wizard form refactor(scanHostList): discovery-148, pf4 empty-state (quipucords#125) refactor(grid): update scanHostList.js refactor(grid): update tests refactor(Grid): fix icon syntax + update tests
jenny-s51 · Jul 25, 2022 · 13a4310 · 13a4310
1 parent f2db5c3
commit 13a4310
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 191 deletions.
diff --git a/src/components/credentials/credentialListItem.js b/src/components/credentials/credentialListItem.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { ListView, Button, Grid, Icon, Checkbox } from 'patternfly-react';
+import { ListView, Button, Icon, Checkbox } from 'patternfly-react';
+import { List, ListItem } from '@patternfly/react-core';
 import _find from 'lodash/find';
 import _get from 'lodash/get';
 import { connect, reduxTypes, store } from '../../redux';
@@ -127,21 +128,18 @@ class CredentialListItem extends React.Component {
       case 'sources':
         (item.sources || []).sort((item1, item2) => item1.name.localeCompare(item2.name));
         return (
-          <Grid fluid>
-            {item.sources &&
-              item.sources.map(source => (
-                <Grid.Row key={source.name}>
-                  <Grid.Col xs={12} sm={4}>
-                    <span>
-                      <Tooltip tooltip={dictionary[source.source_type]}>
-                        <Icon type={typeIcon.type} name={typeIcon.name} />
-                      </Tooltip>
-                      &nbsp; {source.name}
-                    </span>
-                  </Grid.Col>
-                </Grid.Row>
-              ))}
-          </Grid>
+          <List isPlain>
+            {item?.sources?.map(source => (
+              <ListItem key={source.name}>
+                <span>
+                  <Tooltip tooltip={dictionary[source.source_type]}>
+                    <Icon type={typeIcon.type} name={typeIcon.name} />
+                  </Tooltip>
+                </span>
+                &nbsp; {source.name}
+              </ListItem>
+            ))}
+          </List>
         );
       default:
         return null;

diff --git a/src/components/credentials/credentials.js b/src/components/credentials/credentials.js
@@ -13,11 +13,12 @@ import {
   EmptyStateIcon,
   EmptyStatePrimary,
   EmptyStateVariant,
+  List,
   Title,
   TitleSizes
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
-import { Button as ButtonPf3, DropdownButton, Form, Grid, ListView, MenuItem } from 'patternfly-react';
+import { Button as ButtonPf3, DropdownButton, Form, ListView, MenuItem } from 'patternfly-react';
 import { Modal, ModalVariant } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import helpers from '../../common/helpers';
@@ -116,7 +117,7 @@ class Credentials extends React.Component {
     });
 
     const body = (
-      <Grid.Col sm={12}>
+      <List isPlain>
         <Form.FormControl
           className="quipucords-form-control"
           componentClass="textarea"
@@ -125,7 +126,7 @@ class Credentials extends React.Component {
           rows={viewOptions.selectedItems.length}
           value={credentialsList}
         />
-      </Grid.Col>
+      </List>
     );
 
     const onConfirm = () => this.doDeleteCredentials(viewOptions.selectedItems);

diff --git a/src/components/scanHostList/__tests__/__snapshots__/scanHostList.test.js.snap b/src/components/scanHostList/__tests__/__snapshots__/scanHostList.test.js.snap
@@ -48,10 +48,10 @@ exports[`ScanHostList Component should render a non-connected component: non-con
 <div
   class="quipucords-infinite-results"
 >
-  <div
-    class="quipucords-infinite-list container-fluid"
+  <ul
+    class="pf-c-list pf-m-plain"
   >
     {"credentialName":"dolor","jobType":"connection","name":"lorem","sourceId":15,"sourceName":"lorem source"}{"credentialName":"set","jobType":"inspection","name":"ipsum","sourceId":16,"sourceName":"ipsum source"}
-  </div>
+  </ul>
 </div>
 `;
diff --git a/src/components/scanHostList/scanHostList.js b/src/components/scanHostList/scanHostList.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertVariant, EmptyState, EmptyStateVariant, Spinner } from '@patternfly/react-core';
-import { Grid } from 'patternfly-react';
+import { Alert, AlertVariant, EmptyState, EmptyStateVariant, List, Spinner } from '@patternfly/react-core';
 import { connect, reduxActions, reduxSelectors } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { apiTypes } from '../../constants/apiConstants';
@@ -92,9 +91,9 @@ class ScanHostList extends React.Component {
 
     return (
       <div className="quipucords-infinite-results">
-        <Grid fluid onScroll={this.onScrollList} className="quipucords-infinite-list">
-          {hostsList.map(host => children({ host }))}
-        </Grid>
+        <List isPlain onScroll={this.onScrollList}>
+          {hostsList?.map(host => children({ host }))}
+        </List>
       </div>
     );
   }

diff --git a/src/components/scans/__tests__/__snapshots__/scanSourceList.test.js.snap b/src/components/scans/__tests__/__snapshots__/scanSourceList.test.js.snap
@@ -1,114 +1,96 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ScanSourceList Component should handle multiple status messages: connect status 1`] = `
-<Grid
-  bsClass="container"
-  componentClass="div"
-  fluid={true}
+<List
+  isPlain={true}
 >
-  <Row
-    bsClass="row"
-    className="fadein"
-    componentClass="div"
+  <ListItem
     key="1"
   >
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={3}
-      xs={4}
+    <List
+      isPlain={true}
     >
-      <Icon
-        name=""
-        type="pf"
-      />
-        
-      test
-    </Col>
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={9}
-      xs={8}
-    >
-      Connection Scan: ipsum
-    </Col>
-  </Row>
-</Grid>
+      <ListItem
+        icon={
+          <Icon
+            name=""
+            type="pf"
+          />
+        }
+        key="test"
+      >
+        test
+      </ListItem>
+      <ListItem
+        key="desc-test"
+      >
+        Connection Scan: ipsum
+      </ListItem>
+    </List>
+  </ListItem>
+</List>
 `;
 
 exports[`ScanSourceList Component should handle multiple status messages: fallback status 1`] = `
-<Grid
-  bsClass="container"
-  componentClass="div"
-  fluid={true}
+<List
+  isPlain={true}
 >
-  <Row
-    bsClass="row"
-    className="fadein"
-    componentClass="div"
+  <ListItem
     key="1"
   >
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={3}
-      xs={4}
-    >
-      <Icon
-        name=""
-        type="pf"
-      />
-        
-      test
-    </Col>
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={9}
-      xs={8}
+    <List
+      isPlain={true}
     >
-      Connection Scan: ipsum
-    </Col>
-  </Row>
-</Grid>
+      <ListItem
+        icon={
+          <Icon
+            name=""
+            type="pf"
+          />
+        }
+        key="test"
+      >
+        test
+      </ListItem>
+      <ListItem
+        key="desc-test"
+      >
+        Connection Scan: ipsum
+      </ListItem>
+    </List>
+  </ListItem>
+</List>
 `;
 
 exports[`ScanSourceList Component should handle multiple status messages: inspect status 1`] = `
-<Grid
-  bsClass="container"
-  componentClass="div"
-  fluid={true}
+<List
+  isPlain={true}
 >
-  <Row
-    bsClass="row"
-    className="fadein"
-    componentClass="div"
+  <ListItem
     key="1"
   >
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={3}
-      xs={4}
+    <List
+      isPlain={true}
     >
-      <Icon
-        name=""
-        type="pf"
-      />
-        
-      test
-    </Col>
-    <Col
-      bsClass="col"
-      componentClass="div"
-      md={9}
-      xs={8}
-    >
-      Inspection Scan: sit
-    </Col>
-  </Row>
-</Grid>
+      <ListItem
+        icon={
+          <Icon
+            name=""
+            type="pf"
+          />
+        }
+        key="test"
+      >
+        test
+      </ListItem>
+      <ListItem
+        key="desc-test"
+      >
+        Inspection Scan: sit
+      </ListItem>
+    </List>
+  </ListItem>
+</List>
 `;
 
 exports[`ScanSourceList Component should render a connected component: connected 1`] = `
@@ -147,26 +129,34 @@ exports[`ScanSourceList Component should render a non-connected component pendin
 `;
 
 exports[`ScanSourceList Component should render a non-connected component: non-connected 1`] = `
-<div
-  class="container-fluid"
+<ul
+  class="pf-c-list pf-m-plain"
 >
-  <div
-    class="fadein row"
+  <li
+    class=""
   >
-    <div
-      class="col-md-3 col-xs-4"
-    >
-      <span
-        aria-hidden="true"
-        class="pficon pficon-"
-      />
-        test
-    </div>
-    <div
-      class="col-md-9 col-xs-8"
+    <ul
+      class="pf-c-list pf-m-plain"
     >
-      Connection Scan: ipsum
-    </div>
-  </div>
-</div>
+      <li
+        class="pf-c-list__item"
+      >
+        <span
+          class="pf-c-list__item-icon"
+        >
+          <span
+            aria-hidden="true"
+            class="pficon pficon-"
+          />
+        </span>
+        test
+      </li>
+      <li
+        class=""
+      >
+        Connection Scan: ipsum
+      </li>
+    </ul>
+  </li>
+</ul>
 `;
diff --git a/src/components/scans/scanSourceList.js b/src/components/scans/scanSourceList.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertVariant, EmptyState, EmptyStateVariant, Spinner } from '@patternfly/react-core';
-import { Grid, Icon } from 'patternfly-react';
+import { Alert, AlertVariant, EmptyState, EmptyStateVariant, List, ListItem, Spinner } from '@patternfly/react-core';
+import { Icon } from 'patternfly-react';
 import { connect, reduxActions, reduxSelectors } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { translate } from '../i18n/i18n';
@@ -50,19 +50,18 @@ class ScanSourceList extends React.Component {
     }
 
     return (
-      <Grid fluid>
-        {scanJobList.map(item => (
-          <Grid.Row className="fadein" key={item.id}>
-            <Grid.Col xs={4} md={3}>
-              <Icon {...helpers.sourceTypeIcon(item.sourceType)} />
-              &nbsp; {item.name}
-            </Grid.Col>
-            <Grid.Col xs={8} md={9}>
-              {ScanSourceList.setSourceStatus(item)}
-            </Grid.Col>
-          </Grid.Row>
+      <List isPlain>
+        {scanJobList?.map(item => (
+          <ListItem key={item.id}>
+            <List isPlain>
+              <ListItem icon={<Icon {...helpers.sourceTypeIcon(item.sourceType)} />} key={item.name}>
+                {item.name}
+              </ListItem>
+              <ListItem key={`desc-${item.name}`}>{ScanSourceList.setSourceStatus(item)}</ListItem>
+            </List>
+          </ListItem>
         ))}
-      </Grid>
+      </List>
     );
   }
 }