Merge branch 'next' into popper-v2

.gitignore

@@ -1,13 +1,13 @@
-# The best pattern to follow is ignoring editor files in a global .gitignore configuration file.
-# However, in order to prevent issues, editor files are ignored here.
+# It is best to ignoring editor and system files in a local .gitignore configuration file.
+# However, in order to prevent issues, they are ignored here.
+.DS_STORE
 .idea
 .vscode
-
-.DS_STORE
 *.log
 /.eslintcache
 /.nyc_output
 /coverage
+/docs/.env.local
 /docs/.next
 /docs/export
 /examples/**/.cache

README.md

@@ -112,7 +112,7 @@ Yes, it's really all you need to get started as you can see in this live and int
 ## Questions
 
 For _how-to_ questions and other non-issues,
-please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues.
+please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues.
 There is a StackOverflow tag called "material-ui" that you can use to tag your questions.
 
 ## Examples

azure-pipelines.yml

@@ -47,6 +47,15 @@ steps:
  yarn install
  displayName: 'install dependencies'
 
+ - script: |
+ yarn danger ci
+ displayName: 'prepare danger on PRs'
+ condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))
+ env:
+ AZURE_BUILD_ID: $(Build.BuildId)
+ DANGER_COMMAND: 'prepareBundleSizeReport'
+ DANGER_GITHUB_API_TOKEN: $(GITHUB_API_TOKEN)
+
  - script: |
  yarn lerna run --ignore @material-ui/icons --parallel --scope "@material-ui/*" build
  displayName: 'build @material-ui packages'
@@ -135,4 +144,5 @@ steps:
  condition: and(succeeded(), eq(variables['Build.Reason'], 'PullRequest'))
  env:
  AZURE_BUILD_ID: $(Build.BuildId)
+ DANGER_COMMAND: 'reportBundleSize'
  DANGER_GITHUB_API_TOKEN: $(GITHUB_API_TOKEN)

dangerfile.js

@@ -4,6 +4,10 @@ const { danger, markdown } = require('danger');
 const { exec } = require('child_process');
 const { loadComparison } = require('./scripts/sizeSnapshot');
 
+const azureBuildId = process.env.AZURE_BUILD_ID;
+const azureBuildUrl = `https://dev.azure.com/mui-org/Material-UI/_build/results?buildId=${azureBuildId}`;
+const dangerCommand = process.env.DANGER_COMMAND;
+
 const parsedSizeChangeThreshold = 300;
 const gzipSizeChangeThreshold = 100;
 
@@ -30,7 +34,7 @@ const UPSTREAM_REMOTE = 'danger-upstream';
  * scripts exit to avoid adding internal remotes to the local machine. This is
  * not an issue in CI.
  */
-async function cleanup() {
+async function reportBundleSizeCleanup() {
  await git(`remote remove ${UPSTREAM_REMOTE}`);
 }
 
@@ -103,7 +107,13 @@ function sieveResults(results) {
  return { all: results, main, pages };
 }
 
-async function run() {
+function prepareBundleSizeReport() {
+ markdown(
+ `Bundle size will be reported once [Azure build #${azureBuildId}](${azureBuildUrl}) finishes.`,
+ );
+}
+
+async function reportBundleSize() {
  // Use git locally to grab the commit which represents the place
  // where the branches differ
  const upstreamRepo = danger.github.pr.base.repo.full_name;
@@ -116,7 +126,7 @@ async function run() {
  await git(`fetch ${UPSTREAM_REMOTE}`);
  const mergeBaseCommit = await git(`merge-base HEAD ${UPSTREAM_REMOTE}/${upstreamRef}`);
 
- const commitRange = `${mergeBaseCommit}...${danger.github.pr.head.sha}`;
+ const detailedComparisonUrl = `https://mui-dashboard.netlify.app/size-comparison?buildId=${azureBuildId}&baseRef=${danger.github.pr.base.ref}&baseCommit=${mergeBaseCommit}&prNumber=${danger.github.pr.number}`;
 
  const comparison = await loadComparison(mergeBaseCommit, upstreamRef);
 
@@ -134,31 +144,32 @@ async function run() {
  markdown(importantChanges.join('\n'));
  }
 
- const details = `[Details of bundle changes](https://mui-dashboard.netlify.app/size-comparison?buildId=${process.env.AZURE_BUILD_ID}&baseRef=${danger.github.pr.base.ref}&baseCommit=${mergeBaseCommit}&prNumber=${danger.github.pr.number})`;
+ const details = `[Details of bundle changes](${detailedComparisonUrl})`;
 
  markdown(details);
  } else {
- // this can later be removed to reduce PR noise. It is kept for now for debug
- // purposes only. DangerJS will swallow console.logs if it completes successfully
- markdown(`No bundle size changes comparing ${commitRange}`);
+ markdown(`[No bundle size changes](${detailedComparisonUrl})`);
  }
 }
 
-(async () => {
- let exitCode = 0;
- try {
- await run();
- } catch (err) {
- console.error(err);
- exitCode = 1;
- }
-
- try {
- await cleanup();
- } catch (err) {
- console.error(err);
- exitCode = 1;
+async function run() {
+ switch (dangerCommand) {
+  case 'prepareBundleSizeReport':
+  prepareBundleSizeReport();
+  break;
+ case 'reportBundleSize':
+  try {
+  await reportBundleSize();
+ } finally {
+  await reportBundleSizeCleanup();
+  }
+  break;
+ default:
+  throw new TypeError(`Unrecognized danger command '${dangerCommand}'`);
  }
+}
 
- process.exit(exitCode);
-})();
+run().catch((error) => {
+ console.error(error);
+ process.exit(1);
+});

docs/.env

@@ -0,0 +1 @@
+FEEDBACK_URL=https://hgvi836wi8.execute-api.us-east-1.amazonaws.com

docs/next.config.js

@@ -40,6 +40,7 @@ module.exports = {
  LIB_VERSION: JSON.stringify(pkg.version),
  PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'),
  REACT_MODE: JSON.stringify(reactMode),
+ FEEDBACK_URL: JSON.stringify(process.env.FEEDBACK_URL),
  },
  }),
  ]);

docs/package.json

@@ -93,9 +93,9 @@
  "prismjs": "^1.17.1",
  "prop-types": "^15.7.2",
  "raw-loader": "^1.0.0",
- "react": "^16.13.0",
+ "react": "^16.14.0",
  "react-docgen": "^5.0.0-beta.1",
- "react-dom": "^16.13.0",
+ "react-dom": "^16.14.0",
  "react-draggable": "^4.0.3",
  "react-final-form": "^6.3.0",
  "react-is": "^16.13.0",

docs/packages/feedback/README.md

@@ -0,0 +1,108 @@
+# Rating
+
+This Lambda function stores and retrieves page feedback using DynamoDB. It is already deployed in the Material-UI AWS account. Request credentials if you need to update dev for testing, or to deploy a new prod version.
+
+If you wish to deploy your own instance for testing, follow the steps below.
+
+## Prerequisites
+
+Create an AWS profile in ~/.aws/credentials called "claudia" with credentials corresponding to an IAM user with AmazonAPIGatewayAdministrator, AWSLambdaFullAccess and IAMFullAccess policies.
+You can do that with `aws configure --profile claudia`.
+
+Create a table in DynamoDB, with a `string` partition key called `id`, and a sort key called `page`. You can do that from the DynamoDB web console, or using the AWS CLI command line. Here is an example command that will create the `feedback-dev` table with the minimal provisioned throughput:
+
+```bash
+aws dynamodb create-table --profile claudia --region us-east-1 \
+ --attribute-definitions AttributeName=id,AttributeType=S AttributeName=page,AttributeType=S \
+ --key-schema AttributeName=id,KeyType=HASH AttributeName=page,KeyType=RANGE \
+ --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=1 \
+ --query TableDescription.TableArn --output text \
+ --table-name feedback-dev
+```
+
+You will need to repeat this command to create a table for production, for example `feedback-prod`.
+
+For on-demand throughput, replace:
+
+```
+ --provisioned-throughput ReadCapacityUnits=5,WriteCapacityUnits=1 \
+```
+
+with:
+
+```
+ --billing-mode PAY_PER_REQUEST \
+```
+
+The project includes an IAM access policy that will grant the lambda function access to the tables. You can edit the [policies/access-dynamodb.json](policies/access-dynamodb.json) file to change the access permissions. These are only applied on create (`yarn setup`). Alternatively, to avoid inadvetantly pushing changes, use the `--policies` flag with `yarn setup` to refer to a copy of this directory, and exclude it in your `~/.gitignore`.
+
+> ⚠️ You will need to update the "Resource" key in this file with the value returned after creating each table.
+
+## Get started
+
+> ⚠️ When setting up for the first time, you will need to delete the included `claudia.json` file that is specific to the MUI installation. Alternatively, if making changes to the function that you intend to submit back, then to avoid inadvetantly commiting changes to `claudia.json`, use `--config` with each command to create and use a local config file, and exclude this file in your `~/.gitignore`.
+
+To set this up, first [set up the credentials](https://claudiajs.com/tutorials/installing.html#configuring-access-credentials), then:
+
+1. run `yarn install` (from the root workspace) to install the dependencies
+1. Navigate into the directory of this README, e.g. `cd docs/packages/feedback`
+1. run `yarn setup` to create the lambda function on AWS under the default name.
+ This will also ask you for table names for development and production.
+ If you used the above AWS command, they will be `feedback-dev` and `feedback-dev` respectively.
+1. Test the API using the [example requests below](#testing)
+
+For subsequent updates, use the `npm run deploy` command.
+
+## Stage variables
+
+The table name, stored in the API Gateway stage variables, is passed to each request processor in the `request.env` key-value map. Check out [index.js](index.js) to see it in use.
+
+The value is set during the first deployment, using `--configure-table-dev` & `--configure-table-prod`. This works using a post-deploy step (check out the last line of [index.js](index.js) for the actual setup, and [Configuring stage variables using post-deployment steps](https://github.com/claudiajs/claudia-api-builder/blob/master/docs/api.md#configuring-stage-variables-using-post-deployment-steps) for more information about the API).
+
+## The API
+
+- `POST` to `/feedback` - stores a new rating data object
+- `GET` from `/feedback/{id}` - returns all ratings with id `{id}`
+- `GET` from `/rating/average` - returns average ratings for all pages
+
+## Testing
+
+Claudia will print the API URL after it is created (typically something in the format `https://[API ID].execute-api.[REGION].amazonaws.com/<version>`). Replace `<API-URL>` with that value in the examples below:
+
+You can test the API by using `curl` (or using a fancier client like [Postman](https://www.getpostman.com/)). Below are some examples with `curl`.
+
+### Create new feedback
+
+This will create a feedback entry from the data stored in [example.json](example.json). Change the data in the file to create ratings:
+
+```bash
+curl -H "Content-Type: application/json" -X POST --data @example.json <API-URL>/feedback
+```
+
+Add the UUID returned to `example.json` with key `id` to store more feedback under the same id.
+
+### Retrieve feedback
+
+This will get the feedback stored for ID d6890562-3606-4c14-a765-da81919057d1
+
+```bash
+curl <API-URL>/feedback/d6890562-3606-4c14-a765-da81919057d1
+```
+
+### Retrieve average ratings
+
+This will get the average feedback stored for all pages
+
+```bash
+curl <API-URL>/feedback/average
+```
+
+### Testing with the documentation
+
+Create the file `docs/.env.local` containing an environment variable `FEEDBACK_URL` with your API URL without the version. For example:
+
+```sh
+FEEDBACK_URL=https://abcd123ef4.execute-api.us-east-1.amazonaws.com
+```
+
+If already running, restart the local docs site. Feedback should now be posted to your deployment.

docs/packages/feedback/claudia.json

@@ -0,0 +1,11 @@
+{
+ "lambda": {
+ "role": "feedback-executor",
+ "name": "feedback",
+ "region": "us-east-1"
+ },
+ "api": {
+ "id": "hgvi836wi8",
+ "module": "index"
+ }
+}

docs/packages/feedback/example.json

@@ -0,0 +1,7 @@
+{
+ "page": "/components/cards",
+ "version": "5.0.0",
+ "rating": 5,
+ "comment": "Yay!",
+ "language": "en"
+}