component---src-pages-complex-reuse-page-datasource-mdx-456a41eceb2201fdaf51.js.map

{"version":3,"file":"component---src-pages-complex-reuse-page-datasource-mdx-456a41eceb2201fdaf51.js","mappings":"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","sources":["webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/EditLink.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/EditLink/EditLink.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/PageTabs/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/index.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/LastModifiedDate.js","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/components/LastModifiedDate/last-modified-date.module.scss","webpack://mas-playbook/./node_modules/gatsby-theme-carbon/src/templates/Default.js","webpack://mas-playbook/./src/pages/complex/reuse-page-datasource.mdx"],"sourcesContent":["import PageHeader from './PageHeader';\n\nexport default PageHeader;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport * as styles from './PageHeader.module.scss';\n\nconst PageHeader = ({ title, theme, tabs = [] }) => (\n  <div\n    className={cx(styles.pageHeader, {\n      [styles.withTabs]: tabs.length,\n      [styles.darkMode]: theme === 'dark',\n    })}>\n    <div className=\"bx--grid\">\n      <div className=\"bx--row\">\n        <div className=\"bx--col-lg-12\">\n          <h1 id=\"page-title\" className={styles.text}>\n            {title}\n          </h1>\n        </div>\n      </div>\n    </div>\n  </div>\n);\n\nPageHeader.propTypes = {\n  /**\n   * Specify the title for the page\n   */\n  title: PropTypes.node,\n};\n\nexport default PageHeader;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"PageHeader-module--bx--text-truncate--end--b8JtW\";\nexport var bxTextTruncateFront = \"PageHeader-module--bx--text-truncate--front--WwZFh\";\nexport var darkMode = \"PageHeader-module--dark-mode--WCeH8\";\nexport var pageHeader = \"PageHeader-module--page-header--NqfPe\";\nexport var text = \"PageHeader-module--text--Er2EO\";\nexport var withTabs = \"PageHeader-module--with-tabs--vbQ-W\";","import EditLink from './EditLink';\n\nexport default EditLink;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { graphql, useStaticQuery } from 'gatsby';\n\nimport { link, row } from './EditLink.module.scss';\n\nconst EditLink = ({ relativePagePath, repository: repositoryProp }) => {\n  const {\n    site: {\n      siteMetadata: { repository },\n    },\n  } = useStaticQuery(graphql`\n    query REPOSITORY_QUERY {\n      site {\n        siteMetadata {\n          repository {\n            baseUrl\n            subDirectory\n            branch\n          }\n        }\n      }\n    }\n  `);\n\n  const { baseUrl, subDirectory, branch } = repositoryProp || repository;\n\n  const href = `${baseUrl}/edit/${branch}${subDirectory}/src/pages${relativePagePath}`;\n\n  return baseUrl ? (\n    <div className={`bx--row ${row}`}>\n      <div className=\"bx--col\">\n        <a className={link} href={href}>\n          Edit this page on GitHub\n        </a>\n      </div>\n    </div>\n  ) : null;\n};\n\nEditLink.propTypes = {\n  repository: PropTypes.shape({\n    baseUrl: PropTypes.string,\n    subDirectory: PropTypes.string,\n    branch: PropTypes.string,\n  }),\n  relativePagePath: PropTypes.string,\n};\n\nexport default EditLink;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"EditLink-module--bx--text-truncate--end--uI0cF\";\nexport var bxTextTruncateFront = \"EditLink-module--bx--text-truncate--front--HxjcS\";\nexport var link = \"EditLink-module--link--IDrl1\";\nexport var row = \"EditLink-module--row--BEmSX\";","import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Link } from 'gatsby';\nimport slugify from 'slugify';\nimport cx from 'classnames';\n\nimport {\n  tabsContainer,\n  list,\n  selectedItem,\n  listItem,\n  link,\n} from './PageTabs.module.scss';\n\nexport default class PageTabs extends React.Component {\n  render() {\n    const { title, tabs, slug } = this.props;\n    const currentTab = slug.split('/').filter(Boolean).slice(-1)[0];\n\n    const pageTabs = tabs.map((tab) => {\n      const slugifiedTab = slugify(tab, { lower: true, strict: true });\n      const selected = slugifiedTab === currentTab;\n      // matches with or without trailing slash: /?\n      // matches with or without hash link: (#.*)?\n      const currentTabRegex = new RegExp(`${currentTab}/?(#.*)?$`);\n      const href = slug.replace(currentTabRegex, slugifiedTab);\n      return (\n        <li key={tab} className={cx({ [selectedItem]: selected }, listItem)}>\n          <Link className={link} to={`${href}`}>\n            {tab}\n          </Link>\n        </li>\n      );\n    });\n\n    return (\n      <div className={tabsContainer}>\n        <div className=\"bx--grid\">\n          <div className=\"bx--row\">\n            <div className=\"bx--col-lg-12 bx--col-no-gutter\">\n              <nav aria-label={title}>\n                <ul className={list}>{pageTabs}</ul>\n              </nav>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nPageTabs.propTypes = {\n  tabs: PropTypes.array,\n  slug: PropTypes.string,\n};\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"PageTabs-module--bx--text-truncate--end--OC59x\";\nexport var bxTextTruncateFront = \"PageTabs-module--bx--text-truncate--front--5I6-L\";\nexport var link = \"PageTabs-module--link--Kz-7R\";\nexport var list = \"PageTabs-module--list--xLqxG\";\nexport var listItem = \"PageTabs-module--list-item--024o6\";\nexport var selectedItem = \"PageTabs-module--selected-item--aBB0K\";\nexport var tabsContainer = \"PageTabs-module--tabs-container--Cdfzw\";","import PageTabs from './PageTabs';\n\nexport default PageTabs;\n","import LastModifiedDate from './LastModifiedDate';\n\nexport default LastModifiedDate;\n","import React from 'react';\nimport { Row, Column } from '../Grid';\nimport * as styles from './last-modified-date.module.scss';\n\nconst LastModifiedDate = ({ date }) => {\n  const options = {\n    day: '2-digit',\n    year: 'numeric',\n    month: 'long',\n  };\n\n  const lastModified = new Date(date);\n\n  return date ? (\n    <Row className={styles.row}>\n      <Column>\n        <div className={styles.text}>\n          Page last updated: {lastModified.toLocaleDateString('en-GB', options)}\n          {/* // https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html */}\n        </div>\n      </Column>\n    </Row>\n  ) : null;\n};\nexport default LastModifiedDate;\n","// extracted by mini-css-extract-plugin\nexport var bxTextTruncateEnd = \"last-modified-date-module--bx--text-truncate--end--QgCc7\";\nexport var bxTextTruncateFront = \"last-modified-date-module--bx--text-truncate--front--kel8a\";\nexport var row = \"last-modified-date-module--row--XJoYQ\";\nexport var text = \"last-modified-date-module--text--ogPQF\";","import React from 'react';\nimport slugify from 'slugify';\nimport { useStaticQuery, graphql } from 'gatsby';\n\nimport Utils from '../components/Utils';\nimport Layout from '../components/Layout';\nimport PageHeader from '../components/PageHeader';\nimport EditLink from '../components/EditLink';\nimport NextPrevious from '../components/NextPrevious';\nimport PageTabs from '../components/PageTabs';\nimport Main from '../components/Main';\nimport useMetadata from '../util/hooks/useMetadata';\nimport LastModifiedDate from '../components/LastModifiedDate';\n\nconst Default = ({ pageContext, children, location, Title }) => {\n  const { frontmatter = {}, relativePagePath, titleType } = pageContext;\n  const {\n    tabs,\n    title,\n    theme: frontmatterTheme,\n    description,\n    keywords,\n    date,\n  } = frontmatter;\n\n  const { interiorTheme } = useMetadata();\n\n  // get the path prefix if it exists\n  const {\n    site: { pathPrefix },\n  } = useStaticQuery(graphql`\n    query PATH_PREFIX_QUERY {\n      site {\n        pathPrefix\n      }\n    }\n  `);\n\n  // let gatsby handle prefixing\n  const slug = pathPrefix\n    ? location.pathname.replace(pathPrefix, '')\n    : location.pathname;\n\n  const getCurrentTab = () => {\n    if (!tabs) return '';\n    return (\n      slug.split('/').filter(Boolean).slice(-1)[0] ||\n      slugify(tabs[0], { lower: true })\n    );\n  };\n\n  const currentTab = getCurrentTab();\n\n  const theme = frontmatterTheme || interiorTheme;\n\n  return (\n    <Layout\n      tabs={tabs}\n      homepage={false}\n      theme={theme}\n      pageTitle={title}\n      pageDescription={description}\n      pageKeywords={keywords}\n      titleType={titleType}>\n      <PageHeader\n        title={Title ? <Title /> : title}\n        label=\"label\"\n        tabs={tabs}\n        theme={theme}\n      />\n      {tabs && (\n        <PageTabs\n          title={title}\n          slug={slug}\n          tabs={tabs}\n          currentTab={currentTab}\n        />\n      )}\n      <Main padded>\n        {children}\n        <EditLink relativePagePath={relativePagePath} />\n        <LastModifiedDate date={date} />\n      </Main>\n      <NextPrevious\n        pageContext={pageContext}\n        location={location}\n        slug={slug}\n        tabs={tabs}\n        currentTab={currentTab}\n      />\n      <Utils />\n    </Layout>\n  );\n};\n\nexport default Default;\n","import * as React from 'react'\n  /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\n\nimport DefaultLayout from \"/home/travis/build/maximo-app-framework/configuration-practices-documentation/node_modules/gatsby-theme-carbon/src/templates/Default.js\";\nexport const _frontmatter = {};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n  components,\n  ...props\n}) {\n  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n    <h2>{`About this task`}</h2>\n    <p>{`This is an sample to show how to use an existing datasource’s controller from a page and reuse in another page. In thise case there is a existing WorkOrderCreateController to be reused on a new Quick Reporting Page for Techmobile.\nIt is tempting to think on moving out the dsCreateWO datasource of the page and up to the application. The problem with moving the datasource and re-using the WorkOrderCreateController is that the controller code has references to dsCreateWO that require it to be in the page.\nInstead, the developers should have used this.app.findDatasource(‘dsCreateWo’); to find the datasource.\nTo get around this problem without requiring a change to the Techmobile application, the AppCustomizations.js can trap the pageInitialized call for the new Quick Reporting page, and set the existing datasource as part of the new page.`}</p>\n    <h2>{`Procedure`}</h2>\n    <h3>{`Step 1: In pageInitialized event, check for the right page, ensure the datasource does not exist in the page, fetch its reference using `}<inlineCode parentName=\"h3\">{`this.app.findDatasource`}</inlineCode>{` and set it to the new page.`}</h3>\n    <pre><code parentName=\"pre\" {...{\n        \"className\": \"language-js\"\n      }}>{`pageInitialized(page) {\n  if (page.name === 'quickReporting') {\n    if (page.datsources['dsCreateWO'] === undefined) {\n      page.datasource['dsCreateWO'] = this.app.findDatasource('dsCreateWO');\n    }\n  }\n}\n`}</code></pre>\n\n    </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n      "],"names":["title","theme","tabs","className","cx","length","id","relativePagePath","repositoryProp","repository","useStaticQuery","site","siteMetadata","baseUrl","subDirectory","href","branch","PageTabs","render","this","props","slug","currentTab","split","filter","Boolean","slice","pageTabs","map","tab","slugifiedTab","slugify","lower","strict","selected","currentTabRegex","RegExp","replace","key","Link","to","React","date","lastModified","Date","toLocaleDateString","day","year","month","pageContext","children","location","Title","frontmatter","titleType","frontmatterTheme","description","keywords","interiorTheme","useMetadata","pathPrefix","pathname","Layout","homepage","pageTitle","pageDescription","pageKeywords","label","Main","padded","NextPrevious","Utils","_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","mdxType","parentName","isMDXComponent"],"sourceRoot":""}