-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
310 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
src/views/open-api-docs-view-v2/components/sidebar/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
/** | ||
* Copyright (c) HashiCorp, Inc. | ||
* SPDX-License-Identifier: MPL-2.0 | ||
*/ | ||
|
||
// Components | ||
import SidebarBackToLink from '@components/sidebar/components/sidebar-back-to-link' | ||
import { SidebarNavMenuItem } from '@components/sidebar/components' | ||
// Types | ||
import type { OpenApiNavItem } from 'views/open-api-docs-view-v2/types' | ||
// Styles | ||
import s from './style.module.css' | ||
|
||
/** | ||
* TODO: lift this content up so it can vary page-to-page | ||
*/ | ||
const SHIM_CONTENT = { | ||
backToLink: { | ||
text: 'HashiCorp Cloud Platform', | ||
href: '/hcp', | ||
}, | ||
} | ||
|
||
export function OpenApiV2SidebarContents({ navItemLanding, navItemGroups }) { | ||
/** | ||
* TODO: refine generation of nav items, and then render them properly, | ||
* for now just messily rendering some links to enable navigation. | ||
* | ||
* Note: `next/link` will work in prod, since we'll be doing | ||
* `getStaticProps`... but in the preview tool, `next/link` seems to | ||
* make the preview experience janky, seemingly requiring reloads after | ||
* each navigation, maybe related to use of getServerSideProps? Not yet | ||
* sure how to resolve this, there's probably some clever solution that | ||
* might be possible... | ||
*/ | ||
return ( | ||
<> | ||
<SidebarBackToLink | ||
text={SHIM_CONTENT.backToLink.text} | ||
href={SHIM_CONTENT.backToLink.text} | ||
/> | ||
<ul className={s.listResetStyles}> | ||
<SidebarNavMenuItem item={navItemLanding} /> | ||
{navItemGroups.map((navItemGroup) => { | ||
return ( | ||
<ul className={s.listResetStyles}> | ||
<SidebarNavMenuItem item={{ heading: navItemGroup.title }} /> | ||
<li> | ||
<SidebarNavMenuItemsList items={navItemGroup.items} /> | ||
</li> | ||
</ul> | ||
) | ||
})} | ||
</ul> | ||
</> | ||
) | ||
} | ||
/** | ||
* Renders an unordered list of nav items, with list styles reset. | ||
*/ | ||
export function SidebarNavMenuItemsList({ | ||
items, | ||
}: { | ||
items: OpenApiNavItem[] | ||
}) { | ||
return ( | ||
<ul className={s.listResetStyles}> | ||
{items.map((item: OpenApiNavItem, index: number) => ( | ||
// eslint-disable-next-line react/no-array-index-key | ||
<SidebarNavMenuItem item={item} key={index} /> | ||
))} | ||
</ul> | ||
) | ||
} |
6 changes: 6 additions & 0 deletions
6
src/views/open-api-docs-view-v2/components/sidebar/style.module.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
.listResetStyles { | ||
list-style: none; | ||
margin: 0; | ||
padding: 0; | ||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
src/views/open-api-docs-view-v2/utils/build-operation-groups.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
/** | ||
* Copyright (c) HashiCorp, Inc. | ||
* SPDX-License-Identifier: MPL-2.0 | ||
*/ | ||
|
||
interface OperationGroup { | ||
title: string | ||
operationObjects: $TSFixMe | ||
} | ||
|
||
/** | ||
* TODO: implement properly and add comments, | ||
* messing around for now. | ||
*/ | ||
export function buildOperationGroups( | ||
operationGroupings: $TSFixMe, | ||
operationObjects: $TSFixMe | ||
): OperationGroup[] { | ||
const operationGroups: OperationGroup[] = [] | ||
// | ||
for (const { title, operationIds } of operationGroupings) { | ||
/** | ||
* Match each operationId to an operation object | ||
* If given operationId doesn't have a match... error? warn? | ||
*/ | ||
const matchedOperationObjects = [] | ||
for (const operationId of operationIds) { | ||
const matchedOperationObject = operationObjects.find( | ||
(operationObject) => operationObject.operationId === operationId | ||
) | ||
console.log({ operationId, matchedOperationObject }) | ||
if (matchedOperationObject) { | ||
matchedOperationObjects.push(matchedOperationObject) | ||
} else { | ||
console.error( | ||
`No operation object found for operationId: ${operationId}. Skipping.` | ||
) | ||
} | ||
} | ||
// | ||
if (matchedOperationObjects.length === 0) { | ||
console.error( | ||
`No operation objects found for group: ${title}. Skipping group.` | ||
) | ||
} else { | ||
operationGroups.push({ title, operationObjects: matchedOperationObjects }) | ||
} | ||
} | ||
// Gather ids from all operation groups | ||
const allUsedOperationIds = operationGroups.reduce( | ||
(acc, group) => | ||
acc.concat(group.operationObjects.map((obj) => obj.operationId)), | ||
[] | ||
) | ||
// Check for any operation objects that weren't used | ||
const unusedOperationObjects = operationObjects.filter( | ||
(obj) => !allUsedOperationIds.includes(obj.operationId) | ||
) | ||
/** | ||
* If we have operation objects that were not included in a group, | ||
* create an "Other" group to hold any unused operation objects. | ||
*/ | ||
if (unusedOperationObjects.length > 0) { | ||
operationGroups.push({ | ||
title: 'Other', // TODO: make this configurable? Arg with default value? | ||
operationObjects: unusedOperationObjects, | ||
}) | ||
} | ||
// | ||
return operationGroups | ||
} |
Oops, something went wrong.