Editor

Defined intabs.hcl

The editor resource provides a browser-based code editor tab that allows users to view and edit files. It supports multiple workspaces that can access files from the local filesystem or remote containers, enabling file manipulation within the lab environment.

Use Cases

As a lab author, you can use editor resources to provide file editing capabilities:

• Configuration Management: Allow users to edit application config files, server settings, and deployment configurations
• Code Development: Provide an integrated development environment for writing, modifying, and reviewing source code
• Multi-Environment Access: Access files from both the sandbox filesystem and across multiple containers in the same editor

Editor resources provide familiar file editing experiences within the lab interface, supporting hands-on learning with real file systems.

HCL Syntax

Basic Syntax

resource "editor" "name" {
  workspace "config" {
    directory = "/app/config"
  }
}

Full Syntax

resource "editor" "name" {
  workspace "local_files" {
    directory = "assets/templates"
  }

  workspace "container_config" {
    target    = resource.container.app_server
    directory = "/etc/app"
  }

  workspace "source_code" {
    target    = resource.container.dev_env
    directory = "/workspace/src"
  }
}

Fields

Field	Type	Required	Description
extensions	list(string)	—	List of VS Code extension IDs to enhance the editor with language support, linting, or other features (e.g., 'ms-python.python').
theme	string	—	Choose a color theme for the code editor to match your branding or learner preferences.
settings	string	—	Provide custom VS Code settings as a JSON string to configure editor behavior, formatting, or key bindings.
workspace	block	—	Define one or more workspaces to organize files from different locations (local or containers) in the editor sidebar.repeatable

Workspace

editor→Workspace

Workspace definitions for organizing file access

Field	Type	Required	Description
name	label	—	The display name for this workspace in the editor's file browser.
directory	string	✓	Absolute path to the directory you want to make available in this workspace. For container targets, must be a path inside the container.
target	referencecontainer	—	Optional. Reference a container to expose files from inside that container. Leave empty to use the local filesystem.

Examples

Local File Editing

resource "editor" "config_editor" {
  workspace "templates" {
    directory = "assets/config-templates"
  }

  workspace "scripts" {
    directory = "files/setup-scripts"
  }
}

Remote Container Files

resource "editor" "app_editor" {
  workspace "nginx_config" {
    target    = resource.container.web_server
    directory = "/etc/nginx/conf.d"
  }

  workspace "app_logs" {
    target    = resource.container.web_server
    directory = "/var/log/nginx"
  }
}

Development Environment

resource "editor" "dev_environment" {
  workspace "source" {
    target    = resource.container.dev_container
    directory = "/workspace/app"
  }

  workspace "tests" {
    target    = resource.container.dev_container
    directory = "/workspace/tests"
  }

  workspace "docs" {
    target    = resource.container.dev_container
    directory = "/workspace/docs"
  }
}

Mixed Local and Remote

resource "editor" "hybrid_editor" {
  workspace "local_assets" {
    directory = "files/static"
  }

  workspace "app_config" {
    target    = resource.container.application
    directory = "/app/config"
  }

  workspace "database_config" {
    target    = resource.container.postgres
    directory = "/etc/postgresql"
  }
}

Usage in Layout

Editors must be referenced in layout tabs:

resource "layout" "with_editor" {
  column {
    width = "40"
    instructions {}
  }

  column {
    width = "60"

    tab "terminal" {
      target = resource.terminal.main
      active = true
    }

    tab "code_editor" {
      target = resource.editor.config_editor
      title  = "Configuration Files"
    }
  }
}

File Permissions

When accessing files in containers:

# Ensure the target container has proper permissions
RUN mkdir -p /app/config && chmod 755 /app/config
RUN chown -R user:user /app/config

For read-only access, files can be mounted as volumes:

resource "container" "app" {
  image {
    name = "myapp:latest"
  }

  volume {
    source      = "./config"
    destination = "/app/config"
    type        = "bind"
    read_only   = true
  }
}

Best Practices

1. Logical Workspaces: Group related files into meaningful workspaces
2. Clear Names: Use descriptive workspace names that indicate content purpose
3. Permission Management: Ensure containers have appropriate file permissions
4. Directory Structure: Organize files in logical hierarchies within workspaces
5. Read-Only Content: Use read-only volumes for reference materials that shouldn’t be modified