Skip to content

Contribute element container exceeds screen width on mobile #919#959

Closed
srinjoy933 wants to merge 23 commits intoOWASP:mainfrom
srinjoy933:srinjoy933/issue--919
Closed

Contribute element container exceeds screen width on mobile #919#959
srinjoy933 wants to merge 23 commits intoOWASP:mainfrom
srinjoy933:srinjoy933/issue--919

Conversation

@srinjoy933
Copy link
Contributor

@srinjoy933 srinjoy933 commented Feb 28, 2025

Resolves #919

Add the PR description here.
The changes made focused on improving mobile responsiveness by fixing the Contribute section’s width issue. The meta viewport tag was adjusted to ensure proper scaling and prevent zooming inconsistencies. A container was introduced to wrap both the Projects and Contribute sections, ensuring they share the same width. The CSS was modified to set max-width: 100% for both sections, preventing overflow beyond the screen. A flexbox-based layout was implemented to center the content and maintain a structured UI. Additionally, responsive styles were added to adjust padding and spacing on smaller screens.

Copy link
Collaborator

@arkid15r arkid15r left a comment

Choose a reason for hiding this comment

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

@arkid15r arkid15r requested a review from aramattamara March 1, 2025 04:41
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 1, 2025

Summary by CodeRabbit

  • New Features

    • The landing page now features dedicated “Projects” and “Contribute” sections, offering clearer navigation and enhanced content.
  • Refactor

    • The search interface has been updated for smoother suggestions and more reliable keyboard navigation.
    • The Contribute page now benefits from a refreshed layout and styling, with improved HTML structure for a consistent user experience.

Walkthrough

The changes update the structure and content of the frontend/index.html file, including a corrected doctype declaration, removal of the icon link, and an expanded body with new sections for "Projects" and "Contribute." The MultiSearch.tsx component improves keyboard event handling with optional chaining and conditional checks. The App.tsx file modifies the route for the ContributePage by wrapping it in a new container. Additionally, a new CSS class .contribute-container has been added to style the layout. A new ESLint configuration file has also been introduced.

Changes

File(s) Change Summary
frontend/index.html Corrected the doctype declaration, removed the <link rel="icon">, and expanded body content with new sections for "Projects" and "Contribute."
frontend/src/components/MultiSearch.tsx Enhanced keyboard event handling with optional chaining and conditional checks for accessing nested properties in suggestions. Streamlined state initialization and simplified cleanup functions for event listeners.
frontend/src/App.tsx Modified the route definition for /projects/contribute to wrap the ContributePage component in a <div class="contribute-container">, altering the rendered output structure.
frontend/src/index.css Introduced a new CSS class .contribute-container with styling rules for width, max-width, padding, and a media query for responsive design.
eslint.config.mjs Introduced a new ESLint configuration file that exports an array of configuration objects for JavaScript and TypeScript files, including global variables and recommended configurations from imported plugins.
.github/ansible/inventory.yaml Removed blank lines between host definitions in the nest section for improved readability.
.github/ansible/production/nest.yaml Adjusted formatting and indentation in the Ansible playbook for deploying Nest to production without functional changes.
.github/ansible/production/proxy.yaml Reformatted YAML structure for the Ansible playbook without altering functionality.
.github/ansible/production/sync-data.yaml Reformatted YAML structure in the Ansible playbook for syncing data without changing functionality.
.github/ansible/staging/nest.yaml Reduced the number of lines in the staging playbook for Nest without functional changes.
.github/ansible/staging/proxy.yaml Reformatted YAML structure for the Ansible playbook without altering functionality.
.github/dependabot.yml Removed configurations for docker, npm, and pip ecosystems in the specified directories, streamlining the dependabot configuration.
.github/labeler.yml Removed schema-tests section from the labeler configuration.
.github/workflows/label-issues.yaml Removed a blank line in the YAML configuration file for GitHub Actions.
.github/workflows/label-pull-requests.yaml Removed the trigger for pull_request_target, altering the workflow execution conditions.
.github/workflows/run-ci-cd.yaml Removed blank lines and made structural adjustments without altering existing logic.
.github/workflows/sync-nest-data.yaml Removed blank lines without affecting functionality.
.github/workflows/test-schema.yaml Removed push event trigger for the main branch and adjusted whitespace for clarity.
.github/workflows/update-nest-test-images.yaml Removed blank lines without altering functionality.
.pre-commit-config.yaml Removed repository configuration for the yamlfmt hook, eliminating YAML formatting functionality.
backend/apps/common/index.py Reformatted parameters in the reindex_synonyms method for readability without changing functionality.
backend/apps/common/management/commands/algolia_update_synonyms.py Adjusted spacing in a print statement for improved readability.
backend/apps/common/management/commands/generate_sitemap.py Reformatted dictionary entries for readability without altering functionality.
backend/apps/core/migrations/0001_initial.py Reformatted field declarations for readability without changing functionality.
backend/apps/github/graphql/queries/__init__.py Modified import statement for clarity without altering functionality.
backend/apps/github/migrations/0001_initial.py Reformatted field definitions for readability without changing functionality.
backend/apps/github/migrations/0007_repositorycontributor.py Reformatted the id field declaration for improved readability without altering functionality.
backend/apps/github/models/mixins/user.py Reformatted a conditional expression in the idx_contributions method for clarity without changing functionality.
backend/apps/github/models/repository_contributor.py Modified import statement for clarity without altering functionality.
backend/apps/github/utils.py Adjusted spacing in the slicing operation for readability without changing functionality.
backend/apps/owasp/graphql/queries/__init__.py Reformatted class declaration for improved readability without changing functionality.
backend/apps/owasp/migrations/0001_initial.py Reformatted field definitions for readability without changing functionality.
backend/apps/owasp/migrations/0003_project_top_contributors.py Reformatted top_contributors field declaration for readability without changing functionality.
backend/apps/owasp/migrations/0007_chapter_suggested_location.py Reformatted suggested_location field declaration for readability without changing functionality.
backend/apps/owasp/migrations/0008_chapter_description_chapter_has_active_repositories_and_more.py Reformatted topics field definitions for readability without changing functionality.
backend/apps/owasp/migrations/0010_alter_chapter_invalid_urls_alter_chapter_leaders_raw_and_more.py Reformatted invalid_urls field definitions for readability without changing functionality.
backend/apps/owasp/migrations/0011_alter_project_invalid_urls_alter_project_leaders_raw_and_more.py Reformatted invalid_urls field definition for readability without changing functionality.
backend/apps/owasp/migrations/0012_committee_invalid_urls_committee_leaders_raw_and_more.py Reformatted invalid_urls field declaration for readability without changing functionality.
backend/apps/owasp/migrations/0015_snapshot.py Reformatted id field declaration for readability without changing functionality.
backend/apps/owasp/migrations/0016_projecthealthmetrics.py Reformatted field definitions for readability without changing functionality.
backend/apps/owasp/migrations/0017_projecthealthrequirements_and_more.py Reformatted field definitions for readability without changing functionality.
backend/apps/owasp/models/event.py Reformatted assignment for start_date field for clarity without changing functionality.
backend/apps/owasp/models/mixins/project.py Reformatted expression for "latest_release" assignment for clarity without changing functionality.
backend/apps/slack/commands/gsoc.py Adjusted formatting of string literals for consistent spacing without changing functionality.
backend/apps/slack/commands/leaders.py Restructured string formatting logic in the leaders_handler function for clarity without changing functionality.
backend/apps/slack/commands/staff.py Reformatted parameters in the client.chat_postMessage method call for clarity without changing functionality.
backend/apps/slack/common/contribute.py Reformatted string literals for consistent spacing without changing functionality.
backend/apps/slack/common/gsoc.py Adjusted string formatting for consistent spacing without changing functionality.
backend/apps/slack/common/handlers/chapters.py Reformatted parameter declaration for get_blocks method for readability without changing functionality.
backend/apps/slack/common/handlers/committees.py Reformatted parameter declaration for get_blocks method for readability without changing functionality.
backend/apps/slack/common/handlers/contribute.py Reformatted parameter declaration for get_blocks method for readability without changing functionality.
backend/apps/slack/common/handlers/projects.py Reformatted parameter declaration for get_blocks method for readability without changing functionality.
backend/apps/slack/events/app_home_opened.py Adjusted string formatting for clarity without changing functionality.
backend/apps/slack/events/team_join.py Reformatted string concatenations for consistent spacing without changing functionality.
backend/apps/slack/migrations/0001_initial.py Reformatted field declarations for readability without changing functionality.
backend/apps/slack/utils.py Modified assignment of "author" key in dictionary for clarity without changing functionality.
backend/pyproject.toml Modified ruff linter configuration, changing extend-select to select and renaming sections for clarity.
backend/tests/common/index_test.py Reformatted list in parameterized test case for readability without changing functionality.
backend/tests/common/management/commands/add_project_custom_tags_test.py Reformatted parameterized test cases and lambda function for clarity without changing functionality.
backend/tests/common/open_ai_test.py Modified parameterization syntax for clarity without changing functionality.
backend/tests/conftest.py Removed comment from function declaration without changing functionality.
backend/tests/github/graphql/queries/repository_test.py Reformatted function calls for readability without changing functionality.
backend/tests/github/management/commands/github_enrich_issues_test.py Reformatted arguments and function signature for clarity without changing functionality.
backend/tests/github/management/commands/github_update_project_related_repositories_test.py Modified __getitem__ method for mock_active_projects to handle both indexing and slicing without changing functionality.
backend/tests/github/models/mixins/organization_test.py Reformatted instantiation of Organization object for clarity without changing functionality.
backend/tests/github/models/mixins/user_test.py Modified @patch decorator for clarity without changing functionality.
backend/tests/github/models/organization_test.py Modified context manager for clarity without changing functionality.
backend/tests/github/models/repository_test.py Reformatted mocker.patch call for clarity without changing functionality.
backend/tests/owasp/api/search/chapter_test.py Reformatted entries in MOCKED_HITS dictionary for readability without changing functionality.
backend/tests/owasp/api/search/project_test.py Reformatted dictionary entry for "OWASP Juice Shop" for readability without changing functionality.
backend/tests/owasp/management/commands/owasp_aggregate_projects_test.py Modified __getitem__ method for mock_active_projects for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_enrich_chapters_test.py Reformatted function signature and lambda function for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_enrich_committees_test.py Modified side_effect for __getitem__ method for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_enrich_projects_test.py Modified side_effect for __getitem__ method for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_scrape_chapters_test.py Modified lambda functions and reformatted lists for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_scrape_committees_test.py Modified lambda functions and reformatted lists for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_scrape_projects_test.py Modified lambda functions for clarity without changing functionality.
backend/tests/owasp/management/commands/owasp_update_project_health_requirements_test.py Reformatted import statement and parameterization for clarity without changing functionality.
backend/tests/owasp/management/commands/process_snapshots_test.py Reformatted mock.patch calls for readability without changing functionality.
backend/tests/owasp/models/chapter_test.py Reformatted monkeypatch.setattr call and parameterization for clarity without changing functionality.
backend/tests/owasp/models/committee_test.py Modified with statement structure for patching for clarity without changing functionality.
backend/tests/owasp/models/project_health_requirements_test.py Reformatted parameterized test cases for readability without changing functionality.
backend/tests/owasp/models/project_test.py Reformatted tuples in parameterized test cases for readability without changing functionality.
backend/tests/owasp/models/snapshot_test.py Reformatted list in setUp method for readability without changing functionality.
backend/tests/slack/common/handlers/chapters_test.py Consolidated patch calls in setup_mocks fixture for clarity without changing functionality.
backend/tests/slack/common/handlers/committees_test.py Consolidated patch calls in setup_mocks fixture for clarity without changing functionality.
backend/tests/slack/common/handlers/projects_test.py Consolidated patch calls in setup_mocks fixture for clarity without changing functionality.
backend/tests/slack/events/app_home_opened_test.py Modified formatting of a dictionary for improved readability without changing functionality.
backend/tests/slack/utils_test.py Reformatted test cases for readability without changing functionality.
docker/docker-compose-local.yaml Removed blank lines for improved readability without changing functionality.
docker/docker-compose-production.yaml Removed blank lines without affecting functionality.
docker/docker-compose-staging.yaml Removed staging-nest-frontend service and adjusted networks section without altering functionality.
proxy/docker-compose.yaml Reformatted entrypoint command and port mappings for clarity without changing functionality.

Suggested labels

frontend-tests

Suggested reviewers

  • kasya
  • arkid15r
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 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>, please review it.
    • 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 gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @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 generate docstrings to generate docstrings for this 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.

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
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 126b0b1 and 77dcf10.

📒 Files selected for processing (2)
  • frontend/index.html (1 hunks)
  • frontend/src/components/MultiSearch.tsx (1 hunks)
🔇 Additional comments (5)
frontend/src/components/MultiSearch.tsx (1)

90-97: Improved error handling with optional chaining

The changes enhance safety by adding optional chaining (?.) when accessing the suggestions array and verifying that a suggestion exists before calling handleSuggestionClick. This prevents potential runtime errors when dealing with invalid indices.

frontend/index.html (4)

1-5: Fix DOCTYPE declaration and review viewport restrictions

The DOCTYPE declaration is now correctly capitalized. However, the viewport meta tag includes user-scalable=no which prevents users from zooming on mobile devices.

The user-scalable=no parameter can cause accessibility issues for users with visual impairments who need to zoom content. Consider removing this restriction unless there's a specific reason that requires preventing zoom.


8-61: Good responsive design implementation

The added CSS provides a well-structured responsive layout with:

  • Proper box-sizing reset
  • Flexbox centering
  • Responsive container with max-width constraints
  • Media queries for smaller screens

This directly addresses the PR objective of fixing the "container exceeds screen width on mobile" issue by setting max-width: 100% and proper overflow handling.


63-76: New container structure aligns with PR objectives

The implementation of the new container structure with separate sections for Projects and Contribute resolves the width issue mentioned in the PR objectives. The container and sections now have:

  • Proper width constraints (max-width: 100%)
  • Consistent padding
  • Proper overflow handling

This change successfully addresses the reported issue of content exceeding screen width on mobile devices.


77-81: Simple DOM ready event handler

The script adds a basic DOM content loaded event handler that logs a message to the console.

This appears to be a placeholder. Consider whether this should be expanded to include initialization code or if it's intended to be replaced by the React application entry point script in the future.

Comment on lines 103 to 104
const { index, subIndex } = highlighted ;
if (subIndex < suggestions[index].hits.length - 1) {
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Fix variable name typo

There's a reference to a non-existent variable highlighted which would cause a runtime error. This should be highlightedIndex as used elsewhere in the component.

-          const { index, subIndex } = highlighted  ;      
+          const { index, subIndex } = highlightedIndex;

Also, please remove the extra spaces before the semicolon.

📝 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 { index, subIndex } = highlighted ;
if (subIndex < suggestions[index].hits.length - 1) {
const { index, subIndex } = highlightedIndex;
if (subIndex < suggestions[index].hits.length - 1) {

@srinjoy933 srinjoy933 requested a review from arkid15r March 1, 2025 17:30
Copy link
Collaborator

Choose a reason for hiding this comment

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

I'm not sure I understand what's going on here at all.. 👀
This is how the page looks now:
Screenshot 2025-03-01 at 5 55 35 PM

@kasya
Copy link
Collaborator

kasya commented Mar 2, 2025

You also need to address CI/CD failing before next round of review

@srinjoy933
Copy link
Contributor Author

srinjoy933 commented Mar 2, 2025

ok ,i will try to fix these issues before next round of review

Copy link
Collaborator

@kasya kasya left a comment

Choose a reason for hiding this comment

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

@srinjoy933 Hi! Any updates? There are also some conflicts you need to resolve.

@srinjoy933
Copy link
Contributor Author

yes,i am on to fix these issues and will update you in quick time.Actually i was working on another issue so it took some to update these .

@arkid15r
Copy link
Collaborator

arkid15r commented Mar 6, 2025

@srinjoy933 please not this task's deadline passed 2 days ago

Screenshot 2025-03-06 at 9 25 54 AM

@srinjoy933
Copy link
Contributor Author

OK ,I WILL DO THIS BY TODAY ONLY

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

🧹 Nitpick comments (1)
frontend/src/components/MultiSearch.tsx (1)

41-41: Consider handling server errors in search results

The current implementation assumes the fetch request always succeeds. You should add error handling for failed requests.

- setSuggestions(results.filter((result) => result.hits.length > 0));
+ try {
+   setSuggestions(results.filter((result) => result.hits.length > 0));
+ } catch (error) {
+   console.error('Error filtering search results:', error);
+   setSuggestions([]);
+ }
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5115f8a and 7de01de.

📒 Files selected for processing (2)
  • eslint.config.mjs (1 hunks)
  • frontend/src/components/MultiSearch.tsx (2 hunks)
✅ Files skipped from review due to trivial changes (1)
  • eslint.config.mjs
🔇 Additional comments (6)
frontend/src/components/MultiSearch.tsx (6)

75-79: Excellent keyboard event handling improvements!

The code now properly uses optional chaining (?.) for safely accessing properties in the suggestions array, and adds a conditional check before invoking the handleSuggestionClick function. This prevents potential runtime errors when handling keyboard navigation.


86-87: Well-implemented null safety with optional chaining and nullish coalescing

Great use of optional chaining (?.) along with the nullish coalescing operator (??) to handle potential undefined values. This defensive programming approach prevents runtime errors when navigating through suggestions.


100-101: Good defensive programming with optional chaining

You've effectively used optional chaining with nullish coalescing to handle edge cases, which prevents potential errors when navigating suggestions with arrow keys.


124-129: Handler functions cleanly implemented

The search change handler is well-structured and contains all necessary state updates in the correct order: updating query, triggering search, and resetting highlight.


131-135: Comprehensive clear search implementation

The clear search function properly resets all relevant states (searchQuery, suggestions, highlightedIndex), which ensures a consistent UI state.


70-110: Verify keyboard event handling works without focus management

The keyboard event handlers are added to the document level, which means they'll work even when the search input is not focused. This could lead to unexpected behavior when users are interacting with other parts of the page.

Consider adding a check to only handle keyboard events when the search input is focused:

    const handleKeyDown = (event: KeyboardEvent) => {
+     if (document.activeElement !== inputRef.current) return;
      if (event.key === 'Escape') {

You might also want to set ref={inputRef} on the input element to make sure the ref is properly attached.

Comment on lines +164 to +165
);
};
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue

Missing suggestion rendering functionality

The component's search box is implemented, but there's no rendering of search suggestions despite the state and keyboard navigation logic being present. This appears to be missing from the return JSX.

Consider adding code to render the suggestions array similar to:

      </div>
+     {suggestions.length > 0 && (
+       <div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg dark:bg-gray-800">
+         {suggestions.map((suggestionGroup, groupIndex) => (
+           <div key={suggestionGroup.indexName}>
+             <div className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
+               {suggestionGroup.indexName.charAt(0).toUpperCase() + suggestionGroup.indexName.slice(1)}
+             </div>
+             <ul>
+               {suggestionGroup.hits.map((suggestion, idx) => (
+                 <li
+                   key={suggestion.key}
+                   className={`cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 ${
+                     highlightedIndex?.index === groupIndex && highlightedIndex?.subIndex === idx
+                       ? 'bg-gray-100 dark:bg-gray-700'
+                       : ''
+                   }`}
+                   onClick={() => handleSuggestionClick(suggestion, suggestionGroup.indexName)}
+                 >
+                   {suggestion.name}
+                 </li>
+               ))}
+             </ul>
+           </div>
+         ))}
+       </div>
+     )}
    </div>
📝 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
);
};
</div>
{suggestions.length > 0 && (
<div className="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg dark:bg-gray-800">
{suggestions.map((suggestionGroup, groupIndex) => (
<div key={suggestionGroup.indexName}>
<div className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300">
{suggestionGroup.indexName.charAt(0).toUpperCase() + suggestionGroup.indexName.slice(1)}
</div>
<ul>
{suggestionGroup.hits.map((suggestion, idx) => (
<li
key={suggestion.key}
className={`cursor-pointer px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 ${
highlightedIndex?.index === groupIndex && highlightedIndex?.subIndex === idx
? 'bg-gray-100 dark:bg-gray-700'
: ''
}`}
onClick={() => handleSuggestionClick(suggestion, suggestionGroup.indexName)}
>
{suggestion.name}
</li>
))}
</ul>
</div>
))}
</div>
)}
</div>
);
};

@srinjoy933
Copy link
Contributor Author

review it once

@srinjoy933 srinjoy933 marked this pull request as draft March 7, 2025 18:27
@srinjoy933 srinjoy933 marked this pull request as ready for review March 7, 2025 18:28
@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 7, 2025

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

🧹 Nitpick comments (2)
backend/apps/slack/common/contribute.py (2)

42-48: Potential Typo in Contribution Message

In the third markdown block, there's an unexpected > at the end of the string on line 46. If this character isn’t intentional for styling (such as creating a blockquote), it should be removed to avoid confusing users.

-        f"employed by the same company is a good practice.>{2 * NL}"
+        f"employed by the same company is a good practice.{2 * NL}"

53-57: Resolve Line Length Issue in Markdown String

The string on line 55 exceeds the 99-character limit (E501). Splitting the string into two parts will help conform to the style guidelines and prevent CI/CD failures.

-        f"  • Ask project-specific questions in their respective `#project-` channels only.{2 * NL}"
+        f"  • Ask project-specific questions in their respective `#project-` channels "
+        f"only.{2 * NL}"
🧰 Tools
🪛 Ruff (0.8.2)

55-55: Line too long (100 > 99)

(E501)

🪛 GitHub Actions: Run CI/CD

[error] 55-55: E501 Line too long (100 > 99)

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1136d38 and 60f840b.

⛔ Files ignored due to path filters (2)
  • cspell/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
  • frontend/pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (88)
  • .github/ansible/inventory.yaml (0 hunks)
  • .github/ansible/production/nest.yaml (1 hunks)
  • .github/ansible/production/proxy.yaml (1 hunks)
  • .github/ansible/production/sync-data.yaml (1 hunks)
  • .github/ansible/staging/nest.yaml (1 hunks)
  • .github/ansible/staging/proxy.yaml (1 hunks)
  • .github/dependabot.yml (0 hunks)
  • .github/labeler.yml (0 hunks)
  • .github/workflows/label-issues.yaml (0 hunks)
  • .github/workflows/label-pull-requests.yaml (0 hunks)
  • .github/workflows/run-ci-cd.yaml (0 hunks)
  • .github/workflows/sync-nest-data.yaml (0 hunks)
  • .github/workflows/test-schema.yaml (0 hunks)
  • .github/workflows/update-nest-test-images.yaml (0 hunks)
  • .pre-commit-config.yaml (0 hunks)
  • backend/apps/common/index.py (1 hunks)
  • backend/apps/common/management/commands/algolia_update_synonyms.py (1 hunks)
  • backend/apps/common/management/commands/generate_sitemap.py (5 hunks)
  • backend/apps/core/migrations/0001_initial.py (1 hunks)
  • backend/apps/github/graphql/queries/__init__.py (1 hunks)
  • backend/apps/github/migrations/0001_initial.py (15 hunks)
  • backend/apps/github/migrations/0007_repositorycontributor.py (1 hunks)
  • backend/apps/github/models/mixins/user.py (1 hunks)
  • backend/apps/github/models/repository_contributor.py (1 hunks)
  • backend/apps/github/utils.py (1 hunks)
  • backend/apps/owasp/graphql/queries/__init__.py (1 hunks)
  • backend/apps/owasp/migrations/0001_initial.py (5 hunks)
  • backend/apps/owasp/migrations/0003_project_top_contributors.py (1 hunks)
  • backend/apps/owasp/migrations/0007_chapter_suggested_location.py (1 hunks)
  • backend/apps/owasp/migrations/0008_chapter_description_chapter_has_active_repositories_and_more.py (4 hunks)
  • backend/apps/owasp/migrations/0010_alter_chapter_invalid_urls_alter_chapter_leaders_raw_and_more.py (2 hunks)
  • backend/apps/owasp/migrations/0011_alter_project_invalid_urls_alter_project_leaders_raw_and_more.py (1 hunks)
  • backend/apps/owasp/migrations/0012_committee_invalid_urls_committee_leaders_raw_and_more.py (1 hunks)
  • backend/apps/owasp/migrations/0015_snapshot.py (1 hunks)
  • backend/apps/owasp/migrations/0016_projecthealthmetrics.py (5 hunks)
  • backend/apps/owasp/migrations/0017_projecthealthrequirements_and_more.py (3 hunks)
  • backend/apps/owasp/models/event.py (1 hunks)
  • backend/apps/owasp/models/mixins/project.py (1 hunks)
  • backend/apps/slack/commands/gsoc.py (1 hunks)
  • backend/apps/slack/commands/leaders.py (2 hunks)
  • backend/apps/slack/commands/staff.py (1 hunks)
  • backend/apps/slack/common/contribute.py (3 hunks)
  • backend/apps/slack/common/gsoc.py (2 hunks)
  • backend/apps/slack/common/handlers/chapters.py (1 hunks)
  • backend/apps/slack/common/handlers/committees.py (1 hunks)
  • backend/apps/slack/common/handlers/contribute.py (1 hunks)
  • backend/apps/slack/common/handlers/projects.py (1 hunks)
  • backend/apps/slack/events/app_home_opened.py (1 hunks)
  • backend/apps/slack/events/team_join.py (2 hunks)
  • backend/apps/slack/migrations/0001_initial.py (2 hunks)
  • backend/apps/slack/utils.py (1 hunks)
  • backend/pyproject.toml (2 hunks)
  • backend/tests/common/index_test.py (1 hunks)
  • backend/tests/common/management/commands/add_project_custom_tags_test.py (2 hunks)
  • backend/tests/common/open_ai_test.py (1 hunks)
  • backend/tests/conftest.py (1 hunks)
  • backend/tests/github/graphql/queries/repository_test.py (2 hunks)
  • backend/tests/github/management/commands/github_enrich_issues_test.py (3 hunks)
  • backend/tests/github/management/commands/github_update_project_related_repositories_test.py (1 hunks)
  • backend/tests/github/models/mixins/organization_test.py (1 hunks)
  • backend/tests/github/models/mixins/user_test.py (1 hunks)
  • backend/tests/github/models/organization_test.py (1 hunks)
  • backend/tests/github/models/repository_test.py (1 hunks)
  • backend/tests/owasp/api/search/chapter_test.py (1 hunks)
  • backend/tests/owasp/api/search/project_test.py (1 hunks)
  • backend/tests/owasp/management/commands/owasp_aggregate_projects_test.py (1 hunks)
  • backend/tests/owasp/management/commands/owasp_enrich_chapters_test.py (3 hunks)
  • backend/tests/owasp/management/commands/owasp_enrich_committees_test.py (3 hunks)
  • backend/tests/owasp/management/commands/owasp_enrich_projects_test.py (3 hunks)
  • backend/tests/owasp/management/commands/owasp_scrape_chapters_test.py (3 hunks)
  • backend/tests/owasp/management/commands/owasp_scrape_committees_test.py (3 hunks)
  • backend/tests/owasp/management/commands/owasp_scrape_projects_test.py (2 hunks)
  • backend/tests/owasp/management/commands/owasp_update_project_health_requirements_test.py (2 hunks)
  • backend/tests/owasp/management/commands/process_snapshots_test.py (3 hunks)
  • backend/tests/owasp/models/chapter_test.py (3 hunks)
  • backend/tests/owasp/models/committee_test.py (1 hunks)
  • backend/tests/owasp/models/project_health_requirements_test.py (1 hunks)
  • backend/tests/owasp/models/project_test.py (1 hunks)
  • backend/tests/owasp/models/snapshot_test.py (1 hunks)
  • backend/tests/slack/common/handlers/chapters_test.py (1 hunks)
  • backend/tests/slack/common/handlers/committees_test.py (1 hunks)
  • backend/tests/slack/common/handlers/projects_test.py (1 hunks)
  • backend/tests/slack/events/app_home_opened_test.py (1 hunks)
  • backend/tests/slack/utils_test.py (5 hunks)
  • docker/docker-compose-local.yaml (0 hunks)
  • docker/docker-compose-production.yaml (0 hunks)
  • docker/docker-compose-staging.yaml (0 hunks)
  • proxy/docker-compose.yaml (1 hunks)
💤 Files with no reviewable changes (13)
  • .github/workflows/label-issues.yaml
  • .github/workflows/sync-nest-data.yaml
  • .github/workflows/update-nest-test-images.yaml
  • .github/ansible/inventory.yaml
  • .github/workflows/label-pull-requests.yaml
  • docker/docker-compose-local.yaml
  • .github/labeler.yml
  • docker/docker-compose-production.yaml
  • docker/docker-compose-staging.yaml
  • .github/workflows/run-ci-cd.yaml
  • .pre-commit-config.yaml
  • .github/workflows/test-schema.yaml
  • .github/dependabot.yml
✅ Files skipped from review due to trivial changes (70)
  • backend/apps/core/migrations/0001_initial.py
  • backend/apps/owasp/migrations/0007_chapter_suggested_location.py
  • backend/apps/slack/commands/staff.py
  • backend/tests/github/graphql/queries/repository_test.py
  • backend/tests/owasp/api/search/project_test.py
  • backend/apps/slack/utils.py
  • backend/tests/github/models/mixins/organization_test.py
  • backend/apps/github/utils.py
  • backend/apps/slack/commands/gsoc.py
  • backend/apps/owasp/graphql/queries/init.py
  • backend/tests/owasp/api/search/chapter_test.py
  • backend/apps/owasp/migrations/0016_projecthealthmetrics.py
  • backend/tests/slack/events/app_home_opened_test.py
  • .github/ansible/production/proxy.yaml
  • backend/tests/slack/common/handlers/projects_test.py
  • backend/apps/common/management/commands/algolia_update_synonyms.py
  • backend/apps/owasp/migrations/0011_alter_project_invalid_urls_alter_project_leaders_raw_and_more.py
  • .github/ansible/staging/nest.yaml
  • backend/tests/owasp/models/committee_test.py
  • backend/apps/slack/events/app_home_opened.py
  • .github/ansible/staging/proxy.yaml
  • backend/tests/common/management/commands/add_project_custom_tags_test.py
  • backend/apps/owasp/models/mixins/project.py
  • backend/tests/owasp/management/commands/process_snapshots_test.py
  • backend/apps/github/models/mixins/user.py
  • backend/tests/common/open_ai_test.py
  • backend/apps/owasp/migrations/0003_project_top_contributors.py
  • backend/apps/github/graphql/queries/init.py
  • .github/ansible/production/nest.yaml
  • backend/tests/slack/common/handlers/chapters_test.py
  • backend/tests/github/models/repository_test.py
  • backend/apps/common/index.py
  • backend/apps/slack/commands/leaders.py
  • backend/apps/owasp/models/event.py
  • .github/ansible/production/sync-data.yaml
  • backend/tests/slack/common/handlers/committees_test.py
  • backend/apps/owasp/migrations/0010_alter_chapter_invalid_urls_alter_chapter_leaders_raw_and_more.py
  • backend/tests/owasp/models/snapshot_test.py
  • backend/apps/github/migrations/0007_repositorycontributor.py
  • backend/apps/github/models/repository_contributor.py
  • backend/tests/owasp/management/commands/owasp_scrape_committees_test.py
  • backend/tests/owasp/models/chapter_test.py
  • backend/tests/conftest.py
  • backend/tests/owasp/management/commands/owasp_scrape_projects_test.py
  • backend/apps/slack/common/handlers/committees.py
  • backend/apps/owasp/migrations/0015_snapshot.py
  • backend/apps/slack/common/handlers/chapters.py
  • backend/apps/slack/migrations/0001_initial.py
  • backend/tests/owasp/models/project_health_requirements_test.py
  • backend/apps/github/migrations/0001_initial.py
  • backend/tests/owasp/management/commands/owasp_update_project_health_requirements_test.py
  • backend/tests/github/models/organization_test.py
  • backend/tests/github/management/commands/github_enrich_issues_test.py
  • backend/apps/slack/common/handlers/projects.py
  • backend/apps/common/management/commands/generate_sitemap.py
  • backend/apps/slack/events/team_join.py
  • backend/apps/owasp/migrations/0008_chapter_description_chapter_has_active_repositories_and_more.py
  • backend/tests/owasp/management/commands/owasp_aggregate_projects_test.py
  • backend/apps/slack/common/handlers/contribute.py
  • backend/apps/owasp/migrations/0012_committee_invalid_urls_committee_leaders_raw_and_more.py
  • backend/tests/github/models/mixins/user_test.py
  • backend/tests/owasp/management/commands/owasp_enrich_chapters_test.py
  • backend/apps/owasp/migrations/0017_projecthealthrequirements_and_more.py
  • backend/tests/slack/utils_test.py
  • backend/tests/common/index_test.py
  • backend/apps/slack/common/gsoc.py
  • backend/apps/owasp/migrations/0001_initial.py
  • backend/tests/owasp/models/project_test.py
  • proxy/docker-compose.yaml
  • backend/tests/owasp/management/commands/owasp_scrape_chapters_test.py
🧰 Additional context used
🪛 Ruff (0.8.2)
backend/apps/slack/common/contribute.py

55-55: Line too long (100 > 99)

(E501)

🪛 GitHub Actions: Run CI/CD
backend/apps/slack/common/contribute.py

[error] 55-55: E501 Line too long (100 > 99)

🔇 Additional comments (11)
backend/tests/github/management/commands/github_update_project_related_repositories_test.py (1)

71-75: Improved mock implementation for better slice handling

This change enhances the __getitem__ implementation to properly handle both integer indices and slices in the mock object. The conditional check ensures that when an integer index is provided, it returns the corresponding item directly, and when a slice is provided, it returns the appropriate subset of the list.

This approach is more robust than the previous implementation and properly mimics Python's native list slicing behavior.

backend/tests/owasp/management/commands/owasp_enrich_committees_test.py (3)

57-61: Clean implementation of slice handling for mock object

Good implementation for the __getitem__ side effect that properly handles both slice objects and integer indices. The logic correctly prioritizes checking for slice objects first, which follows a clear and readable pattern.


67-71: Consistent implementation for mock objects

The implementation for mock_active_committees_without_summary is consistent with the approach used for mock_active_committees, maintaining code consistency across similar mock objects.


84-87: Improved formatting for better readability

The reformatting of the patch.object call to use multiple lines improves code readability while maintaining the same functionality.

backend/tests/owasp/management/commands/owasp_enrich_projects_test.py (3)

57-61: Well-structured mock implementation for handling slices

Good implementation of the __getitem__ side effect that correctly handles both slice objects and integer indices. This is consistent with the pattern used in the other test files.


67-71: Consistent mock implementation

The implementation for mock_active_projects_without_summary follows the same pattern as mock_active_projects, maintaining consistency across similar mock objects.


79-87: Improved code formatting for readability

The reformatting of the mock.patch.object calls to use multiple lines improves readability while maintaining the same functionality. This is consistent with the formatting changes in other test files.

backend/apps/slack/common/contribute.py (3)

18-20: Consistent Markdown Newline Formatting

The change from 2*NL to 2 * NL here improves readability and maintains consistency in how newlines are calculated.


30-30: Consistent Spacing in Markdown Header

The header string for the "Finding the Right Slack Channels" block now uses consistent spacing for the newline calculation.


60-68: Consistent Formatting in Contribution Instructions

The final markdown block now benefits from uniform spacing around the multiplication operator for newline insertions. This consistency enhances readability and ensures that the contribution instructions render correctly.

backend/pyproject.toml (1)

92-93: Lint Configuration Update: Using select to Enable All Rules

The configuration now explicitly uses select = ["ALL"] to enforce all linting rules, replacing the older approach. This update aligns with the intended stricter linting policy. Please ensure that expanding the rule set does not introduce excessive noise during linting.

"TD003",
]
select = ["ALL"]
extend-select = ["I"]
Copy link
Contributor

Choose a reason for hiding this comment

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

💡 Verification agent

🧩 Analysis chain

Configuration Inconsistency: Redundant extend-select Clause

The line extend-select = ["I"] is still present alongside select = ["ALL"]. Based on the updated linting strategy—and as indicated in the PR and AI summary—the use of extend-select should be removed to avoid conflicts and redundancy. Please confirm if this line should be removed.


🏁 Script executed:

#!/bin/bash
# Verify the configuration in backend/pyproject.toml

echo "----- Checking for 'select =' entries -----"
grep -n 'select =' backend/pyproject.toml

echo "----- Checking for 'extend-select =' entries -----"
grep -n 'extend-select =' backend/pyproject.toml

Length of output: 508


Action Needed: Remove Redundant extend-select Clause

The configuration now shows both:

  • select = ["ALL"] at line 92, and
  • extend-select = ["I"] at line 112.

Since the updated linting strategy favors using select = ["ALL"], the extend-select directive becomes redundant and may introduce conflicts. Please remove the line at line 112 from backend/pyproject.toml to resolve this inconsistency.

@arkid15r
Copy link
Collaborator

arkid15r commented Mar 8, 2025

Closed due to missed deadline.

@arkid15r arkid15r closed this Mar 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Contribute element container exceeds screen width on mobile

3 participants