fix(build): Support running the test suite under Windows (#1255) [ci …

…skip] * Check out and create new files with Unix style LF line endings By default, files will be checked out and created with CRLF line endings under Windows. This is rejected by the repository's ESLint rules. * Fix react-tokens test utilities for Windows * Apply correct line endings to expected codemod outputs during testing * Generate correct style sheet import statements during react-core build * Fix formatting of Patternfly 3 packages * bump yarn.lock
patternfly · Mar 11, 2019 · 851756e · 851756e
1 parent d908f7a
commit 851756e
Show file tree

Hide file tree

Showing 17 changed files with 167 additions and 130 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,6 @@
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/package.json b/package.json
@@ -77,7 +77,7 @@
     "mutation-observer": "^1.0.3",
     "node-sass": "^4.8.3",
     "plop": "^2.0.0",
-    "prettier": "^1.14.2",
+    "prettier": "^1.16.1",
     "prettier-eslint": "^8.8.1",
     "prop-types": "^15.6.1",
     "react": "^16.3.0",

diff --git a/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js b/...y-3/patternfly-react-extensions/src/components/CatalogTileView/CatalogTileViewCategory.js
@@ -93,19 +93,18 @@ class CatalogTileViewCategory extends React.Component {
       <div className={classes} {...props} ref={this.handleRef}>
         <div className="catalog-tile-view-pf-category-header">
           <span className="catalog-tile-view-pf-category-header-title">{title}</span>
-          {!viewAll &&
-            numShown < totalItems && (
-              <span className="pull-right">
-                <Button
-                  bsStyle="link"
-                  className="catalog-tile-view-pf-category-view-all pull-right"
-                  style={{ marginRight: rightSpacerWidth }}
-                  onClick={onViewAll}
-                >
-                  {`${viewAllText} (${totalItems})`}
-                </Button>
-              </span>
-            )}
+          {!viewAll && numShown < totalItems && (
+            <span className="pull-right">
+              <Button
+                bsStyle="link"
+                className="catalog-tile-view-pf-category-view-all pull-right"
+                style={{ marginRight: rightSpacerWidth }}
+                onClick={onViewAll}
+              >
+                {`${viewAllText} (${totalItems})`}
+              </Button>
+            </span>
+          )}
         </div>
         <div className="catalog-tile-view-pf-category-body">
           {catalogTiles}

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js b/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js
@@ -277,28 +277,27 @@ export class MockFilterExample extends React.Component {
             {this.renderInput()}
           </Filter>
         </div>
-        {activeFilters &&
-          activeFilters.length > 0 && (
-            <Toolbar.Results>
-              <Filter.ActiveLabel>Active Filters:</Filter.ActiveLabel>
-              <Filter.List>
-                {activeFilters.map((item, index) => (
-                  <Filter.Item key={index} onRemove={this.removeFilter} filterData={item}>
-                    {item.label}
-                  </Filter.Item>
-                ))}
-              </Filter.List>
-              <a
-                href="#"
-                onClick={e => {
-                  e.preventDefault();
-                  this.clearFilters();
-                }}
-              >
-                Clear All Filters
-              </a>
-            </Toolbar.Results>
-          )}
+        {activeFilters && activeFilters.length > 0 && (
+          <Toolbar.Results>
+            <Filter.ActiveLabel>Active Filters:</Filter.ActiveLabel>
+            <Filter.List>
+              {activeFilters.map((item, index) => (
+                <Filter.Item key={index} onRemove={this.removeFilter} filterData={item}>
+                  {item.label}
+                </Filter.Item>
+              ))}
+            </Filter.List>
+            <a
+              href="#"
+              onClick={e => {
+                e.preventDefault();
+                this.clearFilters();
+              }}
+            >
+              Clear All Filters
+            </a>
+          </Toolbar.Results>
+        )}
       </div>
     );
   }

diff --git a/...y-react/src/components/LoginPage/components/LoginCardComponents/LoginCardSocialColumns.js b/...y-react/src/components/LoginPage/components/LoginCardComponents/LoginCardSocialColumns.js
@@ -60,13 +60,12 @@ class LoginCardSocialColumns extends React.Component {
       return null;
     }
     const { expend, width } = this.state;
-    const expendButton = width > 768 &&
-      links.length > numberOfButtonsToShow && (
-        <Button bsStyle="link" bsClass="btn btn-link login-pf-social-toggle" onClick={this.toggleExpend}>
-          {expend ? 'Less' : 'More'} &nbsp;
-          <Icon name={`angle-${expend ? 'up' : 'down'}`} />
-        </Button>
-      );
+    const expendButton = width > 768 && links.length > numberOfButtonsToShow && (
+      <Button bsStyle="link" bsClass="btn btn-link login-pf-social-toggle" onClick={this.toggleExpend}>
+        {expend ? 'Less' : 'More'} &nbsp;
+        <Icon name={`angle-${expend ? 'up' : 'down'}`} />
+      </Button>
+    );
 
     const doubleColumn = links.length > 4 ? 'login-pf-social-double-col' : '';
     const moreItems = expend || width < 768 ? this.getHiddenListItems() : null;

diff --git a/...patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js b/...patternfly-3/patternfly-react/src/components/Table/__mocks__/mockClientPaginationTable.js
@@ -295,8 +295,8 @@ export class MockClientPaginationTable extends React.Component {
 
     if (checked) {
       const updatedSelections = [...new Set([...currentRows.map(r => r.id), ...selectedRows])];
-      const updatedRows = rows.map(
-        r => (updatedSelections.indexOf(r.id) > -1 ? MockClientPaginationTable.selectRow(r) : r)
+      const updatedRows = rows.map(r =>
+        updatedSelections.indexOf(r.id) > -1 ? MockClientPaginationTable.selectRow(r) : r
       );
       this.setState({
         // important: you must update rows to force a re-render and trigger onRow hook
@@ -307,8 +307,8 @@ export class MockClientPaginationTable extends React.Component {
     } else {
       const ids = currentRows.map(r => r.id);
       const updatedSelections = selectedRows.filter(r => !(ids.indexOf(r) > -1));
-      const updatedRows = rows.map(
-        r => (updatedSelections.indexOf(r.id) > -1 ? r : MockClientPaginationTable.deselectRow(r))
+      const updatedRows = rows.map(r =>
+        updatedSelections.indexOf(r.id) > -1 ? r : MockClientPaginationTable.deselectRow(r)
       );
       this.setState({
         rows: updatedRows,

diff --git a/...ages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js b/...ages/patternfly-3/patternfly-react/src/components/Toolbar/__mocks__/mockToolbarExample.js
@@ -318,30 +318,29 @@ export class MockToolbarExample extends React.Component {
               <h5>40 Results</h5>
             </Toolbar.Results>
           ))}
-        {activeFilters &&
-          activeFilters.length > 0 && (
-            <Toolbar.Results>
-              <h5>40 Results</h5>
-              <Filter.ActiveLabel>Active Filters:</Filter.ActiveLabel>
-              <Filter.List>
-                {activeFilters.map((item, index) => (
-                  <Filter.Item key={index} onRemove={this.removeFilter} filterData={item}>
-                    label=
-                    {item.label}
-                  </Filter.Item>
-                ))}
-              </Filter.List>
-              <a
-                href="#"
-                onClick={e => {
-                  e.preventDefault();
-                  this.clearFilters();
-                }}
-              >
-                Clear All Filters
-              </a>
-            </Toolbar.Results>
-          )}
+        {activeFilters && activeFilters.length > 0 && (
+          <Toolbar.Results>
+            <h5>40 Results</h5>
+            <Filter.ActiveLabel>Active Filters:</Filter.ActiveLabel>
+            <Filter.List>
+              {activeFilters.map((item, index) => (
+                <Filter.Item key={index} onRemove={this.removeFilter} filterData={item}>
+                  label=
+                  {item.label}
+                </Filter.Item>
+              ))}
+            </Filter.List>
+            <a
+              href="#"
+              onClick={e => {
+                e.preventDefault();
+                this.clearFilters();
+              }}
+            >
+              Clear All Filters
+            </a>
+          </Toolbar.Results>
+        )}
       </Toolbar>
     );
   }

diff --git a/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItemHelper.js b/packages/patternfly-3/patternfly-react/src/components/VerticalNav/VerticalNavItemHelper.js
@@ -282,25 +282,24 @@ class BaseVerticalNavItemHelper extends React.Component {
           <span className="list-group-item-value">{title}</span>
           {showBadges && childBadgeComponents && <div className="badge-container-pf">{childBadgeComponents}</div>}
         </a>
-        {childItemComponents &&
-          childItemComponents.length > 0 && (
-            <div className={`nav-pf-${nextDepth}-nav`}>
-              <div className="nav-item-pf-header">
-                {(pinnableMenus || isMobile) && (
-                  <a
-                    className={classNames(`${nextDepth}-collapse-toggle-pf`, {
-                      collapsed: onPinnedPath
-                    })}
-                    onClick={this.pinNextDepth}
-                  />
-                )}
-                <span>{title}</span>
-              </div>
-              <NavContextProvider {...this.props} idPath={this.idPath()} item={navItem}>
-                <ListGroup componentClass="ul">{childItemComponents}</ListGroup>
-              </NavContextProvider>
+        {childItemComponents && childItemComponents.length > 0 && (
+          <div className={`nav-pf-${nextDepth}-nav`}>
+            <div className="nav-item-pf-header">
+              {(pinnableMenus || isMobile) && (
+                <a
+                  className={classNames(`${nextDepth}-collapse-toggle-pf`, {
+                    collapsed: onPinnedPath
+                  })}
+                  onClick={this.pinNextDepth}
+                />
+              )}
+              <span>{title}</span>
             </div>
-          )}
+            <NavContextProvider {...this.props} idPath={this.idPath()} item={navItem}>
+              <ListGroup componentClass="ul">{childItemComponents}</ListGroup>
+            </NavContextProvider>
+          </div>
+        )}
       </ListGroupItem>
     );
 

diff --git a/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/WizardExample.js b/packages/patternfly-3/patternfly-react/src/components/Wizard/Stories/WizardExample.js
@@ -60,20 +60,18 @@ export class WizardExample extends MockWizardBase {
                 <Icon type="fa" name="angle-right" />
               </Button>
             )}
-            {activeStepIndex === 2 &&
-              activeSubStepIndex === 0 && (
-                <Button bsStyle="primary" onClick={this.onNextButtonClick}>
-                  Deploy
-                  <Icon type="fa" name="angle-right" />
-                </Button>
-              )}
-            {activeStepIndex === 2 &&
-              activeSubStepIndex === 1 && (
-                <Button bsStyle="primary" onClick={this.close}>
-                  Close
-                  <Icon type="fa" name="angle-right" />
-                </Button>
-              )}
+            {activeStepIndex === 2 && activeSubStepIndex === 0 && (
+              <Button bsStyle="primary" onClick={this.onNextButtonClick}>
+                Deploy
+                <Icon type="fa" name="angle-right" />
+              </Button>
+            )}
+            {activeStepIndex === 2 && activeSubStepIndex === 1 && (
+              <Button bsStyle="primary" onClick={this.close}>
+                Close
+                <Icon type="fa" name="angle-right" />
+              </Button>
+            )}
           </Wizard.Footer>
         </Wizard>
       </div>

diff --git a/packages/patternfly-3/react-console/src/AccessConsoles/AccessConsoles.js b/packages/patternfly-3/react-console/src/AccessConsoles/AccessConsoles.js
@@ -59,14 +59,12 @@ class AccessConsoles extends React.Component {
 
   getConsoleForType(type) {
     // To keep connection, render all consoles but hide those unused
-    return React.Children.map(
-      this.props.children,
-      child =>
-        this.state.keptConnection[getChildTypeName(child)] ? (
-          <div key={getChildTypeName(child)} hidden={!isChildOfType(child, type)}>
-            {child}
-          </div>
-        ) : null
+    return React.Children.map(this.props.children, child =>
+      this.state.keptConnection[getChildTypeName(child)] ? (
+        <div key={getChildTypeName(child)} hidden={!isChildOfType(child, type)}>
+          {child}
+        </div>
+      ) : null
     );
   }
 
@@ -105,17 +103,16 @@ class AccessConsoles extends React.Component {
                   )}
                 </Dropdown.Menu>
               </Dropdown>
-              {this.state.type !== NONE_TYPE &&
-                this.state.type !== DESKTOP_VIEWER_CONSOLE_TYPE && (
-                  <Checkbox
-                    className="console-selector-pf-disconnect-switch"
-                    inline
-                    defaultChecked={this.props.disconnectByChange}
-                    onChange={e => this.onChangeDisconnectBySwitchClick(e.target)}
-                  >
-                    {this.props.textDisconnectByChange}
-                  </Checkbox>
-                )}
+              {this.state.type !== NONE_TYPE && this.state.type !== DESKTOP_VIEWER_CONSOLE_TYPE && (
+                <Checkbox
+                  className="console-selector-pf-disconnect-switch"
+                  inline
+                  defaultChecked={this.props.disconnectByChange}
+                  onChange={e => this.onChangeDisconnectBySwitchClick(e.target)}
+                >
+                  {this.props.textDisconnectByChange}
+                </Checkbox>
+              )}
             </Col>
           </FormGroup>
         </Form>

diff --git a/packages/patternfly-4/react-styles/src/build/util.js b/packages/patternfly-4/react-styles/src/build/util.js
@@ -40,7 +40,7 @@ export function writeCSSJSFile(rootPath, originalPath, destinationPath, contents
 
 export function getRelativeImportPath(from, to) {
   const parsedTo = path.parse(to);
-  const newImportPath = path.normalize(path.join(relative(from, parsedTo.dir), parsedTo.base).replace(/\\/g, ''));
+  const newImportPath = path.normalize(path.join(relative(from, parsedTo.dir), parsedTo.base));
   return newImportPath.startsWith('.') ? newImportPath : `./${newImportPath}`;
 }
 

diff --git a/packages/patternfly-4/react-tokens/build/generateTokens.test.js b/packages/patternfly-4/react-tokens/build/generateTokens.test.js
@@ -55,7 +55,7 @@ test('keeps variable reference if computing fails', () => {
 function getOutputs() {
   return outputFileSyncMock.mock.calls.reduce((acc, call) => {
     const [filePath, content] = call;
-    const splitPath = filePath.split('/');
+    const splitPath = filePath.split(/[/\\]/);
     const name = splitPath.slice(-2).join('/');
     return {
       ...acc,

diff --git a/packages/react-codemods/transforms/pf3-pf4.button.test.js b/packages/react-codemods/transforms/pf3-pf4.button.test.js
@@ -1,9 +1,29 @@
+import { EOL as SYSTEM_EOL } from 'os';
 import prettier from 'prettier';
 import { defineInlineTest } from 'jscodeshift/dist/testUtils';
 import transform from './pf3-pf4';
 
-const prettierConfig = prettier.resolveConfig.sync(process.cwd());
-const pretty = src => prettier.format(src, { parser: 'babylon', ...prettierConfig });
+/**
+ * Codemod outputs should follow the EOL pattern of the target codebase, not
+ * Patternfly's. Patternfly currently enforces LF as line ending, independent of
+ * the OS building the codebase.
+ *
+ * JSCodeShift produces OS-dependent line endings however, LF for Unix based
+ * systems, and CRLF for Windows based ones. This is also likely what most
+ * projects would like to see the codemod prduce.
+ *
+ * To make sure we both adhere to Patternfly's conventions, and compare the
+ * correct OS-specific line endings during the test cases' assertions, we store
+ * expected values with LF line endings, and convert them into the OS-specific
+ * ones at runtime using prettier.
+ */
+const PRETTIER_EOL = SYSTEM_EOL === '\r\n' ? 'crlf' : 'cr';
+const prettierConfig = {
+  ...prettier.resolveConfig.sync(process.cwd()),
+  parser: 'babel',
+  endOfLine: PRETTIER_EOL
+};
+const pretty = src => prettier.format(src, prettierConfig);
 
 global.console.log = jest.fn();
 

diff --git a/packages/react-codemods/transforms/pf3-pf4.js b/packages/react-codemods/transforms/pf3-pf4.js
@@ -149,7 +149,7 @@ module.exports = (file, api, options) => {
 
     return prettier
       ? prettier.format(transformedSource, {
-          parser: 'babylon',
+          parser: 'babel',
           ...prettier.resolveConfig.sync(process.cwd())
         })
       : transformedSource;