UI: Glimmerize - Colocate template and remove component file (#19569)

This commit is contained in:
Kianna 2023-03-17 07:38:52 -07:00 committed by GitHub
parent f0283988bb
commit d6e1dec686
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 26 additions and 243 deletions

View file

@ -1,23 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/**
* @module FormError
* FormError components are used to show an error on a form field that is more compact than the
* normal MessageError component. This component adds an icon and styling to the content of the
* component, so additionally styling (bold, italic) and links are allowed.
*
* @example
* ```js
* <FormError>Oh no <em>something bad</em>! <a href="#">Do something</a></FormError>
* ```
*/
import Component from '@ember/component';
import layout from '../templates/components/form-error';
export default Component.extend({
layout,
});

View file

@ -1,22 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@ember/component';
import layout from '../templates/components/layout-loading';
/**
* @module LayoutLoading
* `LayoutLoading` displays the `VaultLogoSpinner` component in a centered full-page layout.
*
* @example
* ```js
* <LayoutLoading />
* ```
*/
export default Component.extend({
layout,
tagName: '',
});

View file

@ -0,0 +1,9 @@
<li class="action">
{{#if @loadingParam}}
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
{{else}}
{{yield}}
{{/if}}
</li>

View file

@ -1,27 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/**
* @module MenuLoader
* MenuLoader components are used to show a loading state when fetching data is triggered by opening a
* popup menu.
*
* @example
* ```js
* <MenuLoader @loadingParam={model.updatePath.isPending} />
* ```
*
* @param loadingParam {Boolean} - If the value of this param is true, the loading state will be rendered,
* else the component will yield.
*/
import Component from '@ember/component';
import layout from '../templates/components/menu-loader';
export default Component.extend({
tagName: 'li',
classNames: 'action',
layout,
loadingParam: null,
});

View file

@ -0,0 +1,16 @@
<span>
<BasicDropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen={{@onOpen}} as |d|>
<d.Trigger
@htmlTag="button"
class={{concat "popup-menu-trigger button is-ghost" (if d.isOpen " is-active")}}
data-test-popup-menu-trigger
>
<Icon @name="more-horizontal" class="has-text-black auto-width" aria-label="More options" />
</d.Trigger>
<d.Content @defaultClass={{concat "popup-menu-content " @contentClass}}>
<div class="box">
{{yield}}
</div>
</d.Content>
</BasicDropdown>
</span>

View file

@ -1,26 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@ember/component';
import layout from '../templates/components/popup-menu';
/**
* @module PopupMenu
* `PopupMenu` displays a button that when pressed will toggle open a menu that is yielded in the content
* block.
*
* @example
* ```js
* <PopupMenu><nav class="menu"> <ul class="menu-list"> <li class="action"> <button type="button">A menu!</button> </li> </ul> </nav></PopupMenu>
* ```
*
* @param contentClass=''{String} A class that will be applied to the yielded content of the popup.
*/
export default Component.extend({
layout,
contentClass: '',
tagName: 'span',
});

View file

@ -1,6 +1,6 @@
<div class="field">
<p class="control has-icons-left has-icons-right">
<span class="input has-text-grey-light">{{or this.placeholder "Search"}}</span>
<span class="input has-text-grey-light">{{or @placeholder "Search"}}</span>
<Icon @name="search" class="search-icon has-text-grey-light" />
</p>
</div>

View file

@ -1,11 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@ember/component';
import layout from '../templates/components/search-select-placeholder';
export default Component.extend({
layout,
});

View file

@ -1,30 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/**
* @module ToolbarActions
* `ToolbarActions` is a container for toolbar links such as "Add item".
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarLink @route="vault.cluster.policy.edit">
* Edit policy
* </ToolbarLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
*/
import Component from '@ember/component';
import layout from '../templates/components/toolbar-actions';
export default Component.extend({
tagName: '',
layout,
});

View file

@ -1,31 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/**
* @module ToolbarFilters
* `ToolbarFilters` components are containers for Toolbar filters and toggles.
* It should only be used inside of `Toolbar`.
*
* @example
* ```js
* <Toolbar>
* <ToolbarFilters>
* <div class="control has-icons-left">
* <input class="filter input" placeholder="Filter keys" type="text">
* <Icon @name="search" @size="24" class="search-icon has-text-grey-light" />
* </div>
* </ToolbarFilters>
* </Toolbar>
```
*
*/
import Component from '@ember/component';
import layout from '../templates/components/toolbar-filters';
export default Component.extend({
layout,
tagName: '',
});

View file

@ -1,29 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
/**
* @module Toolbar
* `Toolbar` components are containers for Toolbar actions.
*
* @example
* ```js
* <Toolbar>
* <ToolbarActions>
* <ToolbarSecretLink @params={{array 'vault.cluster.policies.create'}} @type="add">
* Create policy
* </ToolbarSecretLink>
* </ToolbarActions>
* </Toolbar>
* ```
*
*/
import Component from '@ember/component';
import layout from '../templates/components/toolbar';
export default Component.extend({
tagName: '',
layout,
});

View file

@ -1,22 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
import Component from '@ember/component';
import layout from '../templates/components/vault-logo-spinner';
/**
* @module VaultLogoSpinner
* `VaultLogoSpinner` displays an animated Vault logo to use for loading screens.
*
* @example
* ```js
* <VaultLogoSpinner />
* ```
*/
export default Component.extend({
layout,
tagName: '',
});

View file

@ -1,7 +0,0 @@
{{#if @loadingParam}}
<button disabled type="button" class="link button is-loading is-transparent">
loading
</button>
{{else}}
{{yield}}
{{/if}}

View file

@ -1,14 +0,0 @@
<BasicDropdown class="popup-menu" horizontalPosition="auto-right" verticalPosition="below" onOpen={{this.onOpen}} as |d|>
<d.Trigger
@htmlTag="button"
class={{concat "popup-menu-trigger button is-ghost" (if d.isOpen " is-active")}}
data-test-popup-menu-trigger
>
<Icon @name="more-horizontal" class="has-text-black auto-width" aria-label="More options" />
</d.Trigger>
<d.Content @defaultClass={{concat "popup-menu-content " this.contentClass}}>
<div class="box">
{{yield}}
</div>
</d.Content>
</BasicDropdown>