Action Location, Presentation, and Naming
Author: Yihui Wang | Last edit: June 20, 2023 | Design type: Action menus | Product area: Kafka
Overview
This document provides guidance on how to present actions in MAS, including their locations, forms, and naming patterns. This is a table for a quick overview.
| Where | UI component | Naming pattern | Example | Guidelines |
Could also be a child-level table view. Child level refers to the resources which are included in an instance, e.g. Kafka topics, SR artifacts, etc. | Kebab menu | As described in the chapter - Actions in table view / Actions dropdown / Naming patterns | Start connector, Edit topic configuration, Delete instance | The actions act on the current level resources are included |
Resource level could be instance level or child level. | Secondary toggle | The actions dropdown includes the actions from the ‘view Instance Information’ group for this resource in the table view, as well as some actions specific to this level. When there is an edit button adjacent to the dropdown, the edit action is not repeated again in the menu | ||
| Button | [Action], (icon)[Action] | Edit, ✏Edit | Always display the short label “Edit” instead of “Edit {thing}” because the action button is adjacent to the contents |
Actions in table view
The table view here refers to the top-level table view which includes instances (e.g. Kafka instances, Service Registry instances, Connector instances, etc.), and the child-level table view which is included in an instance.
Actions dropdown
Actions in the table view are always styled as kebab dropdowns. The actions within the menu apply to the current row/resource. When hovering over the kebab icon, a tooltip labeled ‘More options’ will be displayed.
Included actions
Four types of actions are included in the kebab menu here:
- Actions that modify the state of the resource, such as start/stop running actions. Some actions could be disabled depending on the state.
- Actions that open the drawer.
- Actions for administrative purposes, such as editing properties, changing owner, duplicating resource, etc.
- Delete current resource.
Note that only the actions acted on the current level resources will be included. That is to say, the kebab menu of the instance table view won’t include any child-level actions. Meanwhile, in the child resources table view, the parent-level actions won’t be duplicated in the kebab menu either.
Naming patterns
Actions in the kebab menu follow the naming and grouping conventions in the table below. For more information on what items are included in different services and what they look like, see the MAS microcopy database and MAS storybook.
| Naming pattern | Example | |
| Menu item | Start instance | Start instance |
| Menu item | Stop instance | Stop instance |
------------------------------------------------------ Divider line ------------------------------------------------------ | ||
| Group title | View instance information | View instance information |
| Menu item | Details | Details |
| Menu item | Connection | Connection |
------------------------------------------------------ Divider line ------------------------------------------------------ | ||
| Menu item | Edit instance {umbrella term}* or Edit {child resource type} {umbrella term} | Edit instance configuration or Edit topic configuration |
| Menu item | Change instance owner | Change instance owner |
| Menu item | Duplicate instance | Duplicate instance |
------------------------------------------------------ Divider line ------------------------------------------------------ | ||
| Menu item | Delete instance or Delete {child resource type} | Delete instance or Delete topic |
* Umbrella term: For editing actions, the umbrella term refers to the name of the tab/section which will be edited. The table below can be used to index all umbrella terms for different services. Check this document for more details about how these umbrella terms work.
Umbrella terms Tab/section names | Usage | Applied screens |
| Overview | Include Details as a section and also include some other sections An Overview tab doesn't have to have a section labeled "Details", but that is a common pattern where the Overview tab includes a section"Details" with properties for that resource. | Instance properties (non-editable):
These two umbrella terms won’t show up in the Edit actions. Because the screens which are using these terms don’t support editing. |
| Details | Include non-editable properties that help identify or find a resource with filtering (when in the table) | |
| Configuration | Include editable properties that handle how the instance behaves | Instance properties (editable):
|
| Settings | - Only generated after the instance is created - Include editable properties - Only the admin can access | Instance level settings:
|
Metadata This term only applies to the SR artifact screen as an edge case now | - Include various properties. Some are editable, but some can only be defined during the creation | Service Registry artifact metadata |
Actions in resource level view
Actions dropdown
Actions dropdowns always use secondary toggle styles.
Included actions
The actions dropdown includes the actions from the ‘view Instance Information’ group for this resource in the table view, as well as some actions specific to this level. For example, the Kafka topic has an actions dropdown menu as shown below.
| Group title | View instance information |
| Menu item | Details |
| Menu item | Connection |
------------------------------------------------------ Divider line ------------------------------------------------------ | |
| Menu item | Edit topic configuration |
| ------------------------------------------------------ Divider line ------------------------------------------------------ | |
| Menu item | Delete topic |
Naming patterns
The actions in the dropdown follow the same naming patterns as what is defined in Actions in table view.
Edit button
Naming patterns
In the resource level view, the Edit button is always adjacent to the contents, thus the short label “Edit” should be used. The short label comes in two forms depending on positions:
| Where | Form | Naming pattern |
| Form/header | Primary button |  |
| Card | Link button |  |
Button positions
The Edit button can appear in two different places - in a tab or in the header - depending on whether there are multiple tabs in this resource.
Edit button in tabs
If there are multiple tabs in the resource, the Edit button will appear in the top right corner of the tab.
Edit button in header
If there are no tabs, the Edit button will be the primary action and appear to the left of the Actions dropdown menu in the header. In this case, the edit action will not be duplicated within the Actions dropdown menu.
