Skip to content

Add Blob Storage Explorer page to Staff Portal Tech Admin to navigate and verify blobs in storage account #303

Description

@noce-nick

Summary

Add a new Blob Storage Explorer page to the Owner Community Staff Portal Tech Admin area, providing a read-only interface for browsing Azure Blob Storage within the current environment. Developers should be able to navigate containers and virtual folders, inspect blob metadata and tags, preview supported file types, and download blobs.

The feature should follow the existing Tech Admin patterns established by the Database Explorer and Queue Explorer.

Requirements

Authorization

Access to the Blob Storage Explorer must be protected by:

  • staffRole.techAdminPermissions.canViewBlobExplorer

Authorization must be enforced at both layers:

  • Frontend: Restrict the Tech Admin navigation entry, route, and page.
  • Backend: Restrict all GraphQL operations for the Blob Storage Explorer.

Navigation

Add a new Tech Admin navigation entry:

  • Blob Storage Explorer

The page should be consistent with the existing Tech Admin tooling.

Blob Navigation

The explorer shall allow navigation of the configured blob storage account for the current environment via the existing BlobStorageService.

Capabilities include:

  • List blob containers
  • Navigate virtual folder hierarchies
  • Browse folder contents
  • Navigate back up the hierarchy
  • Display breadcrumbs
  • Refresh the current view

Virtual folders should be displayed as clickable entries that navigate into that folder, querying only the contents of the selected path. Recursive enumeration of descendant folders should be avoided.

Blob Listing

For each blob, display:

  • Blob name
  • Content type
  • Size
  • Last modified
  • Blob tags
  • Blob metadata
  • View action

The explorer is read-only. Blob upload, edit, rename, move, and delete operations are out of scope.

Blob Preview & Download

Selecting View opens a modal that:

  • Previews supported file types (images, PDFs, text, JSON, etc.)
  • Provides a Download action for the original blob

Searching & Filtering

Support server-side filtering where supported by Azure Blob Storage.

Minimum supported filters:

  • Blob name
  • Metadata key/value
  • Blob tags

Performance

The explorer must scale efficiently to large storage accounts by:

  • Using server-side pagination/continuation tokens
  • Querying only the selected container/folder
  • Avoiding recursive hierarchy traversal
  • Minimizing network requests and payload sizes
  • Supporting incremental loading where appropriate

Blob Storage Service

The Blob Storage Explorer should leverage the existing BlobStorageService. Extend the service as necessary to support navigation, pagination, metadata/tag retrieval, filtering, preview, and download functionality. New public framework capabilities must include appropriate unit test coverage.

Acceptance Criteria

  • New Blob Storage Explorer page added to Tech Admin.
  • Navigation entry is visible only to users with techAdminPermissions.canViewBlobExplorer.
  • All Blob Storage Explorer GraphQL operations require techAdminPermissions.canViewBlobExplorer.
  • Users can browse blob containers and virtual folders.
  • Blob listings display name, content type, size, last modified, metadata, tags, and a View action.
  • Developers can preview supported blob types within the application.
  • Developers can download blobs from the preview dialog.
  • Blob filtering by name, metadata, and tags is supported.
  • The explorer performs efficiently against large storage accounts through optimized querying and pagination.
  • Storybook coverage is provided for the new UI components.
  • Acceptance tests are added for authorization, navigation, preview, download, and filtering scenarios.
  • Unit tests are added for new BlobStorageService functionality.
  • Architecture tests continue to pass.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    Status
    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions