Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DEMO] markdown #1198

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[DEMO] markdown #1198

wants to merge 5 commits into from

Conversation

alex-Arc
Copy link
Collaborator

md

Copy link
Contributor

coderabbitai bot commented Aug 29, 2024

Walkthrough

The changes introduced enhancements to various components and services in the application, focusing on the integration of custom field types, particularly supporting Markdown input. Key modifications include the addition of new properties and functionalities in components like MarkdownArea, CustomFieldEntry, and EditableCell, as well as updates to theme styling for checkboxes and containers. The server-side logic was also altered to allow for more flexible editing of custom fields.

Changes

File Path Change Summary
apps/client/src/common/components/input/markdown/MarkdownArea.tsx Introduced MarkdownArea component for editing Markdown text with task lists, utilizing React hooks and custom props.
apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldEntry.tsx Added type property to CustomFieldEntryProps, updated rendering to display custom field type.
apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx Updated CustomFieldsFormProps to include initialType, modified form handling to support custom field types.
apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx Added "Type" column to the table in CustomFields, passing type to CustomFieldEntry.
apps/client/src/features/cuesheet/cuesheet-table-elements/EditableCell.tsx Introduced isMarkdown prop to handle Markdown input, modified rendering logic to include MarkdownArea.
apps/client/src/features/cuesheet/cuesheetCols.tsx Enhanced MakeCustomField to handle custom field types, updated makeCuesheetColumns to include type in column definitions.
apps/client/src/features/rundown/event-editor/EventEditor.tsx Added isMarkdown prop to conditionally render Markdown support based on custom field type.
apps/client/src/features/rundown/event-editor/composite/EventTextArea.tsx Updated CountedTextAreaProps to include isMarkdown, allowing conditional rendering of Markdown editor.
apps/client/src/theme/ontimeCheckbox.ts Introduced ontimeCheckboxWhite for new checkbox styling options.
apps/client/src/theme/ontimeTextInputs.ts Added containerStyles for enhanced styling capabilities.
apps/client/src/theme/theme.ts Updated theme configuration to include new checkbox and container variants.
apps/server/src/services/rundown-service/rundownCache.ts Removed type modification restriction in editCustomField, allowing changes to custom field types.
apps/server/src/utils/parserFunctions.ts Enhanced sanitiseCustomFields to dynamically handle type property and enforce stricter validation criteria for custom fields.
apps/server/src/models/demoProject.ts Changed customFields properties to use CustomFieldType.String for improved type safety.
apps/server/src/services/rundown-service/__tests__/rundownCache.test.ts Replaced string literals with CustomFieldType enumeration for custom field types in tests, enhancing type safety.
apps/server/src/utils/__tests__/parserFunctions.test.ts Updated tests for sanitiseCustomFields to use CustomFieldType.String, improving clarity and maintainability.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

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 using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 3877e20 and e467e6c.

Files ignored due to path filters (4)
  • apps/client/package.json is excluded by none and included by none
  • packages/types/src/definitions/core/CustomFields.type.ts is excluded by none and included by none
  • packages/types/src/index.ts is excluded by none and included by none
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml and included by none
Files selected for processing (13)
  • apps/client/src/common/components/input/markdown/MarkdownArea.tsx (1 hunks)
  • apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldEntry.tsx (4 hunks)
  • apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx (4 hunks)
  • apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx (1 hunks)
  • apps/client/src/features/cuesheet/cuesheet-table-elements/EditableCell.tsx (3 hunks)
  • apps/client/src/features/cuesheet/cuesheetCols.tsx (2 hunks)
  • apps/client/src/features/rundown/event-editor/EventEditor.tsx (2 hunks)
  • apps/client/src/features/rundown/event-editor/composite/EventTextArea.tsx (2 hunks)
  • apps/client/src/theme/ontimeCheckbox.ts (1 hunks)
  • apps/client/src/theme/ontimeTextInputs.ts (1 hunks)
  • apps/client/src/theme/theme.ts (4 hunks)
  • apps/server/src/services/rundown-service/rundownCache.ts (1 hunks)
  • apps/server/src/utils/parserFunctions.ts (3 hunks)
Additional comments not posted (35)
apps/client/src/theme/ontimeTextInputs.ts (1)

53-59: LGTM!

The containerStyles constant is consistent with the existing styles in the file.

apps/client/src/theme/ontimeCheckbox.ts (1)

35-67: LGTM!

The ontimeCheckboxWhite constant is consistent with the existing styles in the file.

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldEntry.tsx (3)

17-17: LGTM!

The addition of the type property enhances the functionality of the CustomFieldEntry component.


23-23: LGTM!

The destructuring assignment is correctly updated to include the type property.


Line range hint 40-53: LGTM!

The usage of the type property is correctly implemented.

apps/client/src/features/cuesheet/cuesheet-table-elements/EditableCell.tsx (3)

5-5: LGTM!

The import statement for MarkdownArea is correct and necessary for the new functionality.


9-9: LGTM!

The addition of isMarkdown to the EditableCellProps interface is appropriate for the new functionality.


18-18: LGTM!

The addition of the editMarkdown state variable and the conditional rendering logic for MarkdownArea are correct and enhance the component's functionality by integrating Markdown support.

Also applies to: 23-26, 45-55, 69-69

apps/client/src/features/rundown/event-editor/composite/EventTextArea.tsx (3)

4-4: LGTM!

The import statement for MarkdownArea is correct and necessary for the new functionality.


17-17: LGTM!

The addition of isMarkdown to the CountedTextAreaProps interface is appropriate for the new functionality.


24-24: LGTM!

The addition of the editMarkdown state variable and the conditional rendering logic for MarkdownArea are correct and enhance the component's functionality by integrating Markdown support.

Also applies to: 31-34, 37-37, 44-67

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx (2)

76-76: LGTM!

The addition of the "Type" column to the table header is appropriate and enhances the information presented to the user.


81-88: LGTM!

The update to the Object.entries(data) mapping to include the type property is correct and necessary for displaying the new "Type" column in the table.

apps/client/src/common/components/input/markdown/MarkdownArea.tsx (4)

1-4: LGTM!

The import statements are correct and necessary for the component.


6-12: LGTM!

The MarkdownAreaProps interface is well-defined and includes all necessary props.


14-17: LGTM!

The MarkdownArea function is well-implemented and follows best practices for React components.


36-87: LGTM!

The return statement is well-implemented and follows best practices for React components.

apps/client/src/features/cuesheet/cuesheetCols.tsx (3)

4-4: LGTM!

The import statement is correct and necessary for the updated functionality.


51-56: LGTM!

The MakeCustomField function is well-implemented and follows best practices for handling custom fields.


64-64: LGTM!

The makeCuesheetColumns function is well-implemented and follows best practices for creating column definitions.

apps/client/src/theme/theme.ts (3)

12-12: LGTM!

The import statement is correct and necessary for the updated functionality.


62-63: LGTM!

The Checkbox component configuration is correct and follows best practices for Chakra UI theming.


129-132: LGTM!

The Container component configuration is correct and follows best practices for Chakra UI theming.

apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFieldForm.tsx (6)

3-4: LGTM!

The new imports are necessary for the new feature.


18-18: LGTM!

The addition of the initialType property is necessary for the new feature.


22-22: LGTM!

The destructuring of the initialType property from props is necessary for the new feature.


35-39: LGTM!

The form's default values have been correctly modified to incorporate the new type field.


45-48: LGTM!

The setupSubmit function has been correctly updated to accept the type parameter.


96-102: LGTM!

The addition of the Select component is necessary for the new feature.

apps/client/src/features/rundown/event-editor/EventEditor.tsx (2)

4-4: LGTM!

The new import is necessary for the new feature.


123-123: LGTM!

The addition of the isMarkdown prop is necessary for the new feature.

apps/server/src/utils/parserFunctions.ts (3)

3-3: LGTM!

The new import is necessary for the new feature.


321-321: LGTM!

The addition of the type property is necessary for the new feature.


334-337: LGTM!

The expanded validation logic is necessary for the new feature.

apps/server/src/services/rundown-service/rundownCache.ts (1)

Line range hint 287-310: LGTM! But verify the function usage in the codebase.

The removal of the conditional check allows for greater flexibility in editing custom fields, specifically regarding their type. Ensure that all parts of the codebase handle the type change correctly.

The code changes are approved.

Run the following script to verify the function usage:

Verification successful

Function Usage Verified with Tests Present

The editCustomField function is used across the codebase, including in test files, which suggests that its behavior is being verified. Ensure that the tests cover scenarios related to type changes to mitigate any potential issues from the recent modifications.

  • Files with editCustomField usage:
    • apps/server/src/services/rundown-service/rundownCache.ts
    • apps/server/src/services/rundown-service/__tests__/rundownCache.test.ts
    • apps/server/src/api-data/custom-fields/customFields.controller.ts
    • apps/client/src/common/api/customFields.ts
    • apps/client/src/features/app-settings/panel/feature-settings-panel/custom-fields/CustomFields.tsx
Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all function calls to `editCustomField` handle the type change correctly.

# Test: Search for the function usage. Expect: Only occurrences of the new signature.
rg --type javascript -A 5 $'editCustomField'

Length of output: 78


Script:

#!/bin/bash
# Description: Verify all function calls to `editCustomField` handle the type change correctly.

# Test: Search for the function usage without specifying a file type.
rg -A 5 'editCustomField'

Length of output: 6959

Comment on lines +18 to +33
const markDownChecker = (line: number) => {
const txtLines = text.split('\n');
const activeLine = txtLines[line - 1];
const isChecked = activeLine.indexOf('- [x] ') === 0;
const isNotChecked = activeLine.indexOf('- [ ] ') === 0;

if (isNotChecked) {
txtLines[line - 1] = activeLine.replace('- [ ] ', '- [x] ');
submitHandler(txtLines.join('\n'));
setText(txtLines.join('\n'));
}
if (isChecked) {
txtLines[line - 1] = activeLine.replace('- [x] ', '- [ ] ');
submitHandler(txtLines.join('\n'));
setText(txtLines.join('\n'));
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider optimizing the markDownChecker function.

The markDownChecker function can be optimized by combining the two conditions into one.

Apply this diff to optimize the function:

 const markDownChecker = (line: number) => {
   const txtLines = text.split('\n');
   const activeLine = txtLines[line - 1];
   const isChecked = activeLine.indexOf('- [x] ') === 0;
   const isNotChecked = activeLine.indexOf('- [ ] ') === 0;

-  if (isNotChecked) {
-    txtLines[line - 1] = activeLine.replace('- [ ] ', '- [x] ');
-    submitHandler(txtLines.join('\n'));
-    setText(txtLines.join('\n'));
-  }
-  if (isChecked) {
-    txtLines[line - 1] = activeLine.replace('- [x] ', '- [ ] ');
+  if (isNotChecked || isChecked) {
+    txtLines[line - 1] = activeLine.replace(isNotChecked ? '- [ ] ' : '- [x] ', isNotChecked ? '- [x] ' : '- [ ] ');
     submitHandler(txtLines.join('\n'));
     setText(txtLines.join('\n'));
   }
 };
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. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const markDownChecker = (line: number) => {
const txtLines = text.split('\n');
const activeLine = txtLines[line - 1];
const isChecked = activeLine.indexOf('- [x] ') === 0;
const isNotChecked = activeLine.indexOf('- [ ] ') === 0;
if (isNotChecked) {
txtLines[line - 1] = activeLine.replace('- [ ] ', '- [x] ');
submitHandler(txtLines.join('\n'));
setText(txtLines.join('\n'));
}
if (isChecked) {
txtLines[line - 1] = activeLine.replace('- [x] ', '- [ ] ');
submitHandler(txtLines.join('\n'));
setText(txtLines.join('\n'));
}
const markDownChecker = (line: number) => {
const txtLines = text.split('\n');
const activeLine = txtLines[line - 1];
const isChecked = activeLine.indexOf('- [x] ') === 0;
const isNotChecked = activeLine.indexOf('- [ ] ') === 0;
if (isNotChecked || isChecked) {
txtLines[line - 1] = activeLine.replace(isNotChecked ? '- [ ] ' : '- [x] ', isNotChecked ? '- [x] ' : '- [ ] ');
submitHandler(txtLines.join('\n'));
setText(txtLines.join('\n'));
}
};

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between e467e6c and dcbdad9.

Files selected for processing (3)
  • apps/server/src/models/demoProject.ts (2 hunks)
  • apps/server/src/services/rundown-service/tests/rundownCache.test.ts (5 hunks)
  • apps/server/src/utils/tests/parserFunctions.test.ts (4 hunks)
Additional comments not posted (18)
apps/server/src/models/demoProject.ts (2)

381-383: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


386-388: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.

apps/server/src/utils/__tests__/parserFunctions.test.ts (8)

2-2: LGTM!

The import of CustomFieldType is necessary for the subsequent changes.


281-283: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


289-289: Verify the reason for skipping the test case.

Skipping a test case might indicate a shift in testing strategy or a temporary measure. Ensure that this is intentional and documented.


295-297: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


304-306: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


312-314: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


324-326: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


332-335: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.

apps/server/src/services/rundown-service/__tests__/rundownCache.test.ts (8)

2-2: LGTM!

The import of CustomFieldType is necessary for the subsequent changes.


397-399: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


402-404: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


936-938: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


943-945: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


958-962: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


969-971: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.


1011-1013: LGTM!

The change enhances type safety by using CustomFieldType.String instead of a string literal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant