Skip to content

Commit

Permalink
feat(Migration developer): Added account picker and button from SDK s…
Browse files Browse the repository at this point in the history 
…ection
  • Loading branch information
@nbaenam
nbaenam committed Apr 30, 2024
1 parent 2c1be51 commit a5bb315
Show file tree
Hide file tree
Showing 21 changed files with 786 additions and 1 deletion.
2 changes: 1 addition & 1 deletion ...cs/accounts/accounts/account-maintenance/change-your-new-relic-account-name.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ To add and rename accounts from the UI:
1. From the [Access management UI](https://one.newrelic.com/admin-portal/organizations/organization-detail), click <DoNotTranslate>**Accounts**</DoNotTranslate>.
2. For the account you want to rename, click <Icon name="fe-more-horizontal"/> and then click <DoNotTranslate>**Edit account**</DoNotTranslate>.

For how to use the API for this, see [our NerdGraph docs](/docs/apis/nerdgraph/examples/manage-accounts-nerdgraph).
For how to use the API for this, see [our NerdGraph docs](/docs/apis/nerdgraph/get-started/introduction-new-relic-nerdgraph/).

Account names are differentiated by [account ID](/docs/accounts/accounts-billing/account-structure/account-id), not by name. For this reason, an organization can have multiple accounts with the same name.

Expand Down
239 changes: 239 additions & 0 deletions .../docs/new-relic-solutions/build-nr-ui/sdk-component/controls/account-picker.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
---
title: 'AccountPicker'
tags:
- SDK components
- New Relic apps
- UI components
- chart components
- query and storage components
- Platform APIs
- AccountPicker
metaDescription: 'Learn how to work the AccountPicker component'
freshnessValidatedDate: 2024-05-13
---

## Usage [#usage]

```js
import { AccountPicker } from 'nr1'
```

## Examples [#examples]

### Basic [#basic]

```jsx
class Example extends React.Component {
constructor() {
super(...arguments);

this.state = { accountId: null };

this.onChangeAccount = this.onChangeAccount.bind(this);
}

onChangeAccount(_, value) {
alert(`Selected account: ${value}`);

this.setState({ accountId: value });
}

render() {
return (
<AccountPicker
value={this.state.accountId}
onChange={this.onChangeAccount}
/>
);
}
}
```

### With inline label [#inline-label]

```js
class Example extends React.Component {
constructor() {
super(...arguments);

this.state = { accountId: null };

this.onChangeAccount = this.onChangeAccount.bind(this);
}

onChangeAccount(_, value) {
alert(`Selected account: ${value}`);

this.setState({ accountId: value });
}

render() {
return (
<AccountPicker
label="Account"
labelInline
value={this.state.accountId}
onChange={this.onChangeAccount}
/>
);
}
}
```

## Props [#props]


<table>

<tbody>
<tr>
<td>
`ariaLabel`
</td>
<td>
string
</td>
<td>
Provide a descriptive label for this control, for example **Accounts**.
</td>
</tr>
<tr>
<td>
`className`
</td>
<td>
string
</td>
<td>
Appends class names to the component. Use it just for positioning and spacing purposes.
</td>
</tr>
<tr>
<td>
`crossAccount`
</td>
<td>
boolean
</td>
<td>
By default, its value is `false`. Shows an option at the top named **All accounts**. When selected, the value provided by the `onChange` callback is `AccountPicker.CROSS_ACCOUNT`. This is useful when you have functionality that can operate on multiple accounts.
</td>
</tr>
<tr>
<td>
`disabled`
</td>
<td>
boolean
</td>
<td>
If `true`, the dropdown is not available for interaction.
</td>
</tr>
<tr>
<td>
`label`
</td>
<td>
string
</td>
<td>
Text to display as label.
</td>
</tr>
<tr>
<td>
`labelInline`
</td>
<td>
boolean
</td>
<td>
Display the label inline the form control. Use only when the component is not inside a `Form`. In that case set `layoutType` to `Form.LAYOUT_TYPE.SPLIT` in the `Form` component.
</td>
</tr>
<tr>
<td>
`onChange`
</td>
<td>
function
</td>
<td>
Callback fired every time the user clicks an account from the list.

```
function (
event: React.MouseEvent,
value: number
Id of the account selected.
)
```
</td>
</tr>
<tr>
<td>
`spacingType`
</td>
<td>
enum[]
</td>
<td>
Spacing property. Spacing is defined as a tuple of zero to four values, which follow the same conventions as CSS properties like `margin` or `padding`. To omit a value, use `SPACING_TYPE.OMIT`.

```js
<Array of
<One of
AccountPicker.SPACING_TYPE.EXTRA_LARGE,
AccountPicker.SPACING_TYPE.LARGE,
AccountPicker.SPACING_TYPE.MEDIUM,
AccountPicker.SPACING_TYPE.NONE,
AccountPicker.SPACING_TYPE.OMIT,
AccountPicker.SPACING_TYPE.SMALL,
>
>
```

</td>
</tr>
<tr>
<td>
`style`
</td>
<td>
object
</td>
<td>
Inline style for custom styling. Should be used only for positioning and spacing purposes.
</td>
</tr>
<tr>
<td>
`testId`
</td>
<td>
string
</td>
<td>
Adds a `data-test-id` attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot. For example, `my-nerdpack.some-element`.

**Note**: You might not see `data-test-id` attributes as they are removed from the DOM, to debug them pass an `e2e-test` query parameter to the URL.
</td>
</tr>
<tr>
<td>
`value`
</td>
<td>
number|enum
</td>
<td>
Id of the selected account.
</td>
</tr>
</tbody>
</table>

0 comments on commit a5bb315

Please sign in to comment.