@automattic/jetpack-components 0.65.2 → 0.65.4

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.
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  ### This is a list detailing changes for the Jetpack RNA Components package releases.
4
4
 
5
+ ## [0.65.4] - 2025-01-20
6
+ ### Added
7
+ - Add an optional sandboxed tag to show if the current user is sandboxing their API. [#40971]
8
+ - Add option for additional custom footer elements. [#40943]
9
+
10
+ ### Changed
11
+ - Updated package dependencies. [#41099]
12
+
13
+ ## [0.65.3] - 2025-01-09
14
+ ### Changed
15
+ - Updated social-logos import from default to named. [#40816]
16
+
5
17
  ## [0.65.2] - 2025-01-06
6
18
  ### Changed
7
19
  - Updated package dependencies. [#40797] [#40798] [#40835] [#40841]
@@ -1259,6 +1271,8 @@
1259
1271
  ### Changed
1260
1272
  - Update node version requirement to 14.16.1
1261
1273
 
1274
+ [0.65.4]: https://github.com/Automattic/jetpack-components/compare/0.65.3...0.65.4
1275
+ [0.65.3]: https://github.com/Automattic/jetpack-components/compare/0.65.2...0.65.3
1262
1276
  [0.65.2]: https://github.com/Automattic/jetpack-components/compare/0.65.1...0.65.2
1263
1277
  [0.65.1]: https://github.com/Automattic/jetpack-components/compare/0.65.0...0.65.1
1264
1278
  [0.65.0]: https://github.com/Automattic/jetpack-components/compare/0.64.1...0.65.0
@@ -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
  ) }
@@ -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
+ }
@@ -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
  };
@@ -1,6 +1,6 @@
1
1
  import { Path, SVG, G, Polygon } from '@wordpress/components';
2
2
  import clsx from 'clsx';
3
- import SocialLogo from 'social-logos';
3
+ import { SocialLogo } from 'social-logos';
4
4
  import styles from './style.module.scss';
5
5
  import { BaseIconProps } from './types';
6
6
  import type React from 'react';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/jetpack-components",
3
- "version": "0.65.2",
3
+ "version": "0.65.4",
4
4
  "description": "Jetpack Components Package",
5
5
  "author": "Automattic",
6
6
  "license": "GPL-2.0-or-later",
@@ -15,29 +15,30 @@
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.51",
19
+ "@automattic/jetpack-api": "^0.17.22",
20
+ "@automattic/jetpack-scan": "^0.5.4",
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",
34
35
  "react-slider": "2.0.5",
35
- "social-logos": "^3.1.16",
36
+ "social-logos": "^3.1.17",
36
37
  "uplot": "1.6.31",
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.40",
41
42
  "@babel/core": "7.26.0",
42
43
  "@babel/preset-react": "7.26.3",
43
44
  "@jest/globals": "29.4.3",
@@ -56,7 +57,6 @@
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",