-
-
Custom Scenario
-
Click the button to run your custom scenario.
-
-
-
-
-
-
APIs Being Run:
+
+
+
Custom Scenario
+
Drag and drop API components here to build your custom scenario.
+
+
+
+
+
APIs Being Run:
+
+ {customScenario.map((item, index) => (
+
+ {`${item.api.title}, ${item.func}${item.input ? `(${item.input})` : ''}`}
+
+ ))}
-
-
-
-
setSearchQuery(e.target.value)}
- />
-
{generateVerticalBoxes()}
+
+
-
+
+
+
+
setSearchQuery(e.target.value)}
+ />
+
{generateVerticalBoxes()}
+
+
);
};
diff --git a/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.css b/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.css
new file mode 100644
index 0000000000..6d62e20872
--- /dev/null
+++ b/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.css
@@ -0,0 +1,21 @@
+.publish.page > img {
+ margin: 0 auto;
+ display: block;
+ width: 100%;
+}
+
+.gray-box {
+ width: 800px;
+ height: 600px;
+ background-color: lightgray;
+ display: flex;
+ justify-content: center;
+ align-items: flex-start;
+ padding-top: 10px;
+}
+
+.gray-box-button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.tsx b/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.tsx
new file mode 100644
index 0000000000..e2509bed49
--- /dev/null
+++ b/apps/teamsjs-diagnostic-app/src/components/sample/WebHub.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import "./WebHub.css";
+//import { Image } from "@fluentui/react-components";
+
+export function WebHub(props: { docsUrl?: string }) {
+ const { docsUrl } = {
+ docsUrl: "https://aka.ms/teamsfx-docs",
+ ...props,
+ };
+ return (
+
+
Web Hub SDK Logging
+
+ Check back later!
+
+
+
+
+
+ );
+}
diff --git a/apps/teamsjs-diagnostic-app/src/index.tsx b/apps/teamsjs-diagnostic-app/src/index.tsx
index a507cffce3..662911aefd 100644
--- a/apps/teamsjs-diagnostic-app/src/index.tsx
+++ b/apps/teamsjs-diagnostic-app/src/index.tsx
@@ -1,12 +1,19 @@
import React from "react";
import { createRoot } from "react-dom/client";
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
import App from "./components/App";
import "./index.css";
const container = document.getElementById("root");
if (container) {
const root = createRoot(container);
- root.render(
);
+
+ root.render(
+
+
+
+ );
} else {
console.error("Root container not found");
}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d4e306810d..1d4d258a4e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -318,6 +318,12 @@ importers:
react:
specifier: ^18.3.1
version: 18.3.1
+ react-dnd:
+ specifier: ^16.0.1
+ version: 16.0.1(@types/node@18.19.39)(@types/react@18.3.3)(react@18.3.1)
+ react-dnd-html5-backend:
+ specifier: ^16.0.1
+ version: 16.0.1
react-dom:
specifier: ^18.3.1
version: 18.3.1(react@18.3.1)
@@ -2626,6 +2632,15 @@ packages:
'@polka/url@1.0.0-next.25':
resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+ '@react-dnd/asap@5.0.2':
+ resolution: {integrity: sha512-WLyfoHvxhs0V9U+GTsGilGgf2QsPl6ZZ44fnv0/b8T3nQyvzxidxsg/ZltbWssbsRDlYW8UKSQMTGotuTotZ6A==}
+
+ '@react-dnd/invariant@4.0.2':
+ resolution: {integrity: sha512-xKCTqAK/FFauOM9Ta2pswIyT3D8AQlfrYdOi/toTPEhqCuAs1v5tcJ3Y08Izh1cJ5Jchwy9SeAXmMg6zrKs2iw==}
+
+ '@react-dnd/shallowequal@4.0.2':
+ resolution: {integrity: sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==}
+
'@remix-run/router@1.17.0':
resolution: {integrity: sha512-2D6XaHEVvkCn682XBnipbJjgZUU7xjLtA4dGJRBVUKpEaDYOZMENZoZjAOSb7qirxt5RupjzZxz4fK2FO+EFPw==}
engines: {node: '>=14.0.0'}
@@ -4549,6 +4564,9 @@ packages:
dlv@1.1.3:
resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+ dnd-core@16.0.1:
+ resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
+
dns-packet@1.3.4:
resolution: {integrity: sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==}
@@ -5454,6 +5472,9 @@ packages:
resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
hasBin: true
+ hoist-non-react-statics@3.3.2:
+ resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
hoopy@0.1.4:
resolution: {integrity: sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==}
engines: {node: '>= 6.0.0'}
@@ -7921,6 +7942,24 @@ packages:
typescript:
optional: true
+ react-dnd-html5-backend@16.0.1:
+ resolution: {integrity: sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==}
+
+ react-dnd@16.0.1:
+ resolution: {integrity: sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==}
+ peerDependencies:
+ '@types/hoist-non-react-statics': '>= 3.3.1'
+ '@types/node': '>= 12'
+ '@types/react': '>= 16'
+ react: '>= 16.14'
+ peerDependenciesMeta:
+ '@types/hoist-non-react-statics':
+ optional: true
+ '@types/node':
+ optional: true
+ '@types/react':
+ optional: true
+
react-dom@17.0.2:
resolution: {integrity: sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==}
peerDependencies:
@@ -8051,6 +8090,9 @@ packages:
resolution: {integrity: sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==}
engines: {node: '>=8'}
+ redux@4.2.1:
+ resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==}
+
reflect.getprototypeof@1.0.6:
resolution: {integrity: sha512-fmfw4XgoDke3kdI6h4xcUz1dG8uaiv5q9gcEwLS4Pnth2kxT+GZ7YehS1JTMGBQmtV7Y4GFGbs2re2NqhdozUg==}
engines: {node: '>= 0.4'}
@@ -13111,6 +13153,12 @@ snapshots:
'@polka/url@1.0.0-next.25': {}
+ '@react-dnd/asap@5.0.2': {}
+
+ '@react-dnd/invariant@4.0.2': {}
+
+ '@react-dnd/shallowequal@4.0.2': {}
+
'@remix-run/router@1.17.0': {}
'@rollup/plugin-babel@5.3.1(@babel/core@7.24.7)(@types/babel__core@7.20.5)(rollup@2.79.1)':
@@ -15414,6 +15462,12 @@ snapshots:
dlv@1.1.3: {}
+ dnd-core@16.0.1:
+ dependencies:
+ '@react-dnd/asap': 5.0.2
+ '@react-dnd/invariant': 4.0.2
+ redux: 4.2.1
+
dns-packet@1.3.4:
dependencies:
ip: 2.0.1
@@ -16562,6 +16616,10 @@ snapshots:
he@1.2.0: {}
+ hoist-non-react-statics@3.3.2:
+ dependencies:
+ react-is: 16.13.1
+
hoopy@0.1.4: {}
hosted-git-info@2.8.9: {}
@@ -19726,6 +19784,22 @@ snapshots:
- supports-color
- vue-template-compiler
+ react-dnd-html5-backend@16.0.1:
+ dependencies:
+ dnd-core: 16.0.1
+
+ react-dnd@16.0.1(@types/node@18.19.39)(@types/react@18.3.3)(react@18.3.1):
+ dependencies:
+ '@react-dnd/invariant': 4.0.2
+ '@react-dnd/shallowequal': 4.0.2
+ dnd-core: 16.0.1
+ fast-deep-equal: 3.1.3
+ hoist-non-react-statics: 3.3.2
+ react: 18.3.1
+ optionalDependencies:
+ '@types/node': 18.19.39
+ '@types/react': 18.3.3
+
react-dom@17.0.2(react@17.0.2):
dependencies:
loose-envify: 1.4.0
@@ -19965,6 +20039,10 @@ snapshots:
indent-string: 4.0.0
strip-indent: 3.0.0
+ redux@4.2.1:
+ dependencies:
+ '@babel/runtime': 7.24.7
+
reflect.getprototypeof@1.0.6:
dependencies:
call-bind: 1.0.7