\n \n `;\n\nexport const VISUAL_LISTING_JS_CODE = `\n\nlet initialVisualId = '';\n\nconst replaceComponent = (visualId, e) => {\n embedManagerPromise.then(embedManager => {\n const options = Array.from(document.getElementsByClassName('option'));\n if (e) {\n options.forEach(o => {\n o.classList.remove('selected');\n o.removeAttribute('disabled');\n });\n e.currentTarget.classList.add('selected');\n e.currentTarget.setAttribute('disabled', 'disabled');\n }\n createEmbedComponent(embedManager, { ...componentConfig, visualId });\n });\n }\n \nconst getListOfVisuals = async () => {\n const visualsListUrl = '${process.env.REACT_APP_COMPOSER_URL}/api/visuals';\n const { access_token } = await getToken();\n const headers = {\n 'Content-Type': 'application/vnd.composer.v3+json',\n 'Authorization': 'Bearer ' + access_token\n }\n const response = await fetch(visualsListUrl, {headers});\n return response.json().then(({content}) => content);\n}\n \nconst addVisualOption = (({id, type, visualName}) => {\n const optionsContainer = document.getElementsByClassName('options-container')[0];\n const visualButton = document.createElement('button');\n const visualNameDiv = document.createElement('div');\n const visualIcon = document.createElement('img');\n const nameTextNode = document.createTextNode(visualName);\n \n visualButton.classList.add('option');\n visualIcon.classList.add('visual-icon');\n visualNameDiv.classList.add('visual-name');\n \n visualNameDiv.append(nameTextNode);\n visualButton.append(visualIcon);\n visualButton.append(visualNameDiv);\n \n if (id === initialVisualId) {\n visualButton.classList.add('selected'); \n visualButton.setAttribute('disabled', 'disabled');\n }\n \n visualIcon.src = \\`/icons/$\\{type\\}.svg\\`;\n visualIcon.width = 20;\n visualIcon.height = 20;\n \n visualButton.onclick = (e) => replaceComponent(id, e);\n \n optionsContainer.append(visualButton);\n})\n\nconst buildListOfVisualsUi = async () => {\n const visualsList = await getListOfVisuals();\n initialVisualId = visualsList[0].id;\n replaceComponent(initialVisualId);\n visualsList.forEach(v => addVisualOption(v));\n}\n\nbuildListOfVisualsUi();\n`;\n\nexport const VISUAL_LISTING_CSS_CODE = `\n\n.options-container {\n width: 200px;\n padding-top: 28px;\n display: flex;\n flex-direction: column;\n overflow: auto;\n}\n \n.option, .header {\n width: 100%;\n padding: 5px 16px;\n display: flex;\n align-items: center;\n}\n \n.header {\n background: #f5f5f5;\n font-weight: 600;\n position: fixed;\n top: 0;\n font-size: 13px;\n color: #885a90;\n}\n \n.header-col {\n margin-right: 12px;\n}\n \n.option {\n width: 97%;\n padding: 5px 16px;\n background: #ffffff;\n border: none;\n cursor: pointer;\n margin: 3px 3px 0px 3px;\n border-radius: 5px;\n}\n \n.selected {\n background: #e8e8e8;\n cursor: default;\n}\n \n.option:not(.selected):hover {\n background: #f5f5f5;\n}\n \n.visual-icon {\n padding: 0 20px 0 5px;\n}\n \n.visual-name {\n color: #4682B4;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n`;\n\nexport const VISUAL_BUILDER_COMPONENT_CONFIG = `const componentConfig = {\n \"theme\":\"%themeComposer%\",\n \"header\": { \n \"showTitle\": %showTitle%,\n \"visible\": %showHeader%,\n },%breadcrumbs%%ipOverrides%%embedSource%\n}`;\n\nexport const EMBED_SOURCE_JS_CODE = `\n \"source\": {\n \"visualId\": \"89200c26c2cef4b697c30664dc7bd88c\", // ID of visual template that belongs to a source, used for creating a new visual.\n }`;\n\nexport const VISUAL_AUTHORING_BREADCRUMBS_CODE = `\n \"breadcrumbs\": { // optional configuration of the breadcrumbs\n \"title\": \"Visuals\",\n \"onClick\": () => {alert(\"Clicked !!!\")},\n \"href\": \"#\",\n \"target\": \"_blank\"\n },`;\n","export const DASHBOARD_EVENT_LISTENERS_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-loaded\", (e) => {\n alert(\"Dashboard has been loaded !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_READY_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-ready\", (e) => {\n alert(\"Dashboard is ready !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_CHANGED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-changed\", (e) => {\n alert(\"Dashboard is changed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_DELETED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-deleted\", (e) => {\n alert(\"Dashboard deleted !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_FAILED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-failed\", (e) => {\n alert(\"Dashboard load failed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_SAVE_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-saved\", (e) => {\n alert(\"Dashboard saved !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_DOC_FAIL_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-init-failed\", (e) => {\n alert(\"Initialization failed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_DOC_UNAUTHORIZED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-unauthorized\", (e) => {\n alert(\"composer-unauthorized !!!\");\n });\n /* END: Event Listeners */`;\n","export const DASHBOARD_EVENT_LISTENER_VISUAL_ADDED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-widget-added\", (e) => {\n alert(\"Visual added to dashboard !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_REMOVED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-dashboard-widget-removed\", (e) => {\n alert(\"Visual removed from dashboard !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_FAIL_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-failed\", (e) => {\n alert(\"Visual load failed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_LOAD_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-loaded\", (e) => {\n alert(\"Visual is loaded !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_RENDERED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-rendered\", (e) => {\n alert(\"Visual rendered !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_SAVE_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-saved\", (e) => {\n alert(\"Visual authoring saved !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const VISUAL_EVENT_LISTENERS_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-builder-loaded\", (e) => {\n alert(\"Visual has been loaded !!!\");\n });\n /* END: Event Listeners */`;\n","export const DASHBOARD_EVENT_LISTENER_VISUAL_BUILDER_CHANGE_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-builder-changed\", (e) => {\n alert(\"Visual Builder Changed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_BUILDER_FAILED_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-builder-failed\", (e) => {\n alert(\"Visual Builder Failed !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_BUILDER_LOAD_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-builder-loaded\", (e) => {\n alert(\"Visual Authoring Loaded !!!\");\n });\n /* END: Event Listeners */`;\n\nexport const DASHBOARD_EVENT_LISTENER_VISUAL_BUILDER_READY_CODE = `\n\n // START: Event Listeners\n // When the event is triggered in this example, a message pop-up\n // launches. Please read the Documentation Helper for a description\n // of other available event listeners.\n component.addEventListener(\"composer-visual-builder-ready\", (e) => {\n alert(\"Visual Authoring Ready !!!\");\n });\n /* END: Event Listeners */`;\n","export const CSS_DUNDAS = `html, body {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 10px;\n border-top: none;\n touch-action: none;\n overflow: hidden;\n}\n\n#container {\n width: calc(100% - 40px);\n height: calc(100% - 40px);\n background-color: white;\n}`;\n\nexport const HTML_DUNDAS = `\n\n\n\n`;\n\nexport const JS_DUNDAS = `let promise = window.setupDundasEmbedded('${process.env.REACT_APP_DUNDAS_INSTANCE}/');\n%embedComponentType%`;\n","export const CSS_COMPOSER = `.root {\n display: flex;\n flex-direction: %mainFlexDirection%;\n width: 100vw;\n height: 100vh;\n font-family: Arial, sans-serif;\n}\n\n.widget-holder {\n position: relative;\n flex-grow: 1;\n}\n%publishStyles%%subscribeStyles%%listVisuals%%listDashboards%%customizeActionButtons%`;\n\nexport const HTML_COMPOSER = `\n\n
\n );\n}\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport styles from './Tab.module.scss';\n\nexport default function Tab({ children }) {\n return
{children}
;\n}\n\nTab.propTypes = {\n children: PropTypes.node,\n name: PropTypes.string,\n};\n","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgDocument(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n \"data-name\": \"Layer 1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M17,14a1,1,0,0,1-1,1H8a1,1,0,0,1,0-2h8A1,1,0,0,1,17,14Zm-4,3H8a1,1,0,0,0,0,2h5a1,1,0,0,0,0-2Zm9-6.515V19a5.006,5.006,0,0,1-5,5H7a5.006,5.006,0,0,1-5-5V5A5.006,5.006,0,0,1,7,0h4.515a6.958,6.958,0,0,1,4.95,2.05l3.484,3.486A6.951,6.951,0,0,1,22,10.485ZM15.051,3.464A5.01,5.01,0,0,0,14,2.684V7a1,1,0,0,0,1,1h4.316a4.983,4.983,0,0,0-.781-1.05ZM20,10.485c0-.165-.032-.323-.047-.485H15a3,3,0,0,1-3-3V2.047C11.838,2.032,11.679,2,11.515,2H7A3,3,0,0,0,4,5V19a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3Z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgDocument);\nexport default __webpack_public_path__ + \"static/media/document.37f47a2d.svg\";\nexport { ForwardRef as ReactComponent };","var _path;\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nimport * as React from \"react\";\nfunction SvgAngleSmallDown(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Outline\",\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M18.707,8.207a1,1,0,0,0-1.414,0l-4.586,4.586a1.021,1.021,0,0,1-1.414,0L6.707,8.207A1,1,0,0,0,5.293,9.621l4.585,4.586a3,3,0,0,0,4.243,0l4.586-4.586A1,1,0,0,0,18.707,8.207Z\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAngleSmallDown);\nexport default __webpack_public_path__ + \"static/media/angle-small-down.ee390e4c.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useEffect, useRef, useState } from 'react';\nimport styles from './InfoTooltip.module.scss';\n\nexport default function InfoTooltip({ children }) {\n const [tooltipCoordinates, settooltipCoordinates] = useState({ x: 0, y: 0 });\n const rootRef = useRef(null);\n const tooltipRef = useRef(null);\n\n const resetTooltipPosition = () => {\n let { x, y } = rootRef.current.getBoundingClientRect();\n const { width: tooltipWidth } = tooltipRef.current.getBoundingClientRect();\n if (tooltipWidth + x > window.innerWidth + 10) {\n x -= tooltipWidth;\n }\n settooltipCoordinates({ x, y });\n };\n\n useEffect(() => {\n resetTooltipPosition();\n }, []);\n\n return (\n
\n ))}\n \n );\n}\n","const DOCUMENTATION_PATH = `${window.location.origin}/documentation/content`;\n\nexport const DOCUMENTATION_LINKS = {\n PLAYGROUND_PUBLISH: `${DOCUMENTATION_PATH}/topics/pubsub/playground-publish.html`,\n PLAYGROUND_SUBSCRIBE: `${DOCUMENTATION_PATH}/topics/pubsub/playground-subscribe.html`,\n EMBED_JS_EMBEDMANAGER_PROP_DASH: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-prop-dash.html`,\n EMBED_JS_EMBEDMANAGER_PROP_INVENTORY: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-prop-lib.html`,\n EMBED_JS_EXAMPLE_VB: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-prop-vb.html`,\n EMBED_JS_EVENTLISTENERS: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-eventlisteners.html`,\n EMBED_JS_EVENTLISTENERS_DASHBOARD_BUILDER: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-eventlisteners-dash.html`,\n EMBED_JS_EMBEDMANAGER_PROP_SOURCE_EDITOR: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-source-editor-prop.html`,\n EMBED_JS_EVENTLISTENERS_INVENTORY: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-eventlisteners-lib.html`,\n EMBED_JS_EVENTLISTENERS_VISUALS: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-eventlisteners-vis.html`,\n EMBED_JS_MODES: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-modes.html`,\n EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-interactivityprop.html`,\n EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP_DASH: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-interactivityprop-dash.html`,\n EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP_VIS: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-interactivityprop-vis.html`,\n EMBED_JS_EMBEDMANAGER_MULTIPLE_DASHBOARDS: `${DOCUMENTATION_PATH}/topics/embed/embed-multiple-dashboards.html`,\n THEMES: `${DOCUMENTATION_PATH}/topics/themes/themes-create.html`,\n BREADCRUMBS: `${DOCUMENTATION_PATH}/topics/embed/embed-javascript-embedmanager-prop-vb-breadcrumbs.html`,\n DEFAULT_SOURCE: `${DOCUMENTATION_PATH}/topics/embed/embed-default-source-vis.html`,\n LIST_VISUALS: `${DOCUMENTATION_PATH}/topics/embed/embed-list-visuals.html`,\n LIST_DASHBOARDS: `${DOCUMENTATION_PATH}/topics/embed/embed-list-dashboards.html`,\n // Dundas Content\n VIEW_TYPE: `${DOCUMENTATION_PATH}/topics/dundas-playground/sym-embed-select-view-type.htm`,\n THEMES_DUNDAS: `${DOCUMENTATION_PATH}/topics/themes/sym-themes-ov.htm`,\n AD_HOC_EDITOR: `${DOCUMENTATION_PATH}/topics/sym-embed-playground/sym-embed-javascript-prop-ad-hoc.htm`,\n EMBED_OPTIONS: `${DOCUMENTATION_PATH}/topics/sym-embed-playground/sym-pg-embed-javascript-embed-options.html`,\n EMBED_VIEWER: `${DOCUMENTATION_PATH}/topics/sym-embed-playground/sym-embed-javascript-embedmanager-prop-viewer.html`,\n METRIC_SET: `${DOCUMENTATION_PATH}/topics/sym-embed-playground/sym-embed-javascript-embedmanager-prop-metric-set.htm`,\n};\n\nexport const DOCUMENTATION_ITEMS = {\n EmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Use available methods to embed views such as dashboards and reports, a simplified dashboard creation experience,\n and move using the JavaScript API.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_OPTIONS,\n },\n embedViewerEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Use available methods to embed views such as dashboards and reports, a simplified dashboard creation experience,\n and move using the JavaScript API.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_VIEWER,\n },\n metricSetEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Use available methods to embed views such as dashboards and reports, a simplified dashboard creation experience,\n and move using the JavaScript API.\n \n ),\n link: DOCUMENTATION_LINKS.METRIC_SET,\n },\n adHocEditorEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Use available methods to embed views such as dashboards and reports, a simplified dashboard creation experience,\n and move using the JavaScript API.\n \n ),\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n ViewType: {\n name: 'View Type',\n content: <>Select a content type to embed, such as viewer, metric set, or ad hoc dashboard.,\n link: DOCUMENTATION_LINKS.VIEW_TYPE,\n },\n Theme: {\n name: 'Select Theme',\n content: (\n <>Themes are collections of existing styles you can apply all at once to a view such as a dashboard or report.\n ),\n link: DOCUMENTATION_LINKS.THEMES_DUNDAS,\n },\n Dashboard: {\n name: 'Select Dashboard',\n content: <>Select an available dashboard to use. Limited to the dashboards you can access.,\n },\n Report: {\n name: 'Select Report',\n content: <>Select an available report to use. Limited to the reports you can access.,\n },\n Scorecard: {\n name: 'Select Scorecard',\n content: <>Select an available scorecard to use. Limited to the scorecards you can access.,\n },\n MetricSet: {\n name: 'Select Metric Set',\n content: <>Select an available metric set to use. Limited to the metric sets you can access.,\n },\n toolbarHidden: {\n name: 'Hide Toolbar',\n content: <>Enable to hide the toolbar in the ad-hoc editor and all options available in the toolbar.,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n toolbarAddMetricsSetHidden: {\n name: 'Hide Add MetricSet from Toolbar',\n content: <>Enable to hide Add Metric Set option in the ad-hoc editor toolbar.,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n toolbarAddDashboardHidden: {\n name: 'Hide Add Dashboard from Toolbar',\n content: <>Enable to hide the Add Dashboards option in the ad-hoc editor toolbar.,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n toolbarAddReportHidden: {\n name: 'Hide Add Report from Toolbar',\n content: <>Enable to hide the Add Report icon in the ad-hoc editor toolbar.,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n dockablesHidden: {\n name: 'Hide Dockables',\n content: <>to be honest we do not know what it does 🙂,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n openExistingHidden: {\n name: 'Hide OpenExisting',\n content: <>Enable to hide the Add Existing Dashboards option in the ad-hoc editor.,\n link: DOCUMENTATION_LINKS.AD_HOC_EDITOR,\n },\n dashboardEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Properties that allow you to control how the Inventory is embedded can be passed as parameters to the \n createComponent method during the dashboard embed processing.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_DASH,\n },\n inventoryEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Properties that allow you to control how the Inventory is embedded can be passed as parameters to the{' '}\n createComponent method during the dashboard embed processing.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_INVENTORY,\n },\n inventoryItem: {\n name: 'Inventory item',\n content: <>Select a type of Inventory item to manage.,\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_INVENTORY,\n },\n customizeActionButtons: {\n name: 'Сustomize Action Buttons',\n },\n customizeSearchControllers: {\n name: 'Сustomize Search Controllers',\n },\n customizeFilterButtons: {\n name: 'Сustomize Filter Buttons',\n },\n customizeInventoryTable: {\n name: 'Сustomize Inventory Table',\n },\n visualEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Properties that allow you to control how a visual is embedded can be passed as parameters to the \n createComponent method during the visual embed processing.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EXAMPLE_VB,\n },\n dashboardIpOverrides: {\n name: 'Interactivity Profile Overrides',\n content: (\n <>\n You can add interactivity override settings to your embed script to provide granular control over what your\n users can do with an embedded Composer dashboard. The settings property with parameters can be passed in\n the \n interactivityOverridesobject of the createComponent method.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP,\n },\n dashboardBuilderIpOverrides: {\n name: 'Interactivity Profile Overrides',\n content: (\n <>\n You can add interactivity override settings to your embed script to provide granular control over what your\n users can do with an embedded Composer dashboard. The settings property with parameters can be passed in\n the \n interactivityOverridesobject of the createComponent method.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP_DASH,\n },\n visualIpOverrides: {\n name: 'Interactivity profile overrides',\n content: (\n <>\n You can add interactivity override settings to your embed script to provide granular control over what your\n users can do with an embedded Composer visual. The visualSettings property with parameters can be passed in\n the \n interactivityOverridesobject of the createComponent method.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP_VIS,\n },\n inventoryIpOverrides: {\n name: 'Interactivity profile overrides',\n content: (\n <>\n You can add interactivity override settings to your embed script to provide granular control over what your\n users can do with an embedded Composer inventory.\n interactivityOverridesobject of the createComponent method.\n \n ),\n },\n ip: {\n name: 'Interactivity Profile',\n content: (\n <>\n Interactivity profile embed modes determine the way in which your users can work with an embedded dashboard.\n Valid values are readOnly or interactive. If you do not want the user of your\n application to change anything and only be able to view the dashboard, select readOnly (the\n default). If you want your users to be able to make changes to the dashboard, select interactive.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_MODES,\n },\n dashboardEventListeners: {\n name: 'Event Listeners',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded Composer dashboard and its visuals\n when specific events occur. The ability for your end-users to perform some of the events is controlled by the\n permissions granted to them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EVENTLISTENERS,\n },\n dashboardReadyEventListener: {\n name: 'Ready Event Listener',\n },\n dashboardChangedEventListener: {\n name: 'Change Event Listener',\n },\n dashboardDeleteEventListener: {\n name: 'Delete Event Listener',\n },\n dashboardLoadFailEventListener: {\n name: 'Load Fail Event Listener',\n },\n dashboardSaveEventListener: {\n name: 'Save Event Listener',\n },\n dashboardVisualAddEventListener: {\n name: 'Add Visual Event Listener',\n },\n dashboardVisualRemoveEventListener: {\n name: 'Remove Visual Event Listener',\n },\n visualLoadEventListener: {\n name: 'Load Event Listener',\n },\n visualLoadFailEventListener: {\n name: 'Load Fail Event Listener',\n },\n visualRenderEventListener: {\n name: 'Render Event Listener',\n },\n visualSaveEventListener: {\n name: 'Save Event Listener',\n },\n dashboardBuilderVisualLoadEventListener: {\n name: 'Load Event Listener',\n },\n dashboardBuilderVisualLoadFailEventListener: {\n name: 'Load Fail Event Listener',\n },\n dashboardBuilderVisualRenderEventListener: {\n name: 'Render Event Listener',\n },\n dashboardBuilderVisualSaveEventListener: {\n name: 'Save Event Listener',\n },\n documentFailed: {\n name: 'Initialization Fail Event Listener',\n },\n dashboardBuilderDocumentFailed: {\n name: 'Initialization Fail Event Listener',\n },\n visualBuilderChange: {\n name: 'Change Event Listener',\n },\n visualBuilderFail: {\n name: 'Fail Event Listener',\n },\n visualBuilderLoad: {\n name: 'Load Event Listener',\n },\n visualBuilderReady: {\n name: 'Ready Event Listener',\n },\n dbVisualBuilderChange: {\n name: 'Change Event Listener',\n },\n dbVisualBuilderFail: {\n name: 'Fail Event Listener',\n },\n dbVisualBuilderLoad: {\n name: 'Load Event Listener',\n },\n dbVisualBuilderReady: {\n name: 'Ready Event Listener',\n },\n unauthorized: {\n name: 'Unauthorized Event Listener',\n },\n dashboardBuilderUnauthorized: {\n name: 'Unauthorized Event Listener',\n },\n dashboardBuilderReadyEventListener: {\n name: 'Ready Event Listener',\n },\n dashboardBuilderChangedEventListener: {\n name: 'Change Event Listener',\n },\n dashboardBuilderDeleteEventListener: {\n name: 'Delete Event Listener',\n },\n dashboardBuilderLoadFailEventListener: {\n name: 'Load Fail Event Listener',\n },\n dashboardBuilderSaveEventListener: {\n name: 'Save Event Listener',\n },\n dashboardBuilderVisualAddEventListener: {\n name: 'Add Visual Event Listener',\n },\n dashboardBuilderVisualRemoveEventListener: {\n name: 'Remove Visual Event Listener',\n },\n inventoryEventListeners: {\n name: 'Event Listeners',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded Inventory and its visuals when\n specific events occur. The ability for your end-users to perform some of the events is controlled by the\n permissions granted to them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EVENTLISTENERS_INVENTORY,\n },\n inventoryReadyEventListener: {\n name: 'Ready Event Listener',\n },\n inventoryFailEventListener: {\n name: 'Fail Event Listener',\n },\n inventoryDeleteEventListener: {\n name: 'Delete Event Listener',\n },\n dashboardBuilderEventListeners: {\n name: 'Event Listeners',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded Composer dashboard when specific\n events occur. The ability for your end-users to perform some of the events is controlled by the permissions\n granted to them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EVENTLISTENERS_DASHBOARD_BUILDER,\n },\n visualEventListener: {\n name: 'Event Listener',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded Composer visual when specific\n events occur. The ability for your end-users to perform some of the events is controlled by the permissions\n granted to them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EVENTLISTENERS_VISUALS,\n },\n publish: {\n name: 'Publish Cross-Visual Filters',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded Composer dashboard when specific\n events occur. The ability for your end-users to perform some of the events is controlled by the permissions\n granted to them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.PLAYGROUND_PUBLISH,\n },\n subscribe: {\n name: 'Subscribe to Cross-Visual Filters',\n content: (\n <>\n Use JavaScript methods and properties to subscribe a visual in an embedded dashboard to the cross-visual filters\n available for the dashboard.\n \n ),\n link: DOCUMENTATION_LINKS.PLAYGROUND_SUBSCRIBE,\n },\n dashboardEditorPlacement: {\n name: 'Editor Placement',\n content: (\n <>\n The enhanced visual editor can be positioned on your embedded visuals. Select whether the editor should appear\n on the right side of the dashboard (option Dock right) or as a pop-up on top of the dashboard (option{' '}\n Modal).\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_DASH,\n },\n visualEditorPlacement: {\n name: 'Editor Placement',\n content: (\n <>\n The enhanced visual editor can be positioned on your embedded visuals. Select whether the editor should appear\n on the right side of the visual (option Dock right) or as a pop-up on top of the visual (option{' '}\n Modal).\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_DASH,\n },\n themes: {\n name: 'Themes',\n content: (\n <>\n Composer supplies two themes: modern (default, light colors) and dark. You can create and activate a different\n theme as needed. At this time, only colors can be changed for Composer themes.\n \n ),\n link: DOCUMENTATION_LINKS.THEMES,\n },\n dashboardShowHeader: {\n name: 'Show Header',\n content: (\n <>\n Indicate whether the dashboard header should be shown when the dashboard is embedded. The dashboard header\n includes the title and actions bar for the dashboard.\n \n ),\n },\n visualShowHeader: {\n name: 'Show Header',\n content: (\n <>\n Indicate whether the visual header should be shown when the visual is embedded. The visual header includes the\n title and actions bar for the visual.\n \n ),\n },\n dashboardShowActions: {\n name: 'Show Actions',\n content: (\n <>\n Indicate whether the dashboard action bar should be available for use when the dashboard is embedded. The\n dashboard action bar allows users, based on their dashboard permissions, to alter or export the dashboard.\n \n ),\n },\n visualShowActions: {\n name: 'Show Actions',\n content: (\n <>\n Indicate whether the visual action bar should be available for use when the visual is embedded. The visual\n action bar allows users, based on their visual permissions, to alter or export the visual.\n \n ),\n },\n dashboardShowTitle: {\n name: 'Show Title',\n content: <>Indicate whether the dashboard title should be visible when the dashboard is embedded.,\n },\n dashboardLite: {\n name: 'Embed In Lite Mode',\n content: <>Switch to Lite dashboard Mode.,\n },\n doubleDashboards: {\n name: 'Embed Multiple Dashboards',\n content: <>Composer enables you to add multiple dashboards to better represent your data.,\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_MULTIPLE_DASHBOARDS,\n },\n visualShowTitle: {\n name: 'Show Title',\n content: <>Indicate whether the visual title should be visible when the visual is embedded.,\n },\n listVisuals: {\n name: 'List Visuals',\n content: (\n <>\n You can use the Composer API to list the available visuals in the Composer environment. After rendering the\n visual list, you can select one and pass its visual ID to Composer to open the selected visual. You can then\n alter the selected visual as necessary for your custom solution.\n \n ),\n link: DOCUMENTATION_LINKS.LIST_VISUALS,\n },\n listDashboards: {\n name: 'List Dashboards',\n content: (\n <>\n You can use the Composer API to list the available dashboards in the Composer environment. After rendering the\n dashboard list, you can select one and pass its dashboard ID to Composer to open the selected dashboard. You can\n then alter the selected dashboard as necessary for your custom solution.\n \n ),\n link: DOCUMENTATION_LINKS.LIST_DASHBOARDS,\n },\n embedSource: {\n name: 'Embed Default Data Source and Visual Style',\n content: (\n <>\n Indicate whether a visual should be embedded using the defaults for a supported visual style in the data source.\n You must specify the ID of the default settings for a visual style.\n \n ),\n link: DOCUMENTATION_LINKS.DEFAULT_SOURCE,\n },\n breadcrumbs: {\n name: 'Show Breadcrumbs',\n content: (\n <>\n Optionally, you can pass breadcrumb properties as parameters to the createComponent method\n when embedding visuals.\n \n ),\n link: DOCUMENTATION_LINKS.BREADCRUMBS,\n },\n\n refresh: {\n name: 'Refresh',\n },\n changeLayout: {\n name: 'Change Layout',\n },\n rename: {\n name: 'Rename',\n },\n shareFilterSets: {\n name: 'Share Filter Sets',\n },\n dashboardInteractions: {\n name: 'Dashboard Interactions',\n },\n addToFavourites: {\n name: 'Add to Favorites',\n },\n exportPngPdf: {\n name: 'Export PNG/PDF',\n },\n exportConfiguration: {\n name: 'Export Configuration',\n },\n dashboardLinks: {\n name: 'Dashboard Links',\n },\n addVisuals: {\n name: 'Add Visuals',\n },\n delete: {\n name: 'Delete',\n },\n save: {\n name: 'Save',\n },\n filter: {\n name: 'Filter',\n },\n actionsAction: {\n name: 'Actions Action',\n },\n rulers: {\n name: 'Rulers',\n },\n zoomAction: {\n name: 'Zoom Action',\n },\n filterAction: {\n name: 'Filter Action',\n },\n sourceEditorEmbedOptions: {\n name: 'Embed Options',\n content: (\n <>\n Properties that allow you to control how the source editor is embedded can be passed as parameters to the{' '}\n createComponent method during the source editor embed processing.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_PROP_SOURCE_EDITOR,\n },\n sourceEditorShowHeader: {\n name: 'Show Header',\n content: (\n <>\n Indicate whether the Source Editor header should be shown when the source editor is embedded. The source header\n includes the title for the Source editor.\n \n ),\n },\n sourceEditorShowTitle: {\n name: 'Show Title',\n content: <>Indicate whether the source editor title should be visible when the source editor is embedded.,\n },\n sourceEditorActiveTab: {\n name: 'Active Tab',\n content: (\n <>\n The Active Tab presented to the user when the editor is loaded. Options include 'create', 'fields', 'caching',\n and 'settings'.\n \n ),\n },\n showCreateTab: {\n name: 'Show Source Creation Tab',\n content: <>Define visibility of the Source Creation tab.,\n },\n showFieldsTab: {\n name: 'Show Fields Tab',\n content: <>Define visibility of the Fields tab.,\n },\n showCacheTab: {\n name: 'Show Cache Tab',\n content: <>Define visibility of the Cache tab.,\n },\n showSettingsTab: {\n name: 'Show Global Settings Tab',\n content: <>Define visibility of the Global Settings tab.,\n },\n sourceEditorIpOverrides: {\n name: 'Interactivity Profile Overrides',\n content: (\n <>\n You can add interactivity override settings to your embed script to provide granular control over what your\n users can do with an embedded Composer Source editor. The settings property with parameters can be passed in\n the \n interactivityOverridesobject of the createComponent method.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EMBEDMANAGER_INTERACTIVITY_PROP,\n },\n sourceEditorEventListeners: {\n name: 'Event Listeners',\n content: (\n <>\n Events can be used in your JavaScript to control the behavior of an embedded source editor when specific events\n occur. The ability for your end-users to perform some of the events is controlled by the permissions granted to\n them with their Composer credentials.\n \n ),\n link: DOCUMENTATION_LINKS.EMBED_JS_EVENTLISTENERS_INVENTORY,\n },\n addFromConnection: {\n name: 'Add From Connection',\n },\n addFromFileUpload: {\n name: 'Add From File Upload',\n },\n selectFileUpload: {\n name: 'Select File Upload',\n },\n uploadnewFile: {\n name: 'Upload New File',\n },\n createJoins: {\n name: 'Create Joins',\n },\n filterValuesEntities: {\n name: 'Filter Values Entities',\n },\n exportSource: {\n name: 'Export Source',\n },\n copySource: {\n name: 'Copy Source',\n },\n addDerivedField: {\n name: 'Add Derived Field',\n },\n addHierarchyField: {\n name: 'Add Hierarchy Field',\n },\n addCustomMetric: {\n name: 'Add Custom Metric',\n },\n visibility: {\n name: 'Visibility',\n },\n filterValueOverrides: {\n name: 'Filter Value Overrides',\n },\n fieldCapabilities: {\n name: 'Field Capabilities',\n },\n manageTranslations: {\n name: 'Manage Translations',\n },\n setUniqueKey: {\n name: 'Set Unique Key',\n },\n dataCache: {\n name: 'Data Cache',\n },\n statisticsCache: {\n name: 'Statistics Cache',\n },\n scheduleRefresh: {\n name: 'Schedule Refresh',\n },\n fieldSettings: {\n name: 'Fields Settings',\n },\n};\n\nexport const EMBEDDED_DASHBOARD_DOCUMENTATION_POPUP_ITEMS = [\n DOCUMENTATION_ITEMS.dashboardEmbedOptions,\n DOCUMENTATION_ITEMS.dashboardIpOverrides,\n DOCUMENTATION_ITEMS.ip,\n DOCUMENTATION_ITEMS.dashboardEventListeners,\n DOCUMENTATION_ITEMS.publish,\n DOCUMENTATION_ITEMS.subscribe,\n DOCUMENTATION_ITEMS.doubleDashboards,\n DOCUMENTATION_ITEMS.themes,\n];\n\nexport const VISUAL_AUTHORING_DOCUMENTATION_POPUP_ITEMS = [\n DOCUMENTATION_ITEMS.visualEmbedOptions,\n DOCUMENTATION_ITEMS.visualIpOverrides,\n DOCUMENTATION_ITEMS.embedSource,\n DOCUMENTATION_ITEMS.visualEventListener,\n DOCUMENTATION_ITEMS.breadcrumbs,\n DOCUMENTATION_ITEMS.themes,\n DOCUMENTATION_ITEMS.listVisuals,\n];\n\nexport const DASHBOARD_AUTHORING_DOCUMENTATION_POPUP_ITEMS = [\n DOCUMENTATION_ITEMS.dashboardEmbedOptions,\n DOCUMENTATION_ITEMS.dashboardBuilderIpOverrides,\n DOCUMENTATION_ITEMS.dashboardEventListeners,\n DOCUMENTATION_ITEMS.themes,\n DOCUMENTATION_ITEMS.listDashboards,\n];\n\nexport const INVENTORY_DOCUMENTATION_POPUP_ITEMS = [\n DOCUMENTATION_ITEMS.inventoryEmbedOptions,\n DOCUMENTATION_ITEMS.inventoryEventListeners,\n];\n\nexport const SOURCE_EDITOR_DOCUMENTATION_POPUP_ITEMS = [\n DOCUMENTATION_ITEMS.sourceEditorEmbedOptions,\n DOCUMENTATION_ITEMS.sourceEditorIpOverrides,\n DOCUMENTATION_ITEMS.themes,\n DOCUMENTATION_ITEMS.sourceEditorEventListeners,\n];\n\nexport const EMBED_VIEWER_POPUP_ITEMS = [DOCUMENTATION_ITEMS.embedViewerEmbedOptions, DOCUMENTATION_ITEMS.Theme];\n\nexport const METRIC_SET_POPUP_ITEMS = [DOCUMENTATION_ITEMS.metricSetEmbedOptions];\n\nexport const AD_HOC_EDITOR_POPUP_ITEMS = [DOCUMENTATION_ITEMS.adHocEditorEmbedOptions, DOCUMENTATION_ITEMS.Theme];\n","import React, { useState } from 'react';\nimport styles from './DocumentationHelper.module.scss';\nimport { ReactComponent as DocumentIcon } from 'src/static/icons/document.svg';\nimport { ReactComponent as ArrowDownIcon } from 'src/static/icons/angle-small-down.svg';\nimport DocumentationHelperPopup from '../DocumentationHelperPopup/DocumentationHelperPopup';\nimport {\n DASHBOARD_AUTHORING_DOCUMENTATION_POPUP_ITEMS,\n EMBEDDED_DASHBOARD_DOCUMENTATION_POPUP_ITEMS,\n INVENTORY_DOCUMENTATION_POPUP_ITEMS,\n SOURCE_EDITOR_DOCUMENTATION_POPUP_ITEMS,\n VISUAL_AUTHORING_DOCUMENTATION_POPUP_ITEMS,\n EMBED_VIEWER_POPUP_ITEMS,\n METRIC_SET_POPUP_ITEMS,\n AD_HOC_EDITOR_POPUP_ITEMS,\n} from 'src/shared/constants/documentationConstants';\n\nexport default function DocumentationHelper({ selectedGroup, productSelected }) {\n const [isPopupDisplayed, setIsPopupDisplayed] = useState(false);\n const composerDocumentationTopics = {\n dashboard: EMBEDDED_DASHBOARD_DOCUMENTATION_POPUP_ITEMS,\n 'visual-builder': VISUAL_AUTHORING_DOCUMENTATION_POPUP_ITEMS,\n 'dashboard-builder': DASHBOARD_AUTHORING_DOCUMENTATION_POPUP_ITEMS,\n inventory: INVENTORY_DOCUMENTATION_POPUP_ITEMS,\n 'source-editor': SOURCE_EDITOR_DOCUMENTATION_POPUP_ITEMS,\n };\n\n const dundasDocumentationTopics = {\n 'embed-viewer': EMBED_VIEWER_POPUP_ITEMS,\n 'metric-set': METRIC_SET_POPUP_ITEMS,\n 'adhoc-editor': AD_HOC_EDITOR_POPUP_ITEMS,\n };\n\n const documentationTopics = productSelected === 'Composer' ? composerDocumentationTopics : dundasDocumentationTopics;\n\n return (\n