Merge branch 'develop' into enhancement/2539-extract-bundlesize.

.github/workflows/e2e-tests-wp-4-7.yml

@@ -54,6 +54,12 @@ jobs:
       - name: Build
         run: npm run build:test
 
+      # E2E tests use a dedicated container, this is just for Composer.
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.x'
+          tools: composer
+
       - name: Get Composer Cache Directory
         id: composer-cache
         run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -65,13 +71,17 @@ jobs:
           restore-keys: ${{ runner.os }}-composer-
 
       - name: Composer Install
-        uses: php-actions/composer@v4
-        with:
-          dev: no
-          php_version: 7.3
+        run: composer install --no-interaction --no-progress --no-dev
 
       - name: Start environment
         run: npm run env:start
 
       - name: Run the tests
         run: npm run test:e2e
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: e2e-screenshots
+          path: tests/e2e/screenshots

.github/workflows/e2e-tests-wp-4-9-gutenberg.yml

@@ -54,6 +54,12 @@ jobs:
       - name: Build
         run: npm run build:test
 
+      # E2E tests use a dedicated container, this is just for Composer.
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.x'
+          tools: composer
+
       - name: Get Composer Cache Directory
         id: composer-cache
         run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -65,13 +71,17 @@ jobs:
           restore-keys: ${{ runner.os }}-composer-
 
       - name: Composer Install
-        uses: php-actions/composer@v4
-        with:
-          dev: no
-          php_version: 7.3
+        run: composer install --no-interaction --no-progress --no-dev
 
       - name: Start environment
         run: npm run env:start
 
       - name: Run the tests
         run: npm run test:e2e
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: e2e-screenshots
+          path: tests/e2e/screenshots

.github/workflows/e2e-tests-wp-latest.yml

@@ -53,6 +53,12 @@ jobs:
       - name: Build
         run: npm run build:test
 
+      # E2E tests use a dedicated container, this is just for Composer.
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.x'
+          tools: composer
+
       - name: Get Composer Cache Directory
         id: composer-cache
         run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -64,13 +70,17 @@ jobs:
           restore-keys: ${{ runner.os }}-composer-
 
       - name: Composer Install
-        uses: php-actions/composer@v4
-        with:
-          dev: no
-          php_version: 7.3
+        run: composer install --no-interaction --no-progress --no-dev
 
       - name: Start environment
         run: npm run env:start
 
       - name: Run the tests
         run: npm run test:e2e
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: e2e-screenshots
+          path: tests/e2e/screenshots

.github/workflows/e2e-tests-wp-nightly.yml

@@ -53,6 +53,12 @@ jobs:
       - name: Build
         run: npm run build:test
 
+      # E2E tests use a dedicated container, this is just for Composer.
+      - uses: shivammathur/setup-php@v2
+        with:
+          php-version: '7.x'
+          tools: composer
+
       - name: Get Composer Cache Directory
         id: composer-cache
         run: echo "::set-output name=dir::$(composer config cache-files-dir)"
@@ -64,13 +70,17 @@ jobs:
           restore-keys: ${{ runner.os }}-composer-
 
       - name: Composer Install
-        uses: php-actions/composer@v4
-        with:
-          dev: no
-          php_version: 7.3
+        run: composer install --no-interaction --no-progress --no-dev
 
       - name: Start environment
         run: npm run env:start
 
       - name: Run the tests
         run: npm run test:e2e
+
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: e2e-screenshots
+          path: tests/e2e/screenshots

.github/workflows/php-tests-wp-latest-multisite-php-7-4.yml

@@ -60,4 +60,4 @@ jobs:
       - name: Set up PHP test data
         run: tests/bin/install-wp-tests.sh ${MYSQL_DATABASE} ${MYSQL_USER} ${MYSQL_PASSWORD} ${DB_HOST}:${DB_PORT} ${WP_VERSION}
       - name: Run Unit Tests
-        run: composer test
+        run: composer test:multisite

.github/workflows/php-tests-wp-latest-php-8-0.yml

@@ -0,0 +1,64 @@
+name: PHP Tests
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  php-tests-wp-latest-php-8-0:
+    name: PHP (PHP 8.0, WordPress Latest)
+    runs-on: ubuntu-latest
+    services:
+      mysql:
+        image: mysql:5.7
+        env:
+          MYSQL_ALLOW_EMPTY_PASSWORD: yes
+        ports:
+          - 3306:3306
+        options: --health-cmd="mysqladmin ping" --health-interval=5s --health-timeout=2s --health-retries=3
+    env:
+      DB_HOST: 127.0.0.1
+      DB_PORT: 3306
+      MYSQL_USER: wordpress
+      MYSQL_PASSWORD: wordpress
+      MYSQL_DATABASE: wordpress_test
+      MYSQL_ROOT_PASSWORD: root
+      WP_VERSION: latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Grant database access
+        env:
+          MYSQL_TCP_PORT: ${{ env.DB_PORT }}
+        run: |
+          mysql -u root -h ${DB_HOST} -e "CREATE USER ${MYSQL_USER} IDENTIFIED BY '${MYSQL_PASSWORD}';"
+          mysql -u root -h ${DB_HOST} -e "GRANT ALL PRIVILEGES ON *.* TO ${MYSQL_USER};"
+      - uses: shivammathur/setup-php@v2
+        with:
+          extensions: mysqli
+          tools: composer
+          php-version: '8.0'
+      - name: Get Composer Cache Directory
+        id: composer-cache
+        run: |
+          echo "::set-output name=dir::$(composer config cache-files-dir)"
+      - uses: actions/cache@v2
+        with:
+          path: ${{ steps.composer-cache.outputs.dir }}
+          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-composer-
+      - name: Composer Install
+        run: composer install --no-interaction --no-progress
+      - name: Update PHPUnit
+        run: composer update phpunit/phpunit --with-dependencies --ignore-platform-reqs --no-scripts
+      - name: Set up PHP test data
+        run: tests/bin/install-wp-tests.sh ${MYSQL_DATABASE} ${MYSQL_USER} ${MYSQL_PASSWORD} ${DB_HOST}:${DB_PORT} ${WP_VERSION}
+      - name: Run Unit Tests
+        run: composer test

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 bower_components
 vendor
+!/assets/sass/vendor
 /php-scoper/*
 !/php-scoper/composer.*
 !/php-scoper/README.md
@@ -24,7 +25,8 @@ tmtags
 *.un~
 Session.vim
 *.swp
-.vscode
+.vscode/*
+!.vscode/settings.json
 
 # Mac OSX
 .DS_Store
@@ -40,5 +42,6 @@ Desktop.ini
 tests/backstop/html_report/
 tests/backstop/tests/
 
-# Jest coverage
+# Jest
 coverage/
+tests/e2e/screenshots

.storybook/config.js

@@ -51,8 +51,8 @@ const resetGlobals = () => {
 		isFirstAdmin: true,
 		isOwner: true,
 		splashURL: 'http://example.com/wp-admin/admin.php?page=googlesitekit-splash',
-		proxySetupURL: 'https://sitekit.withgoogle.com/site-management/setup/?scope=openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fsiteverification%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fwebmasters%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fanalytics%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fanalytics.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fanalytics.manage.users%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fanalytics.edit&supports=credentials_retrieval%20short_verification_token%20file_verification&nonce=&site_id=storybooksiteid.apps.sitekit.withgoogle.com',
-		proxyPermissionsURL: 'https://sitekit.withgoogle.com/site-management/permissions/?token=storybooktoken&site_id=storybooksiteid.apps.sitekit.withgoogle.com',
+		proxySetupURL: 'http://example.com/wp-admin/index.php?action=googlesitekit_proxy_setup&nonce=abc123',
+		proxyPermissionsURL: 'http://example.com/wp-admin/index.php?action=googlesitekit_proxy_permissions&nonce=abc123',
 		trackingEnabled: false,
 		trackingID: 'UA-000000000-1',
 	};
@@ -62,6 +62,26 @@ const resetGlobals = () => {
 		currentEntityTitle: null,
 		currentEntityID: null,
 	};
+	global._googlesitekitUserData = {
+		user: {
+			id: 1,
+			name: 'Wapuu WordPress',
+			email: '[email protected]',
+			picture: 'https://wapu.us/wp-content/uploads/2017/11/WapuuFinal-100x138.png',
+		},
+		connectURL: 'http://example.com/wp-admin/admin.php?page=googlesitekit-splash&googlesitekit_connect=1&nonce=abc123',
+		verified: true,
+		userInputState: 'completed',
+		permissions: {
+			googlesitekit_authenticate: true,
+			googlesitekit_setup: true,
+			googlesitekit_view_posts_insights: true,
+			googlesitekit_view_dashboard: true,
+			googlesitekit_view_module_details: true,
+			googlesitekit_manage_options: true,
+			googlesitekit_publish_posts: true,
+		},
+	};
 };
 resetGlobals();
 

.storybook/preview-head.html

@@ -26,16 +26,8 @@
 		s.parentNode.insertBefore( wf, s );
 	} )();
 
-	const allImagesLoaded = new Promise( ( resolve ) => {
-		// Wait for the document to completely finish loading before checking for images.
-		window.addEventListener( 'load', () => {
-			imagesLoaded( '.googlesitekit-plugin-preview', { background: true }, resolve );
-		} );
-	} );
-
 	Promise.all( [
 		webFontsLoaded,
-		allImagesLoaded,
 	] ).then( () => {
 		// Signal Backstop that the environment is ready to go.
 		document.body.classList.add( 'backstopjs-ready' );

.storybook/storybook-data.js

@@ -42,20 +42,6 @@ module.exports = [
 			},
 		},
 	},
-	{
-		id: 'dashboard--all-traffic',
-		kind: 'Dashboard',
-		name: 'All Traffic',
-		story: 'All Traffic',
-		parameters: {
-			fileName: './stories/dashboard.stories.js',
-			options: {
-				hierarchyRootSeparator: '|',
-				hierarchySeparator: {},
-				readySelector: '.googlesitekit-line-chart > div[style="position: relative;"]',
-			},
-		},
-	},
 	{
 		id: 'dashboard--post-searcher',
 		kind: 'Dashboard',
@@ -79,7 +65,7 @@ module.exports = [
 			options: {
 				hierarchyRootSeparator: '|',
 				hierarchySeparator: {},
-				readySelector: '.googlesitekit-line-chart > div[style="position: relative;"]',
+				readySelector: '.googlesitekit-chart-v2 .googlesitekit-chart-v2__inner',
 			},
 		},
 	},
@@ -93,7 +79,7 @@ module.exports = [
 			options: {
 				hierarchyRootSeparator: '|',
 				hierarchySeparator: {},
-				readySelector: '.googlesitekit-line-chart > div[style="position: relative;"]',
+				readySelector: '.googlesitekit-chart-v2 .googlesitekit-chart-v2__inner',
 			},
 		},
 	},

.vscode/settings.json

@@ -0,0 +1,23 @@
+{
+  "search.exclude": {
+    ".storybook/data": true,
+    "dist/": true,
+    "node_modules/": true,
+    "third-party/": true,
+    "vendor/": true
+  },
+  "files.exclude": {
+    "dist/": true,
+    "node_modules/": true,
+    "third-party/": true,
+    "vendor/": true
+  },
+  "jest.autoEnable": false,
+  "jest.pathToConfig": "./tests/js/jest.config.js",
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  },
+  "phpcs.enable": true,
+  "phpcs.executablePath": "vendor/bin/phpcs"
+}

assets/js/components/Button.js

@@ -73,7 +73,7 @@ const Button = forwardRef( ( {
 			{ ...extraProps }
 		>
 			{ icon }
-			<span className="mdc-button__label">{ children }</span>
+			{ children && <span className="mdc-button__label">{ children }</span> }
 			{ trailingIcon }
 		</SemanticButton>
 	);
@@ -83,7 +83,7 @@ Button.displayName = 'Button';
 
 Button.propTypes = {
 	onClick: PropTypes.func,
-	children: PropTypes.string.isRequired,
+	children: PropTypes.string,
 	href: PropTypes.string,
 	text: PropTypes.bool,
 	className: PropTypes.string,