EccClientElixirCloudRegistryServiceCreate Component

Overview

The ecc-client-elixir-cloud-registry-service-create component provides a comprehensive form interface for creating new service registrations in the Cloud Registry. It includes validation, error handling, and support for both basic and advanced service metadata.

Usage

Basic Service Creation

This example demonstrates the basic service creation form with default settings.

Properties

provider

The data provider responsible for creating services in the registry. You must provide a provider that implements the CloudRegistryProvider interface, which extends the base ServiceRegistryProvider with creation capabilities. See the Providers documentation for detailed information about available providers and how to create custom ones.

You can replace the provider at any time, e.g. when the user's token changes: the component then loads the service types from the new provider and sends all later requests through it. It keeps the form's input. provider takes precedence over baseUrl; if you remove it, the component uses baseUrl again.

import { RestCloudRegistryProvider } from '@elixir-cloud/cloud-registry/providers';
 
const provider = new RestCloudRegistryProvider('https://cloud-registry.example.com/ga4gh/registry/v1');
 
<EccClientElixirCloudRegistryServiceCreate provider={provider} />

admin

Whether the form offers the fields that only admins of the registry may set: a custom service ID and the timestamps (createdAt, updatedAt). Cloud Registry sets the timestamps itself, and only admins may register a service with an ID of their choice. Set admin to false for all other users: the form then hides these fields, and with them the "Advanced Configuration" section, and never sends them. Apps can take the value from admin of the registry's GET /me. As an attribute, only admin="false" (in any case) turns it off. The property only changes the form: the registry checks permissions itself.

<EccClientElixirCloudRegistryServiceCreate provider={provider} admin={me.admin} />

allowNewType

The form offers the registered service types (GET /services/types) as one list, labelled group · artifact · version (e.g. org.ga4gh · tes · 1.1.0). If allowNewType is true, the list starts with "Add new service type", set apart from the registered types, which shows required fields for the group, artifact and version of a new type; if no types are registered yet, the form shows these fields right away. If it is false, users can only choose a listed type; if none is registered, the form says so and can't be submitted. The list reloads after a service is created, so that a new type shows up. Cloud Registry may let only admins add types (custom.access_control.service_types: controlled): apps take the value from may_add_service_types of the registry's GET /me. As an attribute, allow-new-type="false" (in any case) turns it off. The property only changes the form: the registry checks permissions itself. In the example, me is the response of GET /me.

<EccClientElixirCloudRegistryServiceCreate provider={provider} allowNewType={me.may_add_service_types} />

environments

The environments that the form offers for environment, as values or { value, label } objects (EnvironmentOption); an empty list allows any value, and the form then shows a text field. The default is the GA4GH suggestion: prod, test, dev and staging.

Cloud Registry 0.6.0 and later publish the environments they allow (registration_rules.environments of GET /service-info, configured with custom.endpoints.services.environments). The form reads them and offers these instead, with the labels given in environments (or the default labels); environments applies only to registries and providers without these rules. A registry that allows any environment (an empty list) gets a text field, whatever environments says. A chosen environment that is no longer offered is cleared. As an attribute, environments takes a JSON list.

<EccClientElixirCloudRegistryServiceCreate
  provider={provider}
  environments={[{ value: 'prod', label: 'Production' }, 'qa']}
/>

Events

ecc-service-created

Emitted when a service is successfully created in the registry, providing the new service ID, the submitted service data, and a success message.

<EccClientElixirCloudRegistryServiceCreate 
  onEccServiceCreated={(event) => {
    console.log('Service created:', event.detail.serviceId);
    console.log('Service data:', event.detail.serviceData);
    console.log('Message:', event.detail.message);
    // Navigate to the new service or show success message
  }}
/>

ecc-service-create-failed

Emitted when service creation or loading the service types fails due to server errors, network issues, or other runtime problems.

• error: what went wrong, e.g. the registry's explanation (the problem's detail); if the service types can't be loaded, it starts with "Failed to load service types";
• status: the HTTP status of the failed request, if there was one, e.g. 401 (log in) or 403 (no role on the service);
• title, detail: the problem details that the registry sent, if any;
• serviceId: the ID of the existing service, for duplicate registrations (409);
• cause: the error that the provider threw.

The component reads status, title, detail and serviceId from the error that the provider throws, a CloudRegistryError for RestCloudRegistryProvider (see Errors). Custom providers can throw errors with the same fields.

<EccClientElixirCloudRegistryServiceCreate 
  onEccServiceCreateFailed={(event) => {
    console.error('Service creation failed:', event.detail.error);
    // Display error message to user
    alert(`Failed to create service: ${event.detail.error}`);
  }}
/>

ecc-service-create-validation-failed

Emitted when there are validation errors in the form data before submission or when the component is misconfigured.

<EccClientElixirCloudRegistryServiceCreate 
  onEccServiceCreateValidationFailed={(event) => {
    console.error('Validation error:', event.detail.error);
    // Handle validation errors appropriately
    alert(`Please fix the following error: ${event.detail.error}`);
  }}
/>

ecc-service-form-changed

Emitted whenever the form's values change, e.g. to warn users before they leave a form with unsaved input. dirty tells whether the values differ from those of the empty form; it is false again after "Reset" and after a successful create. The read-only property dirty of the element always holds the current value; it is already false while ecc-service-created is handled.

const [unsaved, setUnsaved] = useState(false);
 
<EccClientElixirCloudRegistryServiceCreate
  onEccServiceFormChanged={(event) => setUnsaved(event.detail.dirty)}
/>