Skip to content

Conversation

@muhammadrafayasif
Copy link

@muhammadrafayasif muhammadrafayasif commented Oct 1, 2025

According to the issue, I changed the descriptions of every major title in all locales.

Resolves #435

Summary by CodeRabbit

  • New Features

    • Added a descriptive subtitle to the page header for clearer context.
    • Added a descriptive subtitle for the repositories section to clarify repository deployment settings.
  • Style

    • Adjusted header layout/typography for improved readability (small typography change to rely on default styling).
  • Localization

    • Updated English, Spanish, French, and Kannada copy for containers, settings, domains, file manager, and added repositories descriptions for consistent, action-oriented guidance across languages.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 1, 2025

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Added subtitle/description rendering under dashboard headers and threaded a new required description prop through the dashboard header component; updated multiple i18n description strings (en, es, fr, kn). No runtime behavior or export removals beyond the new prop requirement and UI text changes.

Changes

Cohort / File(s) Summary
Containers page header
view/app/containers/page.tsx
Replaced the title span with a div containing the title and a new muted description line (TypographyMuted); removed explicit bold class on TypographyH1.
Dashboard header component
view/components/layout/dashboard-page-header.tsx
Added required prop description: string to DashboardUtilityHeaderProps<T> and render a TypographyMuted element for the description.
Self-host header usage
view/app/self-host/components/github-repositories/list-repositories.tsx
Passed description={t('selfHost.repositories.description')} to DahboardUtilityHeader, supplying translated description text.
i18n description updates
view/lib/i18n/locales/en.json, view/lib/i18n/locales/es.json, view/lib/i18n/locales/fr.json, view/lib/i18n/locales/kn.json
Updated multiple description strings for containers.description, settings.description, domains.page.description, fileManager.header.subtitle; added repositories.description in several locales (and expanded repository translations in fr).

Sequence Diagram(s)

(omitted — changes are UI/text additions; no control-flow or new interactions to diagram)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

nixopus-view

Suggested reviewers

  • raghavyuva

Poem

I nudge the header, soft and bright,
A tiny line beneath the light.
In every tongue the message hops,
From repos to files — no missed stops.
Thump-thump, I cheer — the UI pops. 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title “Updated descriptions below main header pages” succinctly captures the primary change of adding or revising description text under the main headers across screens, matching the PR’s focus on updating those descriptions without introducing noise or extraneous detail.
Linked Issues Check ✅ Passed The pull request adds a description prop and rendering support in the DashboardUtilityHeader component, updates the container and self-host screens to pass the new description, and standardizes the corresponding translation keys across English, Spanish, French, and Kannada. These code changes satisfy the objective of issue #435 by placing concise, internationalized descriptions beneath each major header.
Out of Scope Changes Check ✅ Passed All modifications—component interface updates, header rendering adjustments, screen-level usage, and locale string revisions—directly relate to introducing or updating descriptions under primary headers and do not include any unrelated or extraneous changes.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@muhammadrafayasif
Copy link
Author

Hello @raghavyuva , please review this PR and provide feedback if possible.
Thanks

@raghavyuva raghavyuva requested a review from zhravan October 4, 2025 14:59
@raghavyuva
Copy link
Owner

@zhravan tagging you for review

@zhravan
Copy link
Collaborator

zhravan commented Oct 6, 2025

@muhammadrafayasif: Everything looks good to me! Can you add the same for Self Hosted screen as well? For the self host screen, we are missing this particular Muted title description.

Rest all LGTM.

image

Steps to reproduce:

  1. Login as admin/user
  2. Click on Self Host on sidebar
  3. Connect to github with your account
  4. Voila! You will see the current screen shown above

@muhammadrafayasif
Copy link
Author

@muhammadrafayasif: Everything looks good to me! Can you add the same for Self Hosted screen as well? For the self host screen, we are missing this particular Muted title description.

Rest all LGTM.

image

Steps to reproduce:

  1. Login as admin/user
  2. Click on Self Host on sidebar
  3. Connect to github with your account
  4. Voila! You will see the current screen shown above

Thanks for pointing this out, I'll be sure to resolve it by tonight!

@muhammadrafayasif
Copy link
Author

muhammadrafayasif commented Oct 6, 2025

@muhammadrafayasif: Everything looks good to me! Can you add the same for Self Hosted screen as well? For the self host screen, we are missing this particular Muted title description.

Rest all LGTM.
image

Steps to reproduce:

1. Login as admin/user

2. Click on Self Host on sidebar

3. Connect to github with your account

4. Voila! You will see the current screen shown above
err_message

@zhravan Unfortunately, I am unable to access this page due to the app being set up on localhost causing GitHub to throw this error. I've tried setting it up on cloudflare so I can access this page, but I ended up facing difficulties integrating with the database...

@zhravan
Copy link
Collaborator

zhravan commented Oct 7, 2025

@muhammadrafayasif: Everything looks good to me! Can you add the same for Self Hosted screen as well? For the self host screen, we are missing this particular Muted title description.
Rest all LGTM.
image
Steps to reproduce:

1. Login as admin/user

2. Click on Self Host on sidebar

3. Connect to github with your account

4. Voila! You will see the current screen shown above
err_message @zhravan Unfortunately, I am unable to access this page due to the app being set up on localhost causing GitHub to throw this error. I've tried setting it up on cloudflare so I can access this page, but I ended up facing difficulties integrating with the database...

@muhammadrafayasif : Add a dummy URL in frontend for webhook in .env : WEBHOOK_URL=https://smee.io/xxxx

@muhammadrafayasif
Copy link
Author

Thanks for your support @zhravan, I've added a muted title description to this page as per your request. Additionally, the French locale didn't have the translations for the repository page so I added that too.

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 f84a0f8 and 9097531.

📒 Files selected for processing (6)
  • view/app/self-host/components/github-repositories/list-repositories.tsx (1 hunks)
  • view/components/layout/dashboard-page-header.tsx (2 hunks)
  • view/lib/i18n/locales/en.json (5 hunks)
  • view/lib/i18n/locales/es.json (5 hunks)
  • view/lib/i18n/locales/fr.json (5 hunks)
  • view/lib/i18n/locales/kn.json (5 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • view/lib/i18n/locales/en.json
  • view/lib/i18n/locales/fr.json
🧰 Additional context used
🧬 Code graph analysis (1)
view/components/layout/dashboard-page-header.tsx (1)
view/components/ui/typography.tsx (2)
  • TypographyH2 (9-15)
  • TypographyMuted (73-77)
🔇 Additional comments (3)
view/app/self-host/components/github-repositories/list-repositories.tsx (1)

66-66: LGTM! Addresses reviewer feedback.

The addition of the description prop successfully addresses the reviewer's request to add a description to the Self Hosted repositories screen.

view/lib/i18n/locales/kn.json (1)

19-19: LGTM! Kannada translations align with Spanish updates.

The Kannada translations for the description fields are consistent with the Spanish locale updates and properly support the new description prop functionality.

Also applies to: 193-193, 378-378, 794-794, 1214-1214

view/components/layout/dashboard-page-header.tsx (1)

35-35: LGTM – all <DashboardUtilityHeader> usages now include the required description prop.

"containers": {
"title": "Contenedores",
"description": "Vista previa de todos los contenedores",
"description": "Ver y administrar sus contenedores en ejecución o detenidos",
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 | 🔴 Critical

🧩 Analysis chain

LGTM! Verify other locales updated.

The Spanish translations for the description fields are well-formed and contextually appropriate. Ensure that the corresponding translation keys in en.json and fr.json have also been updated, as mentioned in the PR objectives.

Run the following script to verify all locale files have the required keys:

Also applies to: 192-192, 421-421, 797-797, 1213-1213


🏁 Script executed:

#!/bin/bash
# Description: Verify translation keys exist in all locale files

# Check for repositories.description in all locale files
echo "Checking repositories.description key:"
fd -e json . view/lib/i18n/locales/ --exec grep -l "repositories.description"

# Check for other updated description keys
echo -e "\nChecking other description keys:"
for key in "containers.description" "settings.description" "domains.page.description" "fileManager.header.subtitle"; do
  echo "Key: $key"
  fd -e json . view/lib/i18n/locales/ --exec grep -l "$key"
done

Length of output: 189


🏁 Script executed:

#!/bin/bash
DIR="view/lib/i18n/locales"
keys=("containers.description" "settings.description" "domains.page.description" "fileManager.header.subtitle" "repositories.description")

for file in "$DIR"/*.json; do
  echo "$file:"
  for key in "${keys[@]}"; do
    top="${key%%.*}"
    sub="${key#*.}"
    if jq -e --arg top "$top" --arg sub "$sub" 'has($top) and .[$top] | has($sub)' "$file" > /dev/null; then
      echo "  $key: found"
    else
      echo "  $key: missing"
    fi
  done
done

Length of output: 2771


🏁 Script executed:

#!/bin/bash
FILE="view/lib/i18n/locales/es.json"
echo "=== Top of $FILE ==="
sed -n '1,50p' "$FILE"
echo -e "\n=== Around error line 1311 in $FILE ==="
sed -n '1280,1360p' "$FILE"

Length of output: 3103


🏁 Script executed:

#!/usr/bin/env python3
import json, glob, os

keys = [
    "containers.description",
    "settings.description",
    "domains.page.description",
    "fileManager.header.subtitle",
    "repositories.description"
]
locale_dir = "view/lib/i18n/locales"

for filepath in sorted(glob.glob(os.path.join(locale_dir, "*.json"))):
    print(f"{os.path.basename(filepath)}:")
    try:
        data = json.load(open(filepath, encoding="utf-8"))
    except Exception as e:
        print(f"  Error parsing JSON: {e}")
        continue
    for key in keys:
        parts = key.split(".")
        d = data
        found = True
        for part in parts:
            if isinstance(d, dict) and part in d:
                d = d[part]
            else:
                found = False
                break
        print(f"  {key}: {'found' if found else 'missing'}")
    print()

Length of output: 654


🏁 Script executed:

#!/usr/bin/env bash
LOCALE_DIR="view/lib/i18n/locales"
keys=("containers.description" "settings.description" "domains.page.description" "fileManager.header.subtitle" "repositories.description")

for file in "$LOCALE_DIR"/*.json; do
  echo "Checking $file"
  python3 - "$file" << 'EOF'
import json, sys
path = sys.argv[1]
data = json.load(open(path, encoding="utf-8"))
keys = ["containers.description","settings.description","domains.page.description","fileManager.header.subtitle","repositories.description"]
for key in keys:
    d = data
    for part in key.split("."):
        if isinstance(d, dict) and part in d:
            d = d[part]
        else:
            print(f"{key}: missing")
            break
    else:
        print(f"{key}: found")
EOF
done

Length of output: 799


Add missing translation keys in all locales

  • domains.page.description
  • repositories.description
    These keys are absent from view/lib/i18n/locales/*.json. Add them with appropriate translations to en.json, es.json, fr.json, and kn.json.
🤖 Prompt for AI Agents
In view/lib/i18n/locales/es.json around line 18, the locale is missing keys
"domains.page.description" and "repositories.description"; add them with
appropriate Spanish translations (e.g., domains.page.description: "Ver y
administrar sus dominios" and repositories.description: "Ver y administrar sus
repositorios"); also add the same two keys to view/lib/i18n/locales/en.json,
fr.json and kn.json with appropriate translations for each locale (English:
"View and manage your domains" / "View and manage your repositories"; French:
"Afficher et gérer vos domaines" / "Afficher et gérer vos dépôts"; Kannada:
provide correct Kannada equivalents), ensuring JSON keys are added in the same
structure and any trailing commas / formatting follow existing file style.

@zhravan
Copy link
Collaborator

zhravan commented Oct 8, 2025

@muhammadrafayasif: Can you share a video recording of the same for reference?

@muhammadrafayasif
Copy link
Author

@zhravan: here you go

video.mp4

@zhravan zhravan changed the base branch from master to feat/develop October 8, 2025 15:00
@zhravan
Copy link
Collaborator

zhravan commented Oct 8, 2025

@muhammadrafayasif: Will do final review and merge it for coming release cycle.

@zhravan zhravan added enhancement New feature or request hacktoberfest Issues relevant to the Hacktoberfest event hacktoberfest-accepted PRs accepted under Hacktober Fest event hacktoberfest2025 Issues for Hacktoberfest event - 2025 labels Oct 8, 2025
@zhravan
Copy link
Collaborator

zhravan commented Oct 8, 2025

@zhravan: here you go

video.mp4

@muhammadrafayasif Hey in the video, for Self Hosted Application, I still see no log Header Description? Otherwise rest looks good

@muhammadrafayasif
Copy link
Author

muhammadrafayasif commented Oct 8, 2025

@zhravan: here you go

video.mp4

Hey in the video, for Self Hosted Application, I still see no log Header Description?

Sorry I don't understand, I didn't see any log header title during development?

@zhravan
Copy link
Collaborator

zhravan commented Oct 8, 2025

@zhravan: here you go
video.mp4

Hey in the video, for Self Hosted Application, I still see no log Header Description?

Sorry I don't understand, I didn't see any log header title during development?

@muhammadrafayasif: Check usage of DahboardUtilityHeader component in dashboard-page-header.tsx. This is a common component used for previewing repository and self hosted apps.

Ref: https://github.com/raghavyuva/nixopus/blob/master/view/components/layout/dashboard-page-header.tsx

@muhammadrafayasif
Copy link
Author

@zhravan: here you go
video.mp4

Hey in the video, for Self Hosted Application, I still see no log Header Description?

Sorry I don't understand, I didn't see any log header title during development?

@muhammadrafayasif: Check usage of DahboardUtilityHeader component in dashboard-page-header.tsx.

This is a common component used for previewing repository and self hosted apps.

Alright thanks, I'll take a look and commit soon 👌

@github-actions github-actions bot force-pushed the feat/develop branch 25 times, most recently from da06208 to b915b03 Compare October 28, 2025 16:52
@github-actions github-actions bot force-pushed the feat/develop branch 5 times, most recently from 927519c to 1c41294 Compare October 30, 2025 11:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request hacktoberfest Issues relevant to the Hacktoberfest event hacktoberfest2025 Issues for Hacktoberfest event - 2025 hacktoberfest-accepted PRs accepted under Hacktober Fest event

Projects

None yet

Development

Successfully merging this pull request may close these issues.

enhancement(ui): concise descriptions under headers on all major screens

3 participants