Skip to content

Commit

Permalink
Merge pull request #315 from CMSgov/QPPA-9269
Browse files Browse the repository at this point in the history
QPPA-9269: update design systems to v10
  • Loading branch information
ckawell-sb authored Jul 1, 2024
2 parents c4ee4f7 + 77bf7d5 commit fc0ee10
Show file tree
Hide file tree
Showing 26 changed files with 1,927 additions and 352 deletions.
1,967 changes: 1,769 additions & 198 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
},
"homepage": "https://cmsgov.github.io/qpp-submissions-docs",
"dependencies": {
"@cmsgov/design-system": "5.0.2",
"@cmsgov/design-system": "10.1.1",
"@vitejs/plugin-react": "4.2.1",
"@xzar90/react-router-hash-link": "6.0.4",
"core-js": "3.36.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Footer = ({ openModal }: { openModal: CallableFunction }) => {
<div className='logo-container'>
<img className='qpp-logo' src={`${envConfig.qppCmsUrl}/images/qpp_logo_reversed.png`} alt='qpp logo' />
</div>
<ul>
<ul className='ds-u-display--block'>
<li>
<ExternalLink href={`${envConfig.qppCmsUrl}/developers`} text='Developer Tools' />
</li>
Expand All @@ -26,7 +26,7 @@ const Footer = ({ openModal }: { openModal: CallableFunction }) => {
<a href='#modal-subscribe' data-toggle='modal' data-target='#modal-subscribe' onClick={() => openModal()}>Subscribe to Updates</a>
</li>
</ul>
<ul className='small'>
<ul className='ds-u-display--block small'>
<li>
<ExternalLink href={`${envConfig.qppCmsUrl}/privacy`} text='CMS Privacy Notice' />
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/guides/advanced-tutorial.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const AdvancedTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) =>
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}} id='advanced-tutorial'>Tutorial: Add and update data via API</h2>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}} id='advanced-tutorial'>Tutorial: Add and update data via API</h2>
<p>
In the <LinkToId to='/tutorial' text='first tutorial' /> we covered how to create a measurement set and retrieve the score in two different API requests. We're now going to build on the previous tutorial by adding another measure to the measurement set we created in the previous tutorial. All of these examples serve to illustrate how the Submissions API can make it easier to react to and fix issues that arise.
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ const AuthenticationAndAuthorization: React.FC<DocPageProps> = ({dataTestId}: Do
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 08/26/2020</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}}>Submissions API Authentication and Authorization</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Submissions API Authentication and Authorization</h2>
<p className='ds-text-body--md'>
To submit directly to QPP using the Submissions API, Qualified Registries and QCDRs use CMS-provided tokens in their API calls. You can learn more about the Submissions API authentication and authorization model for Qualified Registries and QCDRs <LinkToId to='/qualified-registries-and-qcdrs' text='here' />.
</p>

<p className='ds-text'>
<p className='ds-text-body--md'>
We support OAuth Authentication, which provides client applications with secure, delegated access to the Submissions API. You can learn more about using OAuth with the Submissions API <LinkToId to='/getting-started-with-oauth' text='here' />.
</p>
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/guides/basic-tutorial.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}}>Tutorial: Create and Score Data via API</h2>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Tutorial: Create and Score Data via API</h2>
<p>
The Submissions API is an easy way to manage your performance data with CMS. Performance data is organized into submissions, which can have many measurements. Measurements within a submission are also grouped by category (e.g. quality) and submission method (e.g. registry) and program name (e.g. mips) into measurement sets.
</p>
Expand All @@ -18,7 +18,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
Let's walk through an example of how you might submit performance data as a registry API user!
</p>

<h3 className='ds-h3' id='creating-a-measurement-set'>Create a new measurement set</h3>
<h3 className='ds-text-heading--xl' id='creating-a-measurement-set'>Create a new measurement set</h3>
<p>
We need to create a <em>measurement set</em> first. We can do that by asking the API to create a measurement set record in the CMS database. In API terms, this means making a <code>POST</code> (synonym for <em>create</em>) request to the <code>/measurement-sets</code> endpoint.
</p>
Expand All @@ -34,7 +34,7 @@ const BasicTutorial: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
<ApiExample data={apiExamples.measurementSets} />
<CodeTab data={steps.basic1} />

<h3 className='ds-h3' id='scoring-a-submission'>Scoring a submission</h3>
<h3 className='ds-text-heading--xl' id='scoring-a-submission'>Scoring a submission</h3>
<p>
With the submission <code>id</code> we were given, we can ask the API to calculate the submission score with a GET request. We don't need to include a request body this time since we're only interested in retrieving the score, and CMS doesn't need any information other than the submission <code>id</code>.
</p>
Expand Down
44 changes: 22 additions & 22 deletions src/app/components/guides/getting-started-with-oauth.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,41 +6,41 @@ const GettingStartedUsingQppOauth: React.FC<DocPageProps> = ({dataTestId}: DocPa
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 08/31/2023</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}}>Getting Started Using QPP OAuth</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Getting Started Using QPP OAuth</h2>
<p className='ds-text-body--md'>
Using OAuth with the Submissions API allows QPP participants to use their own QPP credentials to login through your application to submit their data to and view performance feedback from QPP. Before you can request production access, you will need to use the Developer Preview Environment to build, test and demo your OAuth application.
</p>

<h2 className='ds-h2' id='oauth'>Using OAuth in the Developer Preview</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' id='oauth'>Using OAuth in the Developer Preview</h2>
<p className='ds-text-body--md'>
To use the QPP Submissions API with OAuth, you must create a Developer Preview account and register the application.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Create an account for Developer Preview at <ExternalLink href={envConfig.qppCmsPreviewUrl} />.
</p>

<h3 className='ds-h3'>Connect to EHR or reporting application</h3>
<p className='ds-text'>
<h3 className='ds-text-heading--xl'>Connect to EHR or reporting application</h3>
<p className='ds-text-body--md'>
Log in to Developer Preview (<ExternalLink href={envConfig.qppCmsPreviewUrl} />).
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Locate your EHR (search by the EHR name as it appears in the <ExternalLink href={envConfig.chplHealthItUrl} text='CHPL database' />).
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
If you cannot locate your EHR or are a registry user, create one manually.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
After requesting the role, it may take a few minutes to populate.
</p>

<h3 className='ds-h3'>Register an Application</h3>
<p className='ds-text'>
<h3 className='ds-text-heading--xl'>Register an Application</h3>
<p className='ds-text-body--md'>
Once you are connected, you can use the OAuth APIs directly on the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/auth/docs/#/OAuth`} text='Auth API' />. Also, Development Preview contains a UI (<ExternalLink href={`${envConfig.qppCmsPreviewUrl}/user/applications`} text='here' />) where you can create and manage your OAuth applications.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Registering and testing your application within the Developer Preview is required prior to being granted production OAuth access.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
To register the application, you will need:
</p>
<ul>
Expand All @@ -53,36 +53,36 @@ const GettingStartedUsingQppOauth: React.FC<DocPageProps> = ({dataTestId}: DocPa
Terms of Service and Privacy Policy are optional for the test environment, but required for production.
</li>
</ul>
<p className='ds-text'>
<p className='ds-text-body--md'>
In the test environment, a registered application is assigned a client ID and, if applicable, a client secret. The secret should only be used if it can be kept confidential, such as for communication between your server and the Submissions API.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Additional support along with a sample OAuth Client, can be found in the QPP Github at: <ExternalLink href='https://github.com/CMSgov/qpp-submissions-docs/tree/master/oauth_sample' />.
</p>

<h2 className='ds-h2' id='create-user'>Create test users in the Developer Preview</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' id='create-user'>Create test users in the Developer Preview</h2>
<p className='ds-text-body--md'>
To support Developer Preview integration and testing, we created the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/synthetic-data/docs/index.html`} text='Test Data Service' />. Using this API, you can reserve specific scenarios in the Test Data Service to test granting access to their QPP authorizations and try out different special scoring scenarios. Please visit the Interactive Documentation to learn more about setting up test users in Developer Preview.
</p>

<h2 className='ds-h2' id='production-api-access'>Production API Access</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' id='production-api-access'>Production API Access</h2>
<p className='ds-text-body--md'>
To submit data via OAuth and the Submissions API during the submission window, your application must be approved for production use by QPP. To apply for production access, you must demonstrate your application to QPP and attest that your organization:
</p>
<ul>
<li>Is a US-based company</li>
<li>Agrees to CMS API Terms of Use</li>
<li>Participated in the CMS QPP Submissions API Developer Preview</li>
</ul>
<p className='ds-text'>
<p className='ds-text-body--md'>
You will also be asked to provide:
</p>
<ul>
<li>A company website</li>
<li>A point of contact</li>
<li>URL to Application Privacy or Terms of Use</li>
</ul>
<p className='ds-text'>
<p className='ds-text-body--md'>
To request production access, please email the QPP Help Desk at [email protected] to set up a demonstration with the QPP team. In order to have sufficient time to go through the approval process, requests for production access for an upcoming submission period should be made no later than November 1 prior to submissions opening.
</p>
</div>
Expand Down
34 changes: 17 additions & 17 deletions src/app/components/guides/qualified-registries-and-qcdrs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,42 +59,42 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 07/01/2021</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}}>Qualified Registries and QCDRs</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>Qualified Registries and QCDRs</h2>
<p className='ds-text-body--md'>
Qualified Registries and QCDRs entities that are authorized by the Centers for Medicare &amp; Medicaid Services (CMS) to submit Quality Measures, Promoting Interoperability Measures, and/or Improvement Activities on behalf of MIPS eligible clinicians, groups, and/or virtual groups for a specified performance year can submit directly to the Submissions API using an API token.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Tokens are specific to your organization and are specific to the environment within the Submissions API. Developer Preview tokens are for testing against the Submissions API in the Developer Preview environment. Production token are for submitting during the specific performance year's submissions window to the production environment of the Submissions API.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
If you are a Registry or QCDR using the Developer Preview, you have an API key that is associated with an 'organization'. This affects what endpoints you are authorized to use, and what behavior each endpoint has.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
At a high level, your API key allows you to create and edit data using the <code>/measurement-sets</code> and <code>/measurements</code> endpoints. You cannot create data using the <code>/submissions</code> endpoint. For more information about what you're authorized to do with the Submissions API, click <LinkToId to='/developer-preview#authorization' text='here' offset='130' />.
</p>

<h2 className='ds-h2' id='authentication'>Authentication</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' id='authentication'>Authentication</h2>
<p className='ds-text-body--md'>
You must authenticate your account when using the Submissions API. Authenticate via bearer auth by adding your API token to the header of every request using the key value: <strong>Authorization: Bearer [YOUR API TOKEN]</strong>.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
API keys carry many privileges, and must not be shared in publicly accessible areas such as GitHub and in client-side code. Even within organizations, access must be limited to staff embedding it in software.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Your API key carries many privileges, so be sure to keep it secret! Do not share your secret API key in publicly accessible areas such GitHub, client-side code, and so forth.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
All API requests must be made over HTTPS. Calls made over plain HTTP will fail. API requests in the Developer Preview without authentication will also fail.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
Please see <ExternalLink href={`${envConfig.cmsGithubIo}/qpp-developer-preview-docs/getting-started`} text='Getting Started'/> for instructions on how to download your registry token.
</p>

<h2 className='ds-h2' id='authorization'>Authorization</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' id='authorization'>Authorization</h2>
<p className='ds-text-body--md'>
If you are a current Qualified Registry or QCDR using the Submissions API, you have an API key that is associated with an 'organization'. This affects what endpoints you are authorized to use, and what behavior each endpoint has.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
In general, if you have an organization-type API key, you can:
</p>
<ul>
Expand All @@ -103,7 +103,7 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
<li>View scores based on data you've submitted</li>
</ul>

<p className='ds-text'>
<p className='ds-text-body--md'>
Below is a comprehensive list of how each endpoint behaves if you are using an organization-type API key:
</p>
<table className='ds-c-table ds-c-table--borderless ds-u-font-size--small'>
Expand All @@ -126,8 +126,8 @@ const QualifiedRegistriesAndQcdrs: React.FC<DocPageProps> = ({dataTestId}: DocPa
</tbody>
</table>

<h2 className='ds-h2'>Retrieve your API tokens</h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl'>Retrieve your API tokens</h2>
<p className='ds-text-body--md'>
To retrieve your Developer Preview and production tokens, you must have a HARP account that has a Security Official role for your Qualified Registry or QCDR. Please see <ExternalLink href={`${envConfig.cmsGithubIo}/qpp-developer-preview-docs/getting-started`} text='Getting Started'/> for instructions on how to download your registry token..
</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/app/components/guides/submitting-to-submissions-api.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ const SubmittingToQppSubmissionApi: React.FC<DocPageProps> = ({dataTestId}: DocP
return (
<div data-testid={dataTestId}>
<p className='qpp-docs-page-updated'>Last Updated: 01/05/2021</p> {/* IMPORTANT: update this Last-Updated value if you have made any changes to this page's content. */}
<h2 className='ds-h2' style={{marginTop: 0}}>The Submissions API enables submissions and real-time performance scoring of Quality Payment Program (QPP) data. </h2>
<p className='ds-text'>
<h2 className='ds-text-heading--2xl' style={{marginTop: 0}}>The Submissions API enables submissions and real-time performance scoring of Quality Payment Program (QPP) data. </h2>
<p className='ds-text-body--md'>
The Submissions API is a RESTful API. It has predictable, resource-oriented URLs, and uses HTTP response codes to indicate API errors. It uses standard HTTP features, like HTTPS authentication and HTTP verbs, which are understood by off-the-shelf HTTP clients.
</p>
<p className='ds-text'>
<p className='ds-text-body--md'>
The Submissions API supports cross-origin resource sharing, allowing you to interact securely with the API from a client-side web application (though you should never expose your secret API key in any public website's client-side code).
</p>
<p className='ds-text'>API responses are returned in JSON, including errors.</p>
<p className='ds-text-body--md'>API responses are returned in JSON, including errors.</p>

<h2 className='ds-h2'>Object Types</h2>
<h2 className='ds-text-heading--2xl'>Object Types</h2>
<ul>
<li>
Submissions: A submission object contains any performance data submitted on behalf of a single MIPS-eligible clinician, practice or group.
Expand All @@ -28,7 +28,7 @@ const SubmittingToQppSubmissionApi: React.FC<DocPageProps> = ({dataTestId}: DocP
</li>
</ul>

<p className='ds-text'>
<p className='ds-text-body--md'>
Visit the <ExternalLink href={`${envConfig.qppCmsPreviewUrl}/api/submissions/public/docs`} text='Interactive Documentation' /> to learn more about the endpoints available in the Submissions API.
</p>
</div>
Expand Down
Loading

0 comments on commit fc0ee10

Please sign in to comment.