(CDPE-6560) Fixes for release (#652)

* (CDPE-6560) Update publish github action

* (CDPE-6560) Add npm auth token to publish github action

* (CDPE-6560) Move react-layouts dependency from artifactory to npm registry

* (MAINT) Fix CHANGELOG version for react-components

* (MAINT) Update deploy and test github actions.

Remove 40 minute sleep timer for the gh page deploy action.

* (MAINT) Fix import casing

* (CDPE-6560) Update publish action .npmrc content

Author: sean-mckenna

.github/workflows/deploy.yml

@@ -3,42 +3,40 @@ name: GitHub Pages
 on:
   push:
     branches: [main]
+  workflow_dispatch:
 
 jobs:
   test:
-
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: 12.4.0
-    - run: npm install
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 12.4.0
+      - run: npm install
+      - run: npm run build --if-present
+      - run: npm test
 
   deploy:
-
     needs: test
 
     runs-on: ubuntu-latest
 
     steps:
-    - name: sleep
-      uses: jakejarvis/[email protected]
-      with:
-        time: '40m'
-    - name: Checkout
-      uses: actions/checkout@v2
-    - name: Set Node version
-      uses: actions/setup-node@v1
-      with:
-        node-version: 12.4.0
-    - name: Install
-      run: (cd packages/design-system-website && npm install && npm run styleguide:build)
-    - name: Deploy to GitHub Pages
-      uses: JamesIves/github-pages-deploy-action@v4
-      with:
-        branch: gh-pages
-        folder: packages/design-system-website/dist
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Set Node version
+        uses: actions/setup-node@v4
+        with:
+          node-version: 12.4.0
+      - name: Install
+        run: |
+          cd packages/design-system-website
+          npm install
+          npm run styleguide:build
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          branch: gh-pages
+          folder: packages/design-system-website/dist

.github/workflows/publish.yml

@@ -18,16 +18,14 @@ jobs:
       - run: npm run build --if-present
       - run: npm test
 
-  deploy:
+  publish:
     needs: test
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Set Node version
         uses: actions/setup-node@v4
-        with:
-          node-version: 12.4.0
       - name: Install all package dependencies
         run: npm install
       - name: Publish packages

.github/workflows/test.yml

@@ -4,18 +4,17 @@ on: [pull_request]
 
 jobs:
   test:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [12.4.0]
 
     steps:
-    - uses: actions/checkout@v2
-    - uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm install
+      - run: npm run build --if-present
+      - run: npm test

CHANGELOG.md

@@ -2,7 +2,7 @@
 
 - [Table] Bug fixing table loader width on selectable tables (by [@Lukeaber](https://github.com/Lukeaber) in [#636](https://github.com/puppetlabs/design-system/pull/636))
 
-## react-components 5.34.9 (2022-07-28)
+## react-components 5.34.0 (2022-07-28)
 
 - [Menu] Adding Detail, Menu, Menu.Search, and Tag.Search components (by [@krable55](https://github.com/krable55) in [#621](https://github.com/puppetlabs/design-system/pull/621))
 

CONTRIBUTING.md

@@ -55,8 +55,8 @@ Run `npm test` in the top folder to test all packages, or `npm test` in the desi
 - Tense: Use the imperative present tense (e.g. "Add feature", not "Added feature") to describe what changed from the consumer's perspective in the commit summary.
 
 | <img src="https://imgs.xkcd.com/comics/git_commit.png" alt="xkcd comic about commit messages"/> |
-| ------------- |
-| <p align="center">Don't do this</p> |
+| ----------------------------------------------------------------------------------------------- |
+| <p align="center">Don't do this</p>                                                             |
 
 See more guidelines for contributors and maintainers in the [Principles, Patterns, and Guidelines](principles-patterns-guidelines.md) doc.
 
@@ -65,17 +65,16 @@ See more guidelines for contributors and maintainers in the [Principles, Pattern
 Once you have made a change and verified that it works locally including in the Styleguidist website, put up a PR. The author should own seeking review and merging/publishing. Publishing packages to npm is automated with Relay when a PR is merged to `main` or `releases/alpha` if Lerna detects a new version in a package's `package.json` that doesn't yet exist on npm.
 
 1. **Branch**: Create a PR from your branch. Note that we usually push the branch directly to this repository rather than a fork.
-    - Target the `main` branch (the default branch) if the change should be published upon merge.
-    - Target the `releases/alpha` branch if it includes a breaking change.
-    - Target a feature branch if the change shouldn't be released yet. For example, a "feature" or "integration" branch can be used if you want to batch up multiple changes into a single release, which would then need to be followed up with another PR from that branch to `main` for a release.
+   - Target the `main` branch (the default branch) if the change should be published upon merge.
+   - Target the `releases/alpha` branch if it includes a breaking change.
+   - Target a feature branch if the change shouldn't be released yet. For example, a "feature" or "integration" branch can be used if you want to batch up multiple changes into a single release, which would then need to be followed up with another PR from that branch to `main` for a release.
 2. **Changelog**: Add a line about your change to the package's CHANGELOG.md.
-    - Add a heading with the release date. Note that you may use "Unreleased" if it's not going to be released yet.
-    - Add context and be specific about the change by prefixing the change with the component affected and referencing props by name.
+   - Add a heading with the release date. Note that you may use "Unreleased" if it's not going to be released yet.
+   - Add context and be specific about the change by prefixing the change with the component affected and referencing props by name.
 3. **Version**: Update the version to be published, following [semver](https://semver.org/) for patch, minor, and major versions. Note that alpha versions also follow semver, in the form `6.0.0-alpha.3`.
-    - Increment the version in the appropriate `package.json` files, e.g. [packages/react-components/package.json](packages/react-components/package.json).
-    - Also increment the version in the corresponding `package-lock.json` files. When updating a single package, this is most easily done by simply manually incrementing the `version` field in the `package-lock.json` file to match, but can also be done by running `npm install`, though you may have to run `git clean -dfX` first to force them to update.
-    - Note: Other packages in this project that depend on the incremented package may also need to be udpated to point to the new version, otherwise, you could end up with multiple versions due to the use of lockfiles.
+   - Increment the version in the appropriate `package.json` files, e.g. [packages/react-components/package.json](packages/react-components/package.json).
+   - Also increment the version in the corresponding `package-lock.json` files. When updating a single package, this is most easily done by simply manually incrementing the `version` field in the `package-lock.json` file to match, but can also be done by running `npm install`, though you may have to run `git clean -dfX` first to force them to update.
+   - Note: Other packages in this project that depend on the incremented package may also need to be udpated to point to the new version, otherwise, you could end up with multiple versions due to the use of lockfiles.
 4. **Review**: Get a +1 on the PR. Feel free to ping people to find a reviewer. The [design-system-codeowners](https://github.com/orgs/puppetlabs/teams/design-system-codeowners/members) team should be able to help.
-5. **Merge**: Merge the PR. Merging to `main` or `releases/alpha` will trigger a Relay workflow that runs the `npm run release` command.
-6. **Notification**: Wait for a successful notification in the #alerts-design-system Slack channel, which could take a half hour or so.
-7. **Verify**: Verify the new version got published, e.g. by checking [https://www.npmjs.com/package/@puppet/react-components](https://www.npmjs.com/package/@puppet/react-components).
+5. **Merge**: Merge the PR. Merging to `main` or `releases/alpha` will trigger a github workflow that runs the `npm run publish` command.
+6. **Verify**: Verify the new version got published, e.g. by checking [https://www.npmjs.com/package/@puppet/react-components](https://www.npmjs.com/package/@puppet/react-components).

package.json

@@ -9,7 +9,7 @@
     "test": "lerna run lint && lerna run test",
     "start": "cd packages/design-system-website && npm start",
     "styleguide:build": "cd packages/design-system-website && npm run styleguide:build",
-    "release": "lerna publish --yes from-package",
+    "publish": "lerna publish --yes from-package",
     "upgrade": "npx npm-check-updates --upgrade && lerna run upgrade"
   },
   "devDependencies": {

packages/react-components/package-lock.json

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Button from '../button/Button';
+import Button from '../button';
 import TooltipHoverArea from '../tooltips/TooltipHoverArea';
 import OptionMenuList from '../../internal/option-menu-list';
 import { anchorOrientation } from '../../helpers/customPropTypes';

packages/react-components/source/react/library/button-select/ButtonSelect.js

@@ -66,24 +66,24 @@ const closeOnSelect = opt => {
 
 ## Managing Menu Items
 
-#### Menu.Item
+### Menu.Item
 
 To improve accessibility and event handling, the `Menu` component provides the `Menu.Item` [HOC](https://reactjs.org/docs/higher-order-components.html) for managing its internal focusable elements and adding common event handlers. To use, wrap any component that accepts an `innerRef` prop with the `Menu.Item` function.
 
-#### Focus
+### Focus
 
 `Menu.Item` uses the 'roving focus' pattern and is meant to be used for simple menu navigation. The tab index will be tracked automatically according to its x/y location on the page. For more complex menus, it's recommended you add your own focus management.
 
-#### Controlled vs Uncontrolled
+### Controlled vs Uncontrolled
 
 `Menu.Item` will add basic open and close handlers, allowing for a simple uncontrolled menu. `onKeydown` events for the space & enter key will be added to match the onClick event provided to the menu item component.
 
 _To control the menu while using components wrapped in the `Menu.Item` HOC, pass a boolean value to the `open` prop. Setting `closeOnSelect` to false will keep the menu open after selections are made_
 
 ```jsx
 import Heading from '../heading';
-import Detail from '../Detail';
-import Button from '../Button';
+import Detail from '../detail';
+import Button from '../button';
 
 const [option, setOption] = React.useState();
 const [openControlledMenu, setControlledMenu] = React.useState(false);
@@ -153,9 +153,8 @@ _\*Note: This is meant ot be a controlled component. The `Menu.SearchMenu` compo
 
 ```jsx
 import Heading from '../heading';
-import Avatar from '../Avatar';
-
-import Detail from '../Detail';
+import Avatar from '../avatar';
+import Detail from '../detail';
 const [selected, setSelected] = React.useState([]);
 const [open, setMenu] = React.useState(false);
 const exampleStyle = { margin: 0, padding: '4px' };
@@ -251,15 +250,14 @@ const options = [
 </div>;
 ```
 
-#### Columns
+### Columns
 
 For a more compact view, columns can be set to true, for two columns, or a number for more than two columns. It's not recommended to display more than 3 columns in a menu.
 
 ```jsx
 import Heading from '../heading';
-import Avatar from '../Avatar';
-
-import Detail from '../Detail';
+import Avatar from '../avatar';
+import Detail from '../detail';
 const [selected, setSelected] = React.useState([]);
 const [open, setMenu] = React.useState(false);
 const exampleStyle = { margin: 0, padding: '4px' };
@@ -362,9 +360,8 @@ The default search function searches for a match against an Item's label and gro
 
 ```jsx
 import Heading from '../heading';
-import Avatar from '../Avatar';
-
-import Detail from '../Detail';
+import Avatar from '../avatar';
+import Detail from '../detail';
 const [selected, setSelected] = React.useState([]);
 const [open, setMenu] = React.useState(false);
 const exampleStyle = { margin: 0, padding: '4px' };

packages/react-components/source/react/library/menu/Menu.md

@@ -67,7 +67,7 @@ Creates a list of tags from a menu of searchable / filterable options. Menu opti
 
 ```jsx
 import React from 'react';
-import Button from '../Button';
+import Button from '../button';
 
 const [selected, onApply] = React.useState([]);
 

packages/react-components/source/react/library/tag/Tag.md

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { expect } from 'chai';
 import React from 'react';
 
-import Button from '../../source/react/library/button/Button';
+import Button from '../../source/react/library/button';
 
 describe('<Button />', () => {
   jsdom({ skipWindowCheck: true });

packages/react-components/test/buttons/button.js

@@ -5,8 +5,8 @@ import sinon from 'sinon';
 
 import Form from '../../source/react/library/form/Form';
 import { isEmpty } from '../../source/react/library/form/internal/methods';
-import Button from '../../source/react/library/button/Button';
-import Alert from '../../source/react/library/alert/Alert';
+import Button from '../../source/react/library/button';
+import Alert from '../../source/react/library/alert';
 
 describe('<Form />', () => {
   it('should propagate user provided className', () => {

packages/react-components/test/form/Form.js

@@ -3,8 +3,8 @@ import { shallow, mount } from 'enzyme';
 import { expect } from 'chai';
 import React from 'react';
 import sinon from 'sinon';
-import Menu from '../../source/react/library/menu/Menu';
-import Button from '../../source/react/library/button/Button';
+import Menu from '../../source/react/library/menu';
+import Button from '../../source/react/library/button';
 import MenuContext from '../../source/react/internal/popup-menus/menu-context';
 import { RovingFocusContext } from '../../source/react/helpers/useRovingFocus';
 

packages/react-components/test/menu/menu.js

@@ -73,7 +73,7 @@
     "query-string": "^6.13.1",
     "ramda": "^0.27.1",
     "raw-loader": "^4.0.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.1",