Update spaces with themes and documents #25
Conversation
WalkthroughThe update integrates new themes and documents across various components and services to enhance the user experience in HCM Show. This includes adding theme and document configurations to spaces, and updating the workspace component to utilize these configurations. Changes
Possibly related issues
Recent Review DetailsConfiguration used: CodeRabbit UI Files selected for processing (15)
Files skipped from review due to trivial changes (4)
Additional comments not posted (11)
TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| <style> | ||
| .my-doc { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin: 24px; | ||
| } | ||
| .my-doc h1 { | ||
| padding: 0px; | ||
| margin: 0px; | ||
| } | ||
| .my-doc h2 { | ||
| padding: 0px; | ||
| margin: 0px; | ||
| } | ||
| .my-doc p { | ||
| padding: 0px; | ||
| margin: 0px; | ||
| } | ||
| .left { | ||
| border-right: 1px solid #17B9A7; | ||
| margin-right: 48px; | ||
| padding-right: 66px; | ||
| width: 70%; | ||
| } | ||
| .right { | ||
| padding-top: 102px; | ||
| } | ||
| .right > div { | ||
| margin-bottom: 32px; | ||
| } | ||
| .box { | ||
| border: 1px solid #17B9A7; | ||
| padding: 8px; | ||
| margin-bottom: 12px; | ||
| border-radius: 8px; | ||
| box-shadow: 4px 4px 20px 0px #0000001F; | ||
| padding: 24px; | ||
| } | ||
| .box h2 { | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| } | ||
| .box p { | ||
| font-size: 14px; | ||
| } | ||
| .items > div { | ||
| display: flex; | ||
| flex-direction: row; | ||
| margin-bottom: 12px; | ||
| } | ||
| .items > div { | ||
| display: flex; | ||
| flex-direction: row; | ||
| align-items: center; | ||
| } | ||
| .items > div > svg { | ||
| width: 24px; | ||
| height: 24px; | ||
| margin-right: 6px; | ||
| } | ||
| </style> |
There was a problem hiding this comment.
Refactor inline CSS to external stylesheets for improved performance and maintainability.
The embedded CSS within the HTML content can lead to slower page load times and makes the document harder to maintain. Moving this CSS to an external stylesheet not only improves the loading time of the document but also allows for better caching strategies and easier maintenance. Here's a suggested refactor:
- <style>
- .my-doc { ... }
- ...
- </style>
+ Link to external stylesheetAnd then in a separate CSS file:
.my-doc { ... }
...| <p style="margin-bottom: 8px;">View the code for this workflow on Github</p> | ||
| <a href="https://github.com/FlatFilers/hcm-show-config/blob/main/workflows/project/index.ts" target="_blank" style="display: inline-flex; align-items: center; color: white; text-decoration: none; background-color: #000; padding: 16px 24px;">View on Github | ||
| <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 8px;"> | ||
| <g clip-path="url(#clip0_1519_7607)"> | ||
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8861 0.423218C5.99451 0.423218 0.42334 6.15238 0.42334 13.2401C0.42334 18.9058 3.99298 23.7016 8.94502 25.399C9.56416 25.5266 9.79094 25.1232 9.79094 24.7839C9.79094 24.4868 9.77053 23.4683 9.77053 22.4071C6.3037 23.1711 5.58176 20.8792 5.58176 20.8792C5.02462 19.3938 4.19911 19.012 4.19911 19.012C3.06441 18.2269 4.28176 18.2269 4.28176 18.2269C5.54043 18.3118 6.20089 19.5425 6.20089 19.5425C7.31492 21.4946 9.11007 20.943 9.83227 20.6034C9.93533 19.7758 10.2657 19.2029 10.6165 18.8847C7.8514 18.5875 4.94222 17.4842 4.94222 12.561C4.94222 11.1605 5.43712 10.0146 6.2213 9.12348C6.09757 8.80525 5.66416 7.48936 6.34528 5.72817C6.34528 5.72817 7.39757 5.38858 9.77028 7.04379C10.7861 6.76323 11.8337 6.62051 12.8861 6.61931C13.9384 6.61931 15.0111 6.76801 16.0017 7.04379C18.3746 5.38858 19.4269 5.72817 19.4269 5.72817C20.108 7.48936 19.6744 8.80525 19.5506 9.12348C20.3555 10.0146 20.83 11.1605 20.83 12.561C20.83 17.4842 17.9208 18.5662 15.1351 18.8847C15.5892 19.2878 15.981 20.0516 15.981 21.2612C15.981 22.98 15.9606 24.3594 15.9606 24.7836C15.9606 25.1232 16.1876 25.5266 16.8065 25.3993C21.7585 23.7013 25.3282 18.9058 25.3282 13.2401C25.3486 6.15238 19.757 0.423218 12.8861 0.423218Z" fill="white"/> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_1519_7607"> | ||
| <rect width="25" height="25" fill="white" transform="translate(0.42334 0.423218)"/> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| </a> |
There was a problem hiding this comment.
Ensure external links have rel="noopener noreferrer" to enhance security.
The anchor tag linking to GitHub should include rel="noopener noreferrer" to prevent potential security vulnerabilities related to opening a new tab. This is a small change that enhances the security of your application:
- <a href="https://github.com/FlatFilers/hcm-show-config/blob/main/workflows/project/index.ts" target="_blank">
+ <a href="https://github.com/FlatFilers/hcm-show-config/blob/main/workflows/project/index.ts" target="_blank" rel="noopener noreferrer">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| <p style="margin-bottom: 8px;">View the code for this workflow on Github</p> | |
| <a href="https://github.com/FlatFilers/hcm-show-config/blob/main/workflows/project/index.ts" target="_blank" style="display: inline-flex; align-items: center; color: white; text-decoration: none; background-color: #000; padding: 16px 24px;">View on Github | |
| <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 8px;"> | |
| <g clip-path="url(#clip0_1519_7607)"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8861 0.423218C5.99451 0.423218 0.42334 6.15238 0.42334 13.2401C0.42334 18.9058 3.99298 23.7016 8.94502 25.399C9.56416 25.5266 9.79094 25.1232 9.79094 24.7839C9.79094 24.4868 9.77053 23.4683 9.77053 22.4071C6.3037 23.1711 5.58176 20.8792 5.58176 20.8792C5.02462 19.3938 4.19911 19.012 4.19911 19.012C3.06441 18.2269 4.28176 18.2269 4.28176 18.2269C5.54043 18.3118 6.20089 19.5425 6.20089 19.5425C7.31492 21.4946 9.11007 20.943 9.83227 20.6034C9.93533 19.7758 10.2657 19.2029 10.6165 18.8847C7.8514 18.5875 4.94222 17.4842 4.94222 12.561C4.94222 11.1605 5.43712 10.0146 6.2213 9.12348C6.09757 8.80525 5.66416 7.48936 6.34528 5.72817C6.34528 5.72817 7.39757 5.38858 9.77028 7.04379C10.7861 6.76323 11.8337 6.62051 12.8861 6.61931C13.9384 6.61931 15.0111 6.76801 16.0017 7.04379C18.3746 5.38858 19.4269 5.72817 19.4269 5.72817C20.108 7.48936 19.6744 8.80525 19.5506 9.12348C20.3555 10.0146 20.83 11.1605 20.83 12.561C20.83 17.4842 17.9208 18.5662 15.1351 18.8847C15.5892 19.2878 15.981 20.0516 15.981 21.2612C15.981 22.98 15.9606 24.3594 15.9606 24.7836C15.9606 25.1232 16.1876 25.5266 16.8065 25.3993C21.7585 23.7013 25.3282 18.9058 25.3282 13.2401C25.3486 6.15238 19.757 0.423218 12.8861 0.423218Z" fill="white"/> | |
| </g> | |
| <defs> | |
| <clipPath id="clip0_1519_7607"> | |
| <rect width="25" height="25" fill="white" transform="translate(0.42334 0.423218)"/> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| </a> | |
| <p style="margin-bottom: 8px;">View the code for this workflow on Github</p> | |
| <a href="https://github.com/FlatFilers/hcm-show-config/blob/main/workflows/project/index.ts" target="_blank" rel="noopener noreferrer" style="display: inline-flex; align-items: center; color: white; text-decoration: none; background-color: #000; padding: 16px 24px;">View on Github | |
| <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-left: 8px;"> | |
| <g clip-path="url(#clip0_1519_7607)"> | |
| <path fill-rule="evenodd" clip-rule="evenodd" d="M12.8861 0.423218C5.99451 0.423218 0.42334 6.15238 0.42334 13.2401C0.42334 18.9058 3.99298 23.7016 8.94502 25.399C9.56416 25.5266 9.79094 25.1232 9.79094 24.7839C9.79094 24.4868 9.77053 23.4683 9.77053 22.4071C6.3037 23.1711 5.58176 20.8792 5.58176 20.8792C5.02462 19.3938 4.19911 19.012 4.19911 19.012C3.06441 18.2269 4.28176 18.2269 4.28176 18.2269C5.54043 18.3118 6.20089 19.5425 6.20089 19.5425C7.31492 21.4946 9.11007 20.943 9.83227 20.6034C9.93533 19.7758 10.2657 19.2029 10.6165 18.8847C7.8514 18.5875 4.94222 17.4842 4.94222 12.561C4.94222 11.1605 5.43712 10.0146 6.2213 9.12348C6.09757 8.80525 5.66416 7.48936 6.34528 5.72817C6.34528 5.72817 7.39757 5.38858 9.77028 7.04379C10.7861 6.76323 11.8337 6.62051 12.8861 6.61931C13.9384 6.61931 15.0111 6.76801 16.0017 7.04379C18.3746 5.38858 19.4269 5.72817 19.4269 5.72817C20.108 7.48936 19.6744 8.80525 19.5506 9.12348C20.3555 10.0146 20.83 11.1605 20.83 12.561C20.83 17.4842 17.9208 18.5662 15.1351 18.8847C15.5892 19.2878 15.981 20.0516 15.981 21.2612C15.981 22.98 15.9606 24.3594 15.9606 24.7836C15.9606 25.1232 16.1876 25.5266 16.8065 25.3993C21.7585 23.7013 25.3282 18.9058 25.3282 13.2401C25.3486 6.15238 19.757 0.423218 12.8861 0.423218Z" fill="white"/> | |
| </g> | |
| <defs> | |
| <clipPath id="clip0_1519_7607"> | |
| <rect width="25" height="25" fill="white" transform="translate(0.42334 0.423218)"/> | |
| </clipPath> | |
| </defs> | |
| </svg> | |
| </a> |
| await SpaceService.addDocumentAndThemeToSpace({ | ||
| flatfileSpaceId: space.flatfileSpaceId, | ||
| workflowType: space.workflowType, | ||
| }); | ||
|
|
There was a problem hiding this comment.
Ensure error handling for addDocumentAndThemeToSpace to prevent unhandled promise rejections.
- await SpaceService.addDocumentAndThemeToSpace({
+ try {
+ await SpaceService.addDocumentAndThemeToSpace({
flatfileSpaceId: space.flatfileSpaceId,
workflowType: space.workflowType,
});
+ } catch (error) {
+ console.error('Failed to add document and theme to space', error);
+ return new NextResponse("Error adding document and theme to space", { status: 500 });
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| await SpaceService.addDocumentAndThemeToSpace({ | |
| flatfileSpaceId: space.flatfileSpaceId, | |
| workflowType: space.workflowType, | |
| }); | |
| try { | |
| await SpaceService.addDocumentAndThemeToSpace({ | |
| flatfileSpaceId: space.flatfileSpaceId, | |
| workflowType: space.workflowType, | |
| }); | |
| } catch (error) { | |
| console.error('Failed to add document and theme to space', error); | |
| return new NextResponse("Error adding document and theme to space", { status: 500 }); | |
| } |
| static async addDocumentAndThemeToSpace({ | ||
| flatfileSpaceId, | ||
| workflowType, | ||
| }: { | ||
| flatfileSpaceId: string; | ||
| workflowType: string; | ||
| }) { | ||
| const { theme, document } = themeLookup[workflowType]; | ||
|
|
||
| const workflowDocument = await FlatfileService.createDocument({ | ||
| flatfileSpaceId, | ||
| document, | ||
| }); | ||
|
|
||
| const themeAndDocumentId = { | ||
| translationsPath: | ||
| "https://raw.githubusercontent.com/FlatFilers/Platform-Translations/main/locales/en/translation.json", | ||
| metadata: { | ||
| sidebarConfig: { | ||
| showSidebar: true, | ||
| defaultPage: { | ||
| documentId: workflowDocument.data.id, | ||
| }, | ||
| }, | ||
| theme, | ||
| }, | ||
| }; | ||
|
|
||
| await FlatfileService.updateSpace({ | ||
| flatfileSpaceId, | ||
| options: themeAndDocumentId, | ||
| }); | ||
| } |
There was a problem hiding this comment.
Validate the existence of theme and document in themeLookup before proceeding with operations to prevent runtime errors.
- const { theme, document } = themeLookup[workflowType];
+ const themeAndDocument = themeLookup[workflowType];
+ if (!themeAndDocument) {
+ throw new Error(`No theme or document found for workflow type: ${workflowType}`);
+ }
+ const { theme, document } = themeAndDocument;Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| static async addDocumentAndThemeToSpace({ | |
| flatfileSpaceId, | |
| workflowType, | |
| }: { | |
| flatfileSpaceId: string; | |
| workflowType: string; | |
| }) { | |
| const { theme, document } = themeLookup[workflowType]; | |
| const workflowDocument = await FlatfileService.createDocument({ | |
| flatfileSpaceId, | |
| document, | |
| }); | |
| const themeAndDocumentId = { | |
| translationsPath: | |
| "https://raw.githubusercontent.com/FlatFilers/Platform-Translations/main/locales/en/translation.json", | |
| metadata: { | |
| sidebarConfig: { | |
| showSidebar: true, | |
| defaultPage: { | |
| documentId: workflowDocument.data.id, | |
| }, | |
| }, | |
| theme, | |
| }, | |
| }; | |
| await FlatfileService.updateSpace({ | |
| flatfileSpaceId, | |
| options: themeAndDocumentId, | |
| }); | |
| } | |
| static async addDocumentAndThemeToSpace({ | |
| flatfileSpaceId, | |
| workflowType, | |
| }: { | |
| flatfileSpaceId: string; | |
| workflowType: string; | |
| }) { | |
| const themeAndDocument = themeLookup[workflowType]; | |
| if (!themeAndDocument) { | |
| throw new Error(`No theme or document found for workflow type: ${workflowType}`); | |
| } | |
| const { theme, document } = themeAndDocument; | |
| const workflowDocument = await FlatfileService.createDocument({ | |
| flatfileSpaceId, | |
| document, | |
| }); | |
| const themeAndDocumentId = { | |
| translationsPath: | |
| "https://raw.githubusercontent.com/FlatFilers/Platform-Translations/main/locales/en/translation.json", | |
| metadata: { | |
| sidebarConfig: { | |
| showSidebar: true, | |
| defaultPage: { | |
| documentId: workflowDocument.data.id, | |
| }, | |
| }, | |
| theme, | |
| }, | |
| }; | |
| await FlatfileService.updateSpace({ | |
| flatfileSpaceId, | |
| options: themeAndDocumentId, | |
| }); | |
| } |
| static async createDocument({ | ||
| flatfileSpaceId, | ||
| document, | ||
| }: { | ||
| flatfileSpaceId: string; | ||
| document: DocumentConfig; | ||
| }) { | ||
| const spaceId = flatfileSpaceId; | ||
| return await api.documents.create(spaceId, document); | ||
| } | ||
|
|
||
| static async updateSpace({ | ||
| flatfileSpaceId, | ||
| options = {}, | ||
| }: { | ||
| flatfileSpaceId: string; | ||
| options: Record<string, any>; | ||
| }) { | ||
| return await api.spaces.update(flatfileSpaceId, options); | ||
| } |
There was a problem hiding this comment.
Validate inputs and handle API errors in createDocument and updateSpace methods to ensure robustness.
- return await api.documents.create(spaceId, document);
+ if (!spaceId || !document) {
+ throw new Error('Missing required parameters for creating a document');
+ }
+ try {
+ return await api.documents.create(spaceId, document);
+ } catch (error) {
+ console.error('Failed to create document', error);
+ throw new Error('Error creating document');
+ }
- return await api.spaces.update(flatfileSpaceId, options);
+ if (!flatfileSpaceId || !options) {
+ throw new Error('Missing required parameters for updating a space');
+ }
+ try {
+ return await api.spaces.update(flatfileSpaceId, options);
+ } catch (error) {
+ console.error('Failed to update space', error);
+ throw new Error('Error updating space');
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| static async createDocument({ | |
| flatfileSpaceId, | |
| document, | |
| }: { | |
| flatfileSpaceId: string; | |
| document: DocumentConfig; | |
| }) { | |
| const spaceId = flatfileSpaceId; | |
| return await api.documents.create(spaceId, document); | |
| } | |
| static async updateSpace({ | |
| flatfileSpaceId, | |
| options = {}, | |
| }: { | |
| flatfileSpaceId: string; | |
| options: Record<string, any>; | |
| }) { | |
| return await api.spaces.update(flatfileSpaceId, options); | |
| } | |
| static async createDocument({ | |
| flatfileSpaceId, | |
| document, | |
| }: { | |
| flatfileSpaceId: string; | |
| document: DocumentConfig; | |
| }) { | |
| const spaceId = flatfileSpaceId; | |
| if (!spaceId || !document) { | |
| throw new Error('Missing required parameters for creating a document'); | |
| } | |
| try { | |
| return await api.documents.create(spaceId, document); | |
| } catch (error) { | |
| console.error('Failed to create document', error); | |
| throw new Error('Error creating document'); | |
| } | |
| } | |
| static async updateSpace({ | |
| flatfileSpaceId, | |
| options = {}, | |
| }: { | |
| flatfileSpaceId: string; | |
| options: Record<string, any>; | |
| }) { | |
| if (!flatfileSpaceId || !options) { | |
| throw new Error('Missing required parameters for updating a space'); | |
| } | |
| try { | |
| return await api.spaces.update(flatfileSpaceId, options); | |
| } catch (error) { | |
| console.error('Failed to update space', error); | |
| throw new Error('Error updating space'); | |
| } | |
| } |
|
@gaelyn After talking with colin, we only need the dynamic theme here the rest will be config driven |
Summary by CodeRabbit