cc-oauth-consumer: init component

[HeleneAmouzou]

Context

This component is dedicated to manage an oauth consumer.

To be discussed

• naming (component, prop, etc.)
  • access => read ? manage => write ?
  • oauthConsumerFormState ou state ?

Technical details

This component will be split into 2 components:

• cc-oauth-consumer-form : a component with a form for the creation and edition of an oauth consumer,
• cc-oauth-consumer : a component displaying oauth consumer information.

Inputs

Attributes/properties

Property	Type	Default value	Mandatory	Description
state	Object	{ type: 'loading' }	true	Sets the state of the component.

CSS custom property

Name	Type	Default value	Description
xxx	Yyyy	null	TODO

CSS part

Name	Description
xxx	TODO

Outputs

Event	Data type	Description
cc-oauth-consumer-form:create	Yyyy	Fires when clicking the creation form submit button
cc-oauth-consumer-form:update	Yyyy	Fires when clicking the update form submit button.
cc-oauth-consumer-form:delete	Yyyy	Fires whenever the delete button is clicked.

Type Definitions

export type OAuthConsumerFormState =
  | OAuthConsumerFormStateIdleCreate
  | OAuthConsumerFormStateCreating
  | OAuthConsumerFormStateIdleUpdate
  | OAuthConsumerFormStateUpdating
  | OAuthConsumerFormStateDeleting
  | OAuthConsumerFormLoading
  | OAuthConsumerFormStateError;

export interface OAuthConsumerFormStateIdleCreate {
  type: 'idle-create';
}

export interface OAuthConsumerFormStateCreating {
  type: 'creating';
}

export interface OAuthConsumerFormStateIdleUpdate {
  type: 'idle-update';
  values?: {
    name: string;
    homePageUrl: string;
    appBaseUrl: string;
    description: string;
    image: string;
    rights: Array<Right>;
  };
}

export interface OAuthConsumerFormStateUpdating {
  type: 'updating';
  values?: {
    name: string;
    homePageUrl: string;
    appBaseUrl: string;
    description: string;
    image: string;
    rights: Array<Right>;
  };
}

export interface OAuthConsumerFormStateDeleting {
  type: 'deleting';
  values?: {
    name: string;
    homePageUrl: string;
    appBaseUrl: string;
    description: string;
    image: string;
    rights: Array<Right>;
  };
}

export interface OAuthConsumerFormLoading {
  type: 'loading';
}

export interface OAuthConsumerFormStateError {
  type: 'error';
}

export interface NewOauthConsumer {
  name: string;
  homePageUrl: string;
  appBaseUrl: string;
  description: string;
  image: string;
  rights: Array<Right>;
}

interface Right {
  value: string;
  isEnable: boolean;
}

Data/APIs

• GET api.clever-cloud.com/v2/organisations/{orga_id}/consumers/{key}
• CREATE api.clever-cloud.com/v2/organisations/{orga_id}/consumers
• PUT api.clever-cloud.com/v2/organisations/{orga_id}/consumers/{key}
• DELETE api.clever-cloud.com/v2/organisations/{orga_id}/consumers/{key}

Stories & states

• Idle create
• Idle update
• Creating
• Updating
• Skeleton/loading
• Error
• Deleting
• Simulation

UX writing & i18n

TO DO

• design meetings with Marion
• Listing API
• Onboarding formulaires/smart
• Create component (create and edit form)
  • Create
    • Integration (HTML/CSS)
    • i18n
    • Inputs (props, attributs, slots, etc.)
    • Form management
    • Events
    • Smart, API calls
  • Edit
    • Integration (HTML/CSS)
    • i18n
    • Inputs (props, attributs, slots, etc.)
    • Form management
    • Events
    • Smart, API calls
• Create component (information screen)
  • Integration (HTML/CSS)
  • i18n
  • Inputs (props, attributs, slots, etc.)
• Accessibility
• Q/A