Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

✨ Utility: Ports

Open
  • Is something wrong?
#1,833 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
30/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
swift
Domain
desktop, devtools

Research direction

Start by locating the Utility Area and reviewing the port-forwarding feature introduced in #1798. Define the Ports utility around the listed table, context-menu actions, filtering, forwarding state, and errors; use ContentUnavailableView for the zero state. Done means the utility supports the stated acceptance criteria and updates as ports are forwarded or stopped.

Written by the indexing model from the issue text.

Description

enhancement navigator
Description:

We should add a Ports utility to the Utility Area in CodeEdit that allows users to manage port forwarding within their development environment. This utility will make it easy for users to forward ports, monitor active ports, and configure various port-related settings from within the editor. The functionality will be visually displayed in a table where users can see port numbers, forwarded addresses, and port visibility (private or public). The user will also be able to interact with individual ports through a context menu.

Expected Behavior
  1. Ports Management Interface:
    • A dedicated utility within the Utility Area that lists forwarded ports in a table format.
    • The table should include columns for:
    • Port number
    • Forwarded address
    • Port visibility (Private or Public)
    • Origin (how the port was forwarded)
    • Status (running or stopped)
  2. Context Menu for Each Port:
    • Right-clicking (or Control-clicking) a port should bring up a context menu with the following actions:
      • Open in Browser: Opens the forwarded port in the default web browser.
      • Preview in Editor: If applicable, open the forwarded address in the editor’s built-in preview.
      • Set Port Label: Allows the user to assign a label or name to the port for easier identification.
      • Copy Local Address: Copies the local IP/hostname and port to the clipboard.
      • Port Visibility: Toggle between Private (accessible only to the local machine) and Public (accessible externally).
      • Change Port Protocol: Allow users to change the protocol used for the port (e.g., HTTP, HTTPS).
      • Stop Forwarding Port: Stops forwarding the selected port.
      • Forward a Port: Manually forward a new port by specifying the port number and address.
  3. Port Visibility and Protocol:
    • Ports can be toggled between Private (only accessible locally) and Public (accessible to other devices).
    • Users should be able to modify the protocol for a forwarded port (e.g., switching between HTTP and HTTPS).
  4. Filter/Search Ports:
    • A filter or search input should be provided at the bottom of the table to quickly find ports by number or address.
  5. Keyboard Shortcuts:
    • Consider adding keyboard shortcuts for key actions, such as stopping a port or toggling visibility.
  6. Error Handling:
    • If a port fails to forward or an error occurs during interaction, display a clear error message (e.g., “Port forwarding failed”).
    • Gracefully handle cases where a forwarded port is no longer available or conflicts arise.
Acceptance Criteria
  1. A new Ports Management Utility is available in the Utility Area where users can see and manage their forwarded ports.
  2. Users can forward new ports, stop forwarding, and toggle visibility between private and public with ease.
  3. Right-clicking a port shows a context menu with actions like Open in Browser, Preview in Editor, and Change Port Protocol.
  4. Ports can be filtered or searched for using a filter input in the interface.
  5. If a forwarded port encounters an error, the system displays a meaningful error message.
  6. The interface updates dynamically as ports are forwarded or stopped.
Screenshots

image

image

[!NOTE]
Please use the ContentUnavailableView for the zero-state.

Original Issue

I have just built the latest CodeEdit build and used the new feature introduced in #1798, and I noticed that there was no menu to manage open ports. For example, if I ran a web server on http://localhost:3000, an editor like VSCode would show that there is an open port in it's status bar:

image

What if CodeEdit had open ports in the navigator?

Screenshot 2024-08-01 at 10 13 43 AM

Dominant language
Swift
Stars
23k
Forks
1.2k
No merged PRs in 30d

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeEditApp/CodeEdit

All issues in CodeEditApp/CodeEdit

Similar issues

More Swift issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.