@automattic/jetpack-components 0.65.3 → 0.65.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/components/admin-page/index.tsx +51 -3
  3. package/components/admin-page/style.module.scss +18 -1
  4. package/components/admin-page/types.ts +22 -0
  5. package/package.json +16 -16
package/CHANGELOG.md CHANGED
@@ -2,9 +2,21 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.65.5] - 2025-02-03
6
+ ### Changed
7
+ - Updated package dependencies. [#41286]
8
+
9
+ ## [0.65.4] - 2025-01-20
10
+ ### Added
11
+ - Add an optional sandboxed tag to show if the current user is sandboxing their API. [#40971]
12
+ - Add option for additional custom footer elements. [#40943]
13
+
14
+ ### Changed
15
+ - Updated package dependencies. [#41099]
16
+
5
17
  ## [0.65.3] - 2025-01-09
6
18
  ### Changed
7
- - Updated social-logos import from default to named [#40816]
19
+ - Updated social-logos import from default to named. [#40816]
8
20
 
9
21
  ## [0.65.2] - 2025-01-06
10
22
  ### Changed
@@ -1263,6 +1275,8 @@
1263
1275
  ### Changed
1264
1276
  - Update node version requirement to 14.16.1
1265
1277
 
1278
+ [0.65.5]: https://github.com/Automattic/jetpack-components/compare/0.65.4...0.65.5
1279
+ [0.65.4]: https://github.com/Automattic/jetpack-components/compare/0.65.3...0.65.4
1266
1280
  [0.65.3]: https://github.com/Automattic/jetpack-components/compare/0.65.2...0.65.3
1267
1281
  [0.65.2]: https://github.com/Automattic/jetpack-components/compare/0.65.1...0.65.2
1268
1282
  [0.65.1]: https://github.com/Automattic/jetpack-components/compare/0.65.0...0.65.1
package/components/admin-page/index.tsx CHANGED
@@ -1,5 +1,7 @@
1
- import { __ } from '@wordpress/i18n';
1
+ import restApi from '@automattic/jetpack-api';
2
+ import { __, sprintf } from '@wordpress/i18n';
2
3
  import clsx from 'clsx';
4
+ import { useEffect, useCallback } from 'react';
3
5
  import JetpackFooter from '../jetpack-footer';
4
6
  import JetpackLogo from '../jetpack-logo';
5
7
  import Col from '../layout/col';
@@ -23,17 +25,59 @@ const AdminPage: React.FC< AdminPageProps > = ( {
23
25
  showHeader = true,
24
26
  showFooter = true,
25
27
  showBackground = true,
28
+ sandboxedDomain = '',
29
+ apiRoot = '',
30
+ apiNonce = '',
31
+ optionalMenuItems,
26
32
  header,
27
33
  } ) => {
34
+ useEffect( () => {
35
+ restApi.setApiRoot( apiRoot );
36
+ restApi.setApiNonce( apiNonce );
37
+ }, [ apiRoot, apiNonce ] );
38
+
28
39
  const rootClassName = clsx( styles[ 'admin-page' ], {
29
40
  [ styles.background ]: showBackground,
30
41
  } );
31
42
 
43
+ const testConnection = useCallback( async () => {
44
+ try {
45
+ const connectionTest = await restApi.fetchSiteConnectionTest();
46
+
47
+ // eslint-disable-next-line no-alert
48
+ window.alert( connectionTest.message );
49
+ } catch ( error ) {
50
+ // eslint-disable-next-line no-alert
51
+ window.alert(
52
+ sprintf(
53
+ /* translators: placeholder is an error message. */
54
+ __( 'There was an error testing Jetpack. Error: %s', 'jetpack-components' ),
55
+ error.message
56
+ )
57
+ );
58
+ }
59
+ }, [] );
60
+
32
61
  return (
33
62
  <div className={ rootClassName }>
34
63
  { showHeader && (
35
64
  <Container horizontalSpacing={ 5 }>
36
- <Col>{ header ? header : <JetpackLogo /> }</Col>
65
+ <Col className={ styles[ 'admin-page-header' ] }>
66
+ { header ? header : <JetpackLogo /> }
67
+ { sandboxedDomain && (
68
+ <code
69
+ className={ styles[ 'sandbox-domain-badge' ] }
70
+ onClick={ testConnection }
71
+ onKeyDown={ testConnection }
72
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
73
+ role="button"
74
+ tabIndex={ 0 }
75
+ title={ `Sandboxing via ${ sandboxedDomain }. Click to test connection.` }
76
+ >
77
+ API Sandboxed
78
+ </code>
79
+ ) }
80
+ </Col>
37
81
  </Container>
38
82
  ) }
39
83
  <Container fluid horizontalSpacing={ 0 }>
@@ -42,7 +86,11 @@ const AdminPage: React.FC< AdminPageProps > = ( {
42
86
  { showFooter && (
43
87
  <Container horizontalSpacing={ 5 }>
44
88
  <Col>
45
- <JetpackFooter moduleName={ moduleName } moduleNameHref={ moduleNameHref } />
89
+ <JetpackFooter
90
+ moduleName={ moduleName }
91
+ moduleNameHref={ moduleNameHref }
92
+ menu={ optionalMenuItems }
93
+ />
46
94
  </Col>
47
95
  </Container>
48
96
  ) }
package/components/admin-page/style.module.scss CHANGED
@@ -8,4 +8,21 @@
8
8
  &.background {
9
9
  background-color: var(--jp-white);
10
10
  }
11
- }
11
+
12
+ .admin-page-header {
13
+ display: flex;
14
+ align-items: center;
15
+ gap: 8px;
16
+ }
17
+
18
+ .sandbox-domain-badge {
19
+ background: #d63638;
20
+ text-transform: uppercase;
21
+ letter-spacing: 0.2em;
22
+ text-shadow: none;
23
+ font-size: 9px;
24
+ font-weight: bold;
25
+ cursor: pointer;
26
+ color: #ffffff;
27
+ }
28
+ }
package/components/admin-page/types.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import type { JetpackFooterMenuItem } from '../jetpack-footer/types';
2
+
1
3
  export type AdminPageProps = {
2
4
  /**
3
5
  * The page content
@@ -38,4 +40,24 @@ export type AdminPageProps = {
38
40
  * URL of the site WP Admin.
39
41
  */
40
42
  siteAdminUrl?: string;
43
+
44
+ /**
45
+ * The domain of the sanboxed API.
46
+ */
47
+ sandboxedDomain?: string;
48
+
49
+ /**
50
+ * The root URL of the API.
51
+ */
52
+ apiRoot?: string;
53
+
54
+ /**
55
+ * The nonce of the API.
56
+ */
57
+ apiNonce?: string;
58
+
59
+ /**
60
+ * Optional menu items to be displayed
61
+ */
62
+ optionalMenuItems?: JetpackFooterMenuItem[];
41
63
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.65.3",
3
+ "version": "0.65.5",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -15,19 +15,20 @@
15
15
  },
16
16
  "dependencies": {
17
17
  "@automattic/format-currency": "1.0.1",
18
- "@automattic/jetpack-boost-score-api": "^0.1.50",
19
- "@automattic/jetpack-scan": "^0.5.3",
18
+ "@automattic/jetpack-boost-score-api": "^0.1.54",
19
+ "@automattic/jetpack-api": "^0.17.22",
20
+ "@automattic/jetpack-scan": "^0.5.5",
20
21
  "@babel/runtime": "^7",
21
- "@wordpress/browserslist-config": "6.14.0",
22
- "@wordpress/components": "29.0.0",
23
- "@wordpress/compose": "7.14.0",
24
- "@wordpress/data": "10.14.0",
25
- "@wordpress/dataviews": "4.10.0",
26
- "@wordpress/date": "5.14.0",
27
- "@wordpress/element": "6.14.0",
28
- "@wordpress/i18n": "5.14.0",
29
- "@wordpress/icons": "10.14.0",
30
- "@wordpress/notices": "5.14.0",
22
+ "@wordpress/browserslist-config": "6.16.0",
23
+ "@wordpress/components": "29.2.0",
24
+ "@wordpress/compose": "7.16.0",
25
+ "@wordpress/data": "10.16.0",
26
+ "@wordpress/dataviews": "4.12.0",
27
+ "@wordpress/date": "5.16.0",
28
+ "@wordpress/element": "6.16.0",
29
+ "@wordpress/i18n": "5.16.0",
30
+ "@wordpress/icons": "10.16.0",
31
+ "@wordpress/notices": "5.16.0",
31
32
  "clsx": "2.1.1",
32
33
  "prop-types": "^15.7.2",
33
34
  "qrcode.react": "4.2.0",
@@ -37,7 +38,7 @@
37
38
  "uplot-react": "1.1.4"
38
39
  },
39
40
  "devDependencies": {
40
- "@automattic/jetpack-base-styles": "^0.6.39",
41
+ "@automattic/jetpack-base-styles": "^0.6.41",
41
42
  "@babel/core": "7.26.0",
42
43
  "@babel/preset-react": "7.26.3",
43
44
  "@jest/globals": "29.4.3",
@@ -56,12 +57,11 @@
56
57
  "react": "18.3.1",
57
58
  "react-dom": "18.3.1",
58
59
  "require-from-string": "2.0.2",
59
- "resize-observer-polyfill": "1.5.1",
60
60
  "storybook": "8.4.7",
61
61
  "ts-dedent": "2.2.0",
62
62
  "typescript": "5.0.4",
63
63
  "webpack": "5.94.0",
64
- "webpack-cli": "4.9.1"
64
+ "webpack-cli": "6.0.1"
65
65
  },
66
66
  "peerDependencies": {
67
67
  "react": "^18.0.0",