UIAPPS-104 Create a UI Extensions react package

.changeset/README.md

@@ -16,3 +16,17 @@ We try to clarify the configuration that might not be immediately straight-forwa
 We're setting this to all of the examples so we don't end up trying to bump their versions.
 It seems like that's not the proper way to use this configuration,
 but it doesn't look like there's another way to get the behavior we want.
+
+### `linked`
+
+We're linking the `@datadog/ui-extensions-*` packages together because we want them to all have the same version.
+This is only part of the story.
+`linked` does keep the versions the same,
+but only if every package has a changeset.
+The other part of the story is the [check fixed packages script][].
+This script makes sure we should always have a changeset for all of the `@datadog/ui-extensions-*` packages if any of them changes.
+
+If `changesets` gets a feature to have actually "fixed" packages,
+we can move to using that instead of this.
+
+[check fixed packages script]: ../scripts/check-fixed-packages-ui-extensions.js

.changeset/config.json

@@ -5,6 +5,6 @@
     "changelog": "@changesets/cli/changelog",
     "commit": false,
     "ignore": ["datadog-app-example-*"],
-    "linked": [],
+    "linked": [["@datadog/ui-extensions-*"]],
     "updateInternalDependencies": "minor"
 }

.changeset/four-spoons-count.md

@@ -0,0 +1,8 @@
+---
+'@datadog/ui-extensions-react': minor
+'@datadog/ui-extensions-sdk': minor
+---
+
+Create a new package for UI Extensions with the React framework.
+
+This package provides helpers that make working with the SDK in React a bit easier.

.eslintrc.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 module.exports = {
+    extends: ['plugin:react-hooks/recommended'],
     root: true,
     rules: {
         'block-scoped-var': 'error',
@@ -303,7 +304,9 @@ module.exports = {
                     '**/*.config.js',
                     '**/test-helpers.*',
                     '**/*.test-helpers.*',
-                    '**/*test.utils.*'
+                    '**/*.test.ts',
+                    '**/*test.utils.*',
+                    'scripts/*'
                 ]
             }
         ],

RELEASE.md

@@ -16,6 +16,21 @@ We use [`changesets`][] to help with normal package releases.
 When a normal PR is merged, [`changsets`][] will keep track of any [changeset][]s in this long-running PR.
 When we're ready to release some number of packages, we can merge this long-running PR and [`changesets`][] will release all packages with a [changeset][].
 
+## `@datadog/ui-extensions-*` packages
+
+These packages are all released at the same version.
+The intention is to make it so App Developers have an easier time with updates.
+If we say,
+"Check out this wonderful feature in 0.36.0!"
+App Developers should be able to update whatever `@datadog/ui-extensions-*` packages they have to 0.36.0 and be on their way.
+
+The alternative would be to allow different versions for each package.
+That allows more flexibility and lower version churn at the expense of confusion with version updates.
+A similar example to the above might be worded like,
+"Check out this wonderful feature in 0.36.0 of `@datadog/ui-extensions-sdk`, 2.3.0 of `@datadog/ui-extensions-react`, 1.46.0 of `@datadog/ui-extensions-vue`, etc."
+While that's a model that many other groups of packages follow,
+we're opting for keeping all the versions the same.
+
 [`auto`]: https://intuit.github.io/auto/
 [`changesets`]: https://github.com/changesets/changesets
 [changeset]: https://github.com/changesets/changesets/blob/main/docs/detailed-explanation.md

examples/random-dog/dog-image-widget/package.json

@@ -3,6 +3,7 @@
     "version": "0.0.0",
     "private": true,
     "dependencies": {
+        "@datadog/ui-extensions-react": "0.25.0",
         "@datadog/ui-extensions-sdk": "0.25.0",
         "@types/node": "^14.14.14",
         "@types/react": "^17.0.0",

examples/random-dog/dog-image-widget/src/widget/index.tsx

@@ -1,3 +1,4 @@
+import { useContext } from '@datadog/ui-extensions-react';
 import {
     WidgetOptionItemType,
     init,
@@ -16,6 +17,7 @@ const client = init();
 function Widget() {
     const [breeds, setBreeds] = useState([]);
     const [image, setImage] = useState(null);
+    const result = useContext(client);
 
     useEffect(() => {
         fetch('http://localhost:3001/breeds')
@@ -64,9 +66,11 @@ function Widget() {
     }, []);
 
     const cycleImage = async () => {
-        const breed = await client
-            .getContext()
-            .then(c => c.widget?.definition.options?.breed);
+        if (result.type !== 'initialized') {
+            return;
+        }
+
+        const breed = result.context.widget?.definition.options?.breed;
         getImage(breed);
     };
 

examples/starter-kit/package.json

@@ -3,6 +3,7 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@datadog/ui-extensions-react": "0.25.0",
         "@datadog/ui-extensions-sdk": "0.25.0",
         "@types/node": "^14.14.14",
         "@types/react": "^17.0.0",

examples/starter-kit/src/modal/index.tsx

@@ -1,5 +1,6 @@
+import { useContext } from '@datadog/ui-extensions-react';
 import { init } from '@datadog/ui-extensions-sdk';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import './../index.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -8,11 +9,9 @@ const client = init();
 
 function Modal() {
     const [clickCount, setClickCount] = useState(0);
-    const [args, setArgs] = useState<any>();
-
-    useEffect(() => {
-        client.getContext().then(({ args }) => setArgs(args));
-    }, [setArgs]);
+    const result = useContext(client);
+    const args =
+        result.type === 'initialized' ? result.context.args : undefined;
 
     const onClick = () => {
         setClickCount(clickCount + 1);

examples/starter-kit/src/side-panel/index.tsx

@@ -1,17 +1,15 @@
+import { useContext } from '@datadog/ui-extensions-react';
 import { init } from '@datadog/ui-extensions-sdk';
-import { useState, useEffect } from 'react';
 import './../index.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 const client = init();
 
 function SidePanel() {
-    const [args, setArgs] = useState<any>();
-
-    useEffect(() => {
-        client.getContext().then(({ args }) => setArgs(args));
-    }, [setArgs]);
+    const result = useContext(client);
+    const args =
+        result.type === 'initialized' ? result.context.args : undefined;
 
     return (
         <div

examples/starter-kit/src/widget/index.tsx

@@ -1,3 +1,4 @@
+import { useContext } from '@datadog/ui-extensions-react';
 import { init, EventType } from '@datadog/ui-extensions-sdk';
 import './../index.css';
 import React from 'react';
@@ -11,14 +12,15 @@ import { useEffect, useState } from 'react';
 const client = init();
 
 function Widget() {
-    const [metric, setMetric] = useState('system.cpu.idle');
+    const result = useContext(client);
+    const initialMetric =
+        result.type === 'initialized'
+            ? result.context.widget?.definition.options?.metric
+            : 'system.cpu.idle';
+    const [metric, setMetric] = useState(initialMetric);
     const [broadcastClickCount, setBroadcastClickCount] = useState(0);
 
     useEffect(() => {
-        client.getContext().then(c => {
-            setMetric(c.widget?.definition.options?.metric);
-        });
-
         client.events.on(
             EventType.DASHBOARD_CUSTOM_WIDGET_OPTIONS_CHANGE,
             ({ metric }) => {

examples/stream/admin/package.json

@@ -4,6 +4,7 @@
     "private": true,
     "dependencies": {
         "@datadog/datadog-api-client": "^1.0.0-beta.5",
+        "@datadog/ui-extensions-react": "0.25.0",
         "@datadog/ui-extensions-sdk": "0.25.0",
         "@types/bootstrap": "^5.1.4",
         "@types/node": "^16.9.1",

examples/stream/admin/src/account-panel/index.tsx

@@ -1,3 +1,4 @@
+import { useContext } from '@datadog/ui-extensions-react';
 import { useState, useEffect } from 'react';
 import '../index.css';
 import React from 'react';
@@ -17,21 +18,15 @@ function isRecord(args: unknown): args is Record<string, unknown> {
 
 export default function AccountPanel() {
     const [tweets, setTweets] = useState<Tweet[]>([]);
-    const [account, setAccount] = useState<string>('');
+    const result = useContext(client);
+    let account = '';
 
-    useEffect(() => {
-        client.getContext().then(({ args }) => {
-            if (!isRecord(args)) {
-                return;
-            }
-
-            if (typeof args.account !== 'string') {
-                return;
-            }
-
-            return setAccount(args.account);
-        });
-    }, []);
+    if (result.type === 'initialized') {
+        const args = result.context.args;
+        if (isRecord(args) && typeof args.account === 'string') {
+            account = args.account;
+        }
+    }
 
     async function getTweets(account: string) {
         const data = await get<{ tweets: Tweet[] }>(`stream/${account}`);

package.json

@@ -13,6 +13,7 @@
         "lint:check": "eslint '**/*.{ts,js}'",
         "lint:fix": "yarn run lint:check --fix",
         "lint": "yarn run lint:check && prettier --check .",
+        "postinstall": "patch-package",
         "prepare": "yarn workspaces run prepare",
         "release:canary": "auto shipit",
         "release:packages": "changeset publish",
@@ -21,21 +22,30 @@
         "test:example-packages:ui-extensions-sdk-version": "./scripts/check-example-packages-ui-extensions-sdk-version.js",
         "test:example-packages:version": "./scripts/check-example-packages-version.js",
         "test:example-packages": "yarn test:example-packages:name && yarn test:example-packages:private && yarn test:example-packages:ui-extensions-sdk-version && yarn test:example-packages:version",
-        "test": "yarn test:example-packages && yarn workspaces run test"
+        "test:fixed-packages:ui-extensions": "./scripts/check-fixed-packages-ui-extensions.js",
+        "test:fixed-packages": "yarn test:fixed-packages:ui-extensions",
+        "test": "yarn test:example-packages && yarn test:fixed-packages && yarn workspaces run test"
     },
     "license": "Apache-2.0",
     "private": true,
+    "workspaces:comment:1": "The `framepost`, `sdk`, and `react` packages are listed first in this order so we build them first with the `yarn workspaces` command.",
+    "workspaces:comment:2": "This is a workaround based on the implementation of `yarn workspaces` that should hopefully be temporary, as this seems hard to maintain.",
     "workspaces": [
+        "packages/framepost",
+        "packages/ui-extensions-sdk",
+        "packages/ui-extensions-react",
         "examples/*",
         "examples/*/*",
         "packages/*"
     ],
     "devDependencies": {
         "@changesets/cli": "2.18.1",
+        "@changesets/get-release-plan": "3.0.4",
         "@typescript-eslint/eslint-plugin": "4.22.0",
         "@typescript-eslint/parser": "4.22.0",
         "auto": "10.32.5",
         "babel-eslint": "10.1.0",
+        "eslint": "7.25.0",
         "eslint-config-airbnb-base": "14.2.1",
         "eslint-config-prettier": "8.3.0",
         "eslint-config-react-app": "6.0.0",
@@ -48,11 +58,12 @@
         "eslint-plugin-jsx-a11y": "6.4.1",
         "eslint-plugin-no-storage": "1.0.2",
         "eslint-plugin-prettier": "3.4.0",
-        "eslint-plugin-react-hooks": "4.2.0",
         "eslint-plugin-react": "7.24.0",
+        "eslint-plugin-react-hooks": "4.2.0",
         "eslint-plugin-testing-library": "3.10.2",
-        "eslint": "7.25.0",
         "lerna": "4.0.0",
+        "patch-package": "6.4.7",
+        "postinstall-postinstall": "2.1.0",
         "prettier": "2.1.2",
         "typedoc": "0.22.10",
         "typescript": "4.5.4"

packages/ui-extensions-react/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+coverage
+dist