admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 31 Wiki Activity
changemaker.lite/mkdocs/docs/v2/frontend/pages/admin/gitea-page.md

4.7 KiB
Raw Blame History

GiteaPage

Overview

File: admin/src/pages/GiteaPage.tsx

Route: /app/services/gitea

Role Requirements: Any authenticated user

Purpose: Provides an embedded interface to the Gitea Git repository hosting service via iframe. Gitea is a self-hosted Git service (similar to GitHub/GitLab) that allows developers to manage source code repositories, issues, pull requests, and collaboration. This page embeds Gitea with status monitoring and mobile device detection.

Key Features:

  • Full-page iframe embed of Gitea service
  • Service online/offline status monitoring
  • Mobile device detection with warning screen
  • "Refresh" and "Open in New Tab" buttons
  • Fullbleed layout for maximum repository browser space
  • Git repository management, issue tracking, pull requests

Layout: AppLayout with fullbleed

Features

1. Service Status Monitoring

Status Display:

  • Green "Online" badge when Gitea is accessible
  • Red "Offline" badge when unavailable
  • Blue "Checking..." badge during status check

2. Mobile Device Detection

Mobile Warning:

  • BranchesOutlined icon (48px)
  • Message: "The Git repository browser requires a desktop browser"
  • "Open in New Tab" button for external access

3. Git Repository Management

Gitea Features (within iframe):

  • Repositories: Create, clone, browse Git repositories
  • Code Browser: View files, commits, branches, tags
  • Issues: Bug tracking and feature requests
  • Pull Requests: Code review and merging workflow
  • Wiki: Project documentation
  • Organizations: Team collaboration
  • Access Control: Public/private repos, user permissions

Component Structure

export default function GiteaPage() {
  const { setPageHeader } = useOutletContext<AppOutletContext>();
  const screens = Grid.useBreakpoint();
  const isMobile = !screens.md;

  const [online, setOnline] = useState<boolean | null>(null);
  const [config, setConfig] = useState<ServicesConfig | null>(null);
  const [loading, setLoading] = useState(true);

  const fetchStatus = useCallback(async () => {
    try {
      const [statusRes, configRes] = await Promise.all([
        api.get<ServicesStatus>('/services/status'),
        api.get<ServicesConfig>('/services/config'),
      ]);
      setOnline(statusRes.data.gitea.online);
      setConfig(configRes.data);
    } catch {
      setOnline(false);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchStatus();
  }, [fetchStatus]);

  const serviceUrl = config
    ? buildServiceUrl(config.giteaSubdomain, config.domain, config.giteaPort)
    : null;

  // Header actions, mobile warning, loading, offline states...
  // Iframe embed

  return (
    <iframe
      src={serviceUrl}
      style={{
        width: '100%',
        height: 'calc(100vh - 64px)',
        border: 'none',
        display: 'block',
      }}
      title="Gitea"
    />
  );
}

API Integration

Endpoints Used

  1. GET /api/services/status - Check Gitea health
  2. GET /api/services/config - Fetch subdomain/port config

Example Responses

Status:

{
  "gitea": { "online": true }
}

Config:

{
  "domain": "cmlite.org",
  "giteaSubdomain": "git",
  "giteaPort": 3030
}

Service URL:

  • Production: http://git.cmlite.org
  • Development: http://localhost:3030

User Workflow

Accessing Gitea

  1. Navigate to "Services" → "Git Repository" in sidebar
  2. Check status badge (Online/Offline)
  3. View Gitea interface in iframe
  4. Or click "Open in New Tab" for full window

Common Use Cases

Repository Management:

  • Create new repository for project
  • Clone repository URL for local development
  • Browse code, commits, branches

Collaboration:

  • Create issues for bugs/features
  • Submit pull requests for code review
  • Comment on code changes
  • Merge approved pull requests

Documentation:

  • Edit project wiki
  • Update README files
  • Maintain changelog

Troubleshooting

Problem: Gitea Shows "Offline"

Solutions:

  1. Check Docker container:

    docker compose ps gitea

  2. Check logs:

    docker compose logs gitea

  3. Restart service:

    docker compose restart gitea

Problem: Login Required

Symptoms: Iframe shows Gitea login screen

Solutions:

  1. Check Gitea credentials in .env:

    • GITEA_ADMIN_USER
    • GITEA_ADMIN_PASSWORD

  2. Login manually with admin credentials

  3. Create user account if needed

Related Documentation