Describe the bug
When I try to edit or remove an element from behavior the callback functions are not working since onElementClick and onRemoveElement are not passed to SceneElements component in SceneBehaviorsForm. I fixed it in my current feature branch but feel free to fix it before.

To Reproduce
Steps to reproduce the behavior:

1. Select a scene
2. Got to behaviors
3. Select a behavior to edit
4. Go to elements tab and try to edit or remove that element from behavior

Expected behavior
Callback methods should work in overflow menu

Screenshots

Browser (please complete the following information):

• Browser [e.g. chrome, safari, edge]

Additional context
Add any other context about the problem here.

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Describe the bug
Radio button selector UI sizing is messed up when viewing component in Azure-IoT-DigitalTwins-Explorer/app project.

To Reproduce
Steps to reproduce the behavior:

1. Install cardboard in Azure-IoT-DigitalTwins-Explorer/app project
2. Run locally
3. Open Theme dialog
4. View UI

Expected behavior
Expected UI to match storybook UI shown below

Describe the bug
A clear and concise description of what the bug is.

Request from @rinisbet

As soon as trigger expression for Alerts is != "", the blue badge preview (sans icon, see Alert config feedback in the other chat) should appear on the preview popover... no alert text showing of course until they start typing that

Reasoning: it's a true live view of the badge when the alert is "valid"

To Reproduce
Steps to reproduce the behavior:

1. Go to Alerts tab (in new behavior creation)
2. Enter text in trigger expression box
3. No preview shows of alert configured (color & icon are still null)

Expected behavior
Alerts need default badge / color values. Bottom part of form should probably disappear when no trigger expression is active, indicating alert is not present

Screenshots
Enter text in trigger expression (alert doesn't show)

Select a badge icon (alert shows only badge, no color)

Click on color icon picker (alert shows badge & color)

https://github.com/search?q=phone+repo:Azure%2Fiot-plugandplay-models+language:JSON&type=Code&ref=advsearch&l=JSON

Is your feature request related to a problem? Please describe.
Clearer pull requests with images, config information, and consistent structure to describe changes

Describe the solution you'd like

• Reminder to link issues
• Reminder to add to kanban project
• Section for images
• Section for summary of changes
• Section for any config, URLs, or information to test the pull request

Currently, only cards are supported by the withErrorBoundary HOC. We should expand this component (or create another) which supports bubbling up errors in components ie not falling back to base card with errors.

Is your feature request related to a problem? Please describe.
Status visuals & alert components should us a shared component in the different places these are rendered. This will ensure style consistency.

Something like StatusAlertIndicator

The status indicator would take in a list of status values.
The alert indicator would take in the icon and color value.

Both should make little assumption about where they are rendered, they should only render themselves and let the parent compose them in the right spot.

Render only works for first property selection.

Hierarchy with process graphics card

With the current model authoring design when we select models from model search result list, when we remove the component from the publish list authoring push request fails. Maybe we should group the models which are component for others?

Is your feature request related to a problem? Please describe.
The color picker uses the default fluent picker which doesn't quite match with the styling of the icon picker when items are selected or being tabbed.

Designs
https://www.figma.com/file/LsmZeVOZJgwZs75HPTQmgU/3D-Scenes-Mock-Screens?node-id=44214%3A160541

Actual

Describe the solution you'd like
The focus targets should be squared off and not shrink the colored circles when selected

The code below is duplicated in multiple places. @jl-g suggested refactoring the network requests to reduce code duplication.

const axiosData = await axios({
    method: 'get',
    url: this.adtProxyServerURL,
    headers: {
        'Content-Type': 'application/json',
        authorization: 'Bearer ' + token,
        'x-adt-host': this.adtHostUrl,
        'x-adt-endpoint': 'models'
    },
    params: {
        'api-version': '2020-10-31'
    }
});

Describe the bug
On "Widgets" tab, when I click on non-first widget item to edit, the WidgetForm is filled with the information of the first widget in that list. It is because of the "id" of the widgets are all "" empty string, so it picks up the first instance to edit.

To Reproduce
Steps to reproduce the behavior:

1. Go to Widgets in a behavior
2. Click on "Edit" icon on ellipsis menu on one of the non-first widget item in the list
3. See error

Expected behavior
The WidgetForm should pick up the right widget with its id to edit

Screenshots

Browser (please complete the following information):

• Browser [e.g. chrome, safari, edge]

Additional context
Add any other context about the problem here.

Describe the bug
When you try to add a widget to an existing behavior (edit flow) it does not get saved.

To Reproduce
Steps to reproduce the behavior:

1. Go to Behaviors list
2. Click on an existing behavior
3. Click on the Widgets tab
4. Add a behavior with any content
5. Save it
6. Click Update Behavior
7. Navigate back to the widgets tab on that behavior
8. See that the widget is not persisted

Expected behavior
Newly added widget should still be there when I come back after choosing to update

Describe the bug
There needs to be some polish on the range builder control.

To Reproduce
Steps to reproduce the behavior:

1. Go to Kraken theme
2. Navigate to the States tab of a behavior or gauge widget form

Expected
Border & background color should be reflected.

Describe the bug
When searching in the widget library it does not filter the list items

To Reproduce
Steps to reproduce the behavior:

1. Go to Behaviors list
2. Click on a behavior
3. Navigate to the Widgets tab
4. Click on 'Add Widget'
5. Type something in the search box
6. See nothing happen

Expected behavior
When typing text, the list of widget types should get filtered.

Screenshots

We may need to check out useLongPoll hook

• Create option to set mock adapter timeout to 0. This will ensure that snapshot tests contain more than card loading state
• Create option to seed mock data to keep data stable between builds. This will ensure that snapshot tests don't flag diffs on data changing between builds ie. diffs should only show purposeful changes
• Change mock adapter constructor parameter to strongly typed object with optional props and intelligent defaults

Improve ADTInstances component not to block while loading
Leverage this component in flights after we handle loading not blocking while the instances load, and handle environments that are set if people dont have access to them

Describe the bug

Bug when rendering certain twin properties.

Repro link: with new eid & twinid updates -> visit this link https://explorer.digitaltwins.azure.net/flights?eid=https%3A%2F%2FSmartCitiesExplorerDemo.api.aue.digitaltwins.azure.net&twinid=SmartPoleE.1 and select relationship EVChargerE.1 in the table

react-dom.development.js:13413 Uncaught Error: Objects are not valid as a React child (found: object with keys {addressCountry, $metadata}). If you meant to render a collection of children, use an array instead.
    in div (created by KVP)
    in div (created by KVP)
    in KVP (created by KeyValuePairCard)
    in div (created by KeyValuePairCard)
    in div (created by BaseCard$1)
    in div (created by BaseCard$1)
    in div (created by ThemeProvider)
    in div (created by ThemeProvider)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (created by BaseCard$1)
    in I18nextProvider (created by I18nProviderWrapper)
    in I18nProviderWrapper (created by BaseCard$1)
    in BaseCard$1 (created by KeyValuePairCard)
    in KeyValuePairCard (created by Board)
    in div (created by Board)
    in div (created by Board)
    in div (created by ThemeProvider)
    in div (created by ThemeProvider)
    in ThemeProvider (created by ThemeProvider)
    in ThemeProvider (created by Board)
    in I18nextProvider (created by I18nProviderWrapper)
    in I18nProviderWrapper (created by Board)
    in Board (created by ADTHierarchyWithBoard)
    in div (created by ADTHierarchyWithBoard)
    in div (created by ADTHierarchyWithBoard)
    in ADTHierarchyWithBoard (at Twins.tsx:46)
    in div (at Twins.tsx:45)
    in Twins (at App.tsx:263)
    in Route (at App.tsx:260)
    in Switch (at App.tsx:259)
    in div (at App.tsx:250)
    in div (at App.tsx:249)
    in main (at App.tsx:220)
    in div (at App.tsx:180)
    in App (at src/index.tsx:15)
    in div (at ThemeProvider.tsx:32)
    in div (created by ThemeProvider)
    in ThemeProvider (at ThemeProvider.tsx:31)
    in ThemeProviderWrapper (at src/index.tsx:14)
    in I18nextProvider (at I18nProvider.tsx:27)
    in I18nProviderWrapper (at src/index.tsx:13)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.tsx:12)
    in StrictMode (at src/index.tsx:11)
    at throwOnInvalidObjectType (react-dom.development.js:13413)
    at reconcileChildFibers (react-dom.development.js:14313)
    at reconcileChildren (react-dom.development.js:16762)
    at updateHostComponent (react-dom.development.js:17302)
    at beginWork (react-dom.development.js:18627)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at setAdapterResult (index.es.js:56081)
    at index.es.js:56096
    at step (index.es.js:108)
    at Object.next (index.es.js:89)
    at fulfilled (index.es.js:79)

Describe the bug

To Reproduce
Steps to reproduce the behavior:

1. On current main branch, shrink vertical screen height until elements list scrolls.
2. Hover over elements in the lower part of the list (see where ellipsis appears)

Expected behavior
Ellipsis always shows on list item

https://github.com/microsoft/iot-cardboard-js/blob/main/src/Adapters/TsiAdapter.ts#L3

transformTsqResultsForVisualization call requires UXClient import which also imports a lot of other modules - including Azure maps dependency.

It looks like this increases package size by >1MB.

I think the best fix here is to move helper functions like transformTsqResultsForVisualization outside of 'tsiclient/UXClient'

🚨 The automated release from the main branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the main branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Describe the bug
After installing recent iot-cardboard npm package I started getting the below error when I try to import from @microsoft/iot-cardboard-js:
Could not find a declaration file for module '@microsoft/iot-cardboard-js'. '/index.js' implicitly has an 'any' type. Try npm i --save-dev @types/microsoft__iot-cardboard-js if it exists or add a new declaration (.d.ts) file containing `declare module '@microsoft/iot-cardboard-js

To Reproduce
Steps to reproduce the behavior:

1. Go to your app (e.g. flights app) and try to install the @microsoft/iot-cardboard-js package by >npm install @microsoft/iot-cardboard-js (you can also test it with >npm run build in iot-cardboard project and copy and install the .tgz under build_artifacts folder to your app)
2. Reload your project in VS Code
3. See error in your app when you try to import any exported asset from @microsoft/iot-cardboard

Expected behavior
Should be able recognize @microsoft/iot-cardboard-js module to import anything from it

Screenshots

Browser (please complete the following information):

• Chrome

Additional context
When I added the right path to types in package.json in iot-cardboard repo it solved the issue, because when you check the /dist folder after building all the modules are exported and type declarations are in the index.d.ts under /src. The fix is in my recent PR. Do not know when this change happened though, any idea @ccrowley96 ?:

UPDATE: it was due to how we import a vconfigDecFinal.json file from .storybook. I used exported variable in ts file instead.

• clean/merge duplications of the same interfaces/types in Interfaces.ts and Types.ts (e.g. IADTModel and DTModel interfaces have similar content)
• revise DTDL.ts classes to use one main class property strongly typed with one of these cleaned interfaces, or see if we can extend from those interfaces when declaring these classes

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to ADT 3D scene page
2. Select a scene --> error pops

Expected behavior
No error in console

Describe the bug
When you tab onto the root button or items in the icon picker the focus line is a square instead of rounded.

To Reproduce
Steps to reproduce the behavior:

1. Go to Alerts tab on the Behavior form
2. Tab to the Icon button
3. See the outline shows up in a square instead of circle

Expected behavior
Should be inset like the color picker border is when those are focused

Describe the bug
The list items in the widget library dialog are clickable divs instead of buttons.
This is an accessibility issue for screen readers at least

To Reproduce
Steps to reproduce the behavior:

1. Go to Behaviors list
2. Click on a behavior
3. Navigate to the Widgets tab
4. Click on 'Add Widget'

Expected behavior
Clickable elements should be <button> tags

Screenshots

Problem

• We are creating a new theme / localization context for each base card, even if there is already a context higher in the component tree.
• Components (such as JsonPreview, ModelSearch, etc) must be wrapped in base card to be themed / localized

Possible solution

• When wrapping components in localization / theming higher order components (H.O.C), we should check if localization / theming contexts are already available, and use those contexts if possible, if not, the component is being rendered in a standalone fashion and we should add the localization / theming H.O.C
• If we separate out localization / theming into a single H.O.C, we may be able to reuse this component and do the same check to see if the H.O.C exists for components as well as cards. This way, we can have themed / localized standalone components in storybook and elsewhere, even if the components aren't wrapped in basecard.
• To add these H.O.C to components, we'll likely need to create a BaseComponent that wraps components, adding the theme / localization H.O.C if a context isn't already found.

Describe the bug

There should be spacing between form contents and the scroll bar

Describe the bug
When you're on the Elements list or the Elements form (mesh tab) and hover items in the list, the perf of the app gets really laggy.

To Reproduce
Steps to reproduce the behavior:

1. Go to Elements list
2. Click on a element with meshes
3. Hover on items in the list of meshes
4. watch the lag time between when the hover background shows up
   

Describe the bug
Cannot create behavior on new element from behaviors tab.

To Reproduce
Steps to reproduce the behavior:

1. On Elements tab
2. Click on 'Create element'
3. Click on behavior pivot within elements for
4. Click on 'Add behavior'
5. Select 'Create behavior' from callout --> this throws (during element initial creation)

Expected behavior
Action is taken after clicking 'Create behavior in callout'

Screenshots