Refined content

Author: pabel-rh

assemblies/assembly-configuring-a-floating-action-button.adoc

@@ -0,0 +1,8 @@
+:_mod-docs-content-type: ASSEMBLY
+:context: configuring-a-floating-action-button
+[id="{context}"]
+= Configuring a floating action button in {product}
+
+As a {product-short} administrator, you can use the floating action button to configure any action button as a floating button in any page in the {product-short} instance as you want. The floating action button is preinstalled on a {product-short} instance and disabled by default. You can also configure floating action buttons to display as submenu options within the main floating action button.
+
+include::modules/configuring-a-floating-action-button/proc-configuring-floating-action-button-as-a-dynamic-plugin.adoc[leveloffset=+1]

assemblies/assembly-install-and-configuring-a-floating-action-button.adoc

@@ -0,0 +1,159 @@
+:_mod-docs-content-type: PROCEDURE
+[id="proc-configuring-floating-action-button-as-a-dynamic-plugin_{context}"]
+= Configuring a floating action button as a dynamic plugin
+
+You can configure a dynamic plugin as a floating action button to perform actions or open an internal or external link.
+
+.Procedure
+
+. Add the `app-config-dynamic.yaml` content into `app.config-local.yaml`.
+
+. Set the disabled property to `false`. For example:
++
+[source,yaml]
+----
+global:
+  dynamic:
+    includes:
+      - dynamic-plugins.default.yaml
+    plugins:
+      - package: ./dynamic-plugins/dist/backstage-plugin-global-floating-action-button
+        disabled: false
+----
+
+. To configure a dynamic plugin as a floating action button, complete any of the following tasks:
+
+** Specify the `global.floatingactionbutton/config` mount point in your plugin configuration. For example: 
++
+.bulk-import plugin as a floating action button example
+[source,yaml]
+----
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-bulk-import:
+        # Start of the floating action button configuration
+        mountPoints:
+          - mountPoint: global.floatingactionbutton/config
+            importName: BulkImportPage <1>
+            config:
+              slot: 'page-end'
+              icon: bulkImportIcon
+              label: 'Bulk import'
+              toolTip: 'Register multiple repositories in bulk'
+              to: /bulk-import/repositories
+        # End of the floating action button configuration
+        appIcons:
+          - name: bulkImportIcon
+            importName: BulkImportIcon
+        dynamicRoutes:
+          - path: /bulk-import/repositories
+            importName: BulkImportPage
+            menuItem:
+              icon: bulkImportIcon
+              text: Bulk import
+----
+<1> (Required) The import name with an associated component to the mount point.
+
+** To configure a dynamic plugin as a floating action button that opens an external link, specify the `global.floatingactionbutton/config` mount point in the `backstage-plugin-global-floating-action-button` plugin. For example:
++
+.floating action button that opens Github example
+[source,yaml]
+----
+  dynamicPlugins:
+    frontend:
+      red-hat-developer-hub.backstage-plugin-global-floating-action-button:
+        mountPoints:
+          - mountPoint: application/listener
+            importName: DynamicGlobalFloatingActionButton
+          - mountPoint: global.floatingactionbutton/config
+            importName: NullComponent
+            config:
+              icon: github
+              label: 'Git'
+              toolTip: 'Github'
+             	to: https://github.com/redhat-developer/rhdh-plugins
+----
+
+.Floating action button parameters
+|===
+| Name | Description | Type | Default value | Required
+
+| `slot`
+| Position of the floating action button. Valid values: `PAGE_END`, `BOTTOM_LEFT`
+| `enum`
+| `PAGE_END`
+| No
+
+| `label`
+| Name of the floating action button
+| `String`
+| Not applicable
+| Yes
+
+| `icon`
+| Icon of the floating action button. Recommended to use filled icons from the link:https://fonts.google.com/icons[Material Design library].
+| `StringReact.ReactElement`
+| Not applicable
+| No
+
+| `showLabel`
+| Display of the abel next to your icon
+| `Boolean` 
+| Not applicable
+| No
+
+| `size`
+| Size of the floating action button
+| `small`, `medium`, `large`
+| `medium`
+| No
+
+| `color`
+| Color of the component. It supports both default and custom theme colors, that are added from the link:https://mui.com/material-ui/customization/palette/#custom-colors[Palette Getting started guide].
+| `default`, `error`, `info`, `inherit`, `primary`, `secondary`, `success`, `warning`
+| `default`
+| No
+
+| `onClick`
+| Performed action when selecting a floating action button
+| `React.MouseEventHandler`
+| Not applicable
+| No
+
+| `to`
+| Link that opens when selecting a floating action button
+| `String`
+| Not applicable
+| No
+
+| `toolTip`
+| Text that appears when hovering over a floating action button
+| `String`
+| Not applicable
+| No
+
+| `priority`
+| Order of the floating action buttons displayed in the submenu. 
+//For example, to display a particular floating action button first, use `priority: 1`  -- waiting to confirm this with Debsmita and Shiran
+| `number`
+| Not applicable
+| No
+
+| `visibleOnPaths`
+| Display floating action button on the specified paths
+| `string[]`
+| Display floating action button on all paths
+| No
+
+| `excludeOnPaths`
+| Hide floating action button on the specified paths
+| `string[]`
+| Display floating action button on all paths
+| No
+
+|===
+
+[NOTE]
+====
+If multiple floating button actions are assigned to the same `Slot`, these floating buttons are displayed as submenu options within the main floating action button.
+====