{"version":3,"file":"LibraryPanelsPage.98f5a524ee8835ae9074.js","mappings":"uOAYA,MAAMA,EAAmBC,IAAD,CACtBC,UAAUC,EAAAA,EAAAA,GAAYF,EAAMG,SAAU,oBAS3BC,IANKC,EAAAA,EAAAA,SAAQN,OAAiBO,GAMC,IAAkB,IAAjB,SAAEL,GAAe,EAC5D,MAAOM,EAAUC,IAAeC,EAAAA,EAAAA,eAAwCH,GAExE,OACE,SAAC,IAAD,CAAML,SAAUA,EAAhB,UACE,UAAC,aAAD,YACE,SAAC,IAAD,CAAqBS,QAASF,EAAaG,sBAAoB,EAACC,UAAQ,EAACC,iBAAe,EAACC,kBAAgB,IACxGP,GAAW,SAAC,IAAD,CAAuBQ,UAAW,IAAMP,OAAYF,GAAYU,aAAcT,IAAe,YAMjH,GAAeF,EAAAA,EAAAA,SAAQN,EAAvB,CAAwCK,I,8HClBjC,SAASa,EAAT,GAAqG,IAAtE,aAAED,EAAF,UAAgBD,GAAsD,EAC1G,MAAMG,GAASC,EAAAA,EAAAA,YAAWC,IACnBC,EAASC,IAAcb,EAAAA,EAAAA,WAAS,IAChCc,EAAWC,IAAgBf,EAAAA,EAAAA,UAAS,IACpCgB,EAAQC,IAAajB,EAAAA,EAAAA,eAA0DH,IACtFqB,EAAAA,EAAAA,YAAU,KACaC,WACnB,MAAMC,QAA4BC,EAAAA,EAAAA,IAAmCd,EAAae,KAClFP,EAAaK,EAAoBG,SAEnCC,KACC,CAACjB,EAAae,MACjB,MAAMG,GAAcC,EAAAA,EAAAA,cACjBC,GAmDLR,eAAgCG,EAAaK,EAAsBd,GACjEA,GAAW,GACX,MACMe,SADmBC,EAAAA,EAAAA,IAAuBP,IAE7CQ,QAAQC,GAAMA,EAAEC,MAAMC,cAAcC,SAASP,EAAaM,iBAC1DE,KAAKJ,IAAD,CAAUK,MAAOL,EAAEC,MAAOK,MAAON,MAGxC,OAFAlB,GAAW,GAEJe,EA3DqBU,CAAiB/B,EAAae,IAAKK,EAAcd,IAC3E,CAACN,EAAae,MAEViB,GAAuBC,EAAAA,EAAAA,UAC3B,KAAMC,EAAAA,EAAAA,UAAShB,EAAa,IAAK,CAAEiB,SAAS,EAAMC,UAAU,KAC5D,CAAClB,IAOH,OACE,UAAC,EAAAmB,MAAD,CAAOZ,MAAM,0BAA0B1B,UAAWA,EAAWuC,gBAAiBvC,EAAWwC,QAAM,EAA/F,WACE,iBAAKC,UAAWtC,EAAOuC,UAAvB,UACiB,IAAdlC,EAAA,OACC,2GACE,KACHA,EAAY,GACX,iCACE,uDAC8B,KAC5B,8BACGA,EADH,IACeA,EAAY,EAAI,aAAe,eAHhD,2DAOA,SAAC,EAAAmC,YAAD,CACEC,aAAW,EACXC,UAAWvC,EACXwC,gBAAgB,EAChB3B,YAAac,EACbc,SAAUpC,EACVqC,YAAY,uCACZC,iBAAiB,2BAGnB,SAEN,UAAC,EAAAX,MAAA,UAAD,YACE,SAAC,EAAAY,OAAD,CAAQC,QAAQ,YAAYxD,QAASK,EAAWoD,KAAK,UAArD,qBAGA,SAAC,EAAAF,OAAD,CAAQvD,QApCO0D,IAAqC,MACxDA,EAAEC,iBACFC,EAAAA,gBAAAA,KAAqBC,EAAAA,QAAAA,UAAmB,MAAK9C,MAAAA,GAAN,UAAMA,EAAQqB,aAAd,aAAM,EAAef,MAAO,MAkCjCyC,UAAWC,QAAQhD,GAAjD,SACGA,EAAU,iBAAgBA,MAAAA,OAAjB,EAAiBA,EAAQoB,WAAa,qCAkB1D,SAASzB,EAAUsD,GACjB,MAAO,CACLjB,UAAWkB,EAAAA,GAAI","sources":["webpack://grafana/./public/app/features/library-panels/LibraryPanelsPage.tsx","webpack://grafana/./public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx"],"sourcesContent":["import React, { FC, useState } from 'react';\nimport { connect, ConnectedProps } from 'react-redux';\n\nimport Page from '../../core/components/Page/Page';\nimport { GrafanaRouteComponentProps } from '../../core/navigation/types';\nimport { getNavModel } from '../../core/selectors/navModel';\nimport { StoreState } from '../../types';\n\nimport { LibraryPanelsSearch } from './components/LibraryPanelsSearch/LibraryPanelsSearch';\nimport { OpenLibraryPanelModal } from './components/OpenLibraryPanelModal/OpenLibraryPanelModal';\nimport { LibraryElementDTO } from './types';\n\nconst mapStateToProps = (state: StoreState) => ({\n  navModel: getNavModel(state.navIndex, 'library-panels'),\n});\n\nconst connector = connect(mapStateToProps, undefined);\n\ninterface OwnProps extends GrafanaRouteComponentProps {}\n\ntype Props = OwnProps & ConnectedProps<typeof connector>;\n\nexport const LibraryPanelsPage: FC<Props> = ({ navModel }) => {\n  const [selected, setSelected] = useState<LibraryElementDTO | undefined>(undefined);\n\n  return (\n    <Page navModel={navModel}>\n      <Page.Contents>\n        <LibraryPanelsSearch onClick={setSelected} showSecondaryActions showSort showPanelFilter showFolderFilter />\n        {selected ? <OpenLibraryPanelModal onDismiss={() => setSelected(undefined)} libraryPanel={selected} /> : null}\n      </Page.Contents>\n    </Page>\n  );\n};\n\nexport default connect(mapStateToProps)(LibraryPanelsPage);\n","import { css } from '@emotion/css';\nimport { debounce } from 'lodash';\nimport React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';\nimport { locationService } from '@grafana/runtime';\nimport { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';\n\nimport { DashboardSearchHit } from '../../../search/types';\nimport { getConnectedDashboards, getLibraryPanelConnectedDashboards } from '../../state/api';\nimport { LibraryElementDTO } from '../../types';\n\nexport interface OpenLibraryPanelModalProps {\n  onDismiss: () => void;\n  libraryPanel: LibraryElementDTO;\n}\n\nexport function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPanelModalProps): JSX.Element {\n  const styles = useStyles2(getStyles);\n  const [loading, setLoading] = useState(false);\n  const [connected, setConnected] = useState(0);\n  const [option, setOption] = useState<SelectableValue<DashboardSearchHit> | undefined>(undefined);\n  useEffect(() => {\n    const getConnected = async () => {\n      const connectedDashboards = await getLibraryPanelConnectedDashboards(libraryPanel.uid);\n      setConnected(connectedDashboards.length);\n    };\n    getConnected();\n  }, [libraryPanel.uid]);\n  const loadOptions = useCallback(\n    (searchString: string) => loadOptionsAsync(libraryPanel.uid, searchString, setLoading),\n    [libraryPanel.uid]\n  );\n  const debouncedLoadOptions = useMemo(\n    () => debounce(loadOptions, 300, { leading: true, trailing: true }),\n    [loadOptions]\n  );\n  const onViewPanel = (e: MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    locationService.push(urlUtil.renderUrl(`/d/${option?.value?.uid}`, {}));\n  };\n\n  return (\n    <Modal title=\"View panel in dashboard\" onDismiss={onDismiss} onClickBackdrop={onDismiss} isOpen>\n      <div className={styles.container}>\n        {connected === 0 ? (\n          <span>Panel is not linked to a dashboard. Add the panel to a dashboard and retry.</span>\n        ) : null}\n        {connected > 0 ? (\n          <>\n            <p>\n              This panel is being used in{' '}\n              <strong>\n                {connected} {connected > 1 ? 'dashboards' : 'dashboard'}\n              </strong>\n              .Please choose which dashboard to view the panel in:\n            </p>\n            <AsyncSelect\n              isClearable\n              isLoading={loading}\n              defaultOptions={true}\n              loadOptions={debouncedLoadOptions}\n              onChange={setOption}\n              placeholder=\"Start typing to search for dashboard\"\n              noOptionsMessage=\"No dashboards found\"\n            />\n          </>\n        ) : null}\n      </div>\n      <Modal.ButtonRow>\n        <Button variant=\"secondary\" onClick={onDismiss} fill=\"outline\">\n          Cancel\n        </Button>\n        <Button onClick={onViewPanel} disabled={!Boolean(option)}>\n          {option ? `View panel in ${option?.label}...` : 'View panel in dashboard...'}\n        </Button>\n      </Modal.ButtonRow>\n    </Modal>\n  );\n}\n\nasync function loadOptionsAsync(uid: string, searchString: string, setLoading: (loading: boolean) => void) {\n  setLoading(true);\n  const searchHits = await getConnectedDashboards(uid);\n  const options = searchHits\n    .filter((d) => d.title.toLowerCase().includes(searchString.toLowerCase()))\n    .map((d) => ({ label: d.title, value: d }));\n  setLoading(false);\n\n  return options;\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    container: css``,\n  };\n}\n"],"names":["mapStateToProps","state","navModel","getNavModel","navIndex","LibraryPanelsPage","connect","undefined","selected","setSelected","useState","onClick","showSecondaryActions","showSort","showPanelFilter","showFolderFilter","onDismiss","libraryPanel","OpenLibraryPanelModal","styles","useStyles2","getStyles","loading","setLoading","connected","setConnected","option","setOption","useEffect","async","connectedDashboards","getLibraryPanelConnectedDashboards","uid","length","getConnected","loadOptions","useCallback","searchString","options","getConnectedDashboards","filter","d","title","toLowerCase","includes","map","label","value","loadOptionsAsync","debouncedLoadOptions","useMemo","debounce","leading","trailing","Modal","onClickBackdrop","isOpen","className","container","AsyncSelect","isClearable","isLoading","defaultOptions","onChange","placeholder","noOptionsMessage","Button","variant","fill","e","preventDefault","locationService","urlUtil","disabled","Boolean","theme","css"],"sourceRoot":""}