Merge pull request #11075 from mehmetmalli/improvement/add-props-to-alert-display

[AlertDisplay] Added props to alert display

.changeset/lovely-houses-argue.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Added optional anchorOrigin alignment prop to AlertDisplay

packages/core-components/api-report.md

@@ -51,8 +51,16 @@ import { Theme } from '@material-ui/core/styles';
 import { TooltipProps } from '@material-ui/core/Tooltip';
 import { WithStyles } from '@material-ui/core/styles';
 
+// @public (undocumented)
+export function AlertDisplay(props: AlertDisplayProps): JSX.Element | null;
+
 // @public
-export function AlertDisplay(_props: {}): JSX.Element | null;
+export type AlertDisplayProps = {
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+};
 
 // @public
 enum Alignment {

packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx

@@ -28,13 +28,25 @@ import pluralize from 'pluralize';
  * @public
  * @remarks
  *
- * Shown as SnackBar at the top of the page
+ * Shown as SnackBar at the center top of the page by default. Configurable with props.
  */
+
 // TODO: improve on this and promote to a shared component for use by all apps.
-export function AlertDisplay(_props: {}) {
+
+export type AlertDisplayProps = {
+  anchorOrigin?: {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+  };
+};
+
+/** @public */
+export function AlertDisplay(props: AlertDisplayProps) {
   const [messages, setMessages] = useState<Array<AlertMessage>>([]);
   const alertApi = useApi(alertApiRef);
 
+  const { anchorOrigin = { vertical: 'top', horizontal: 'center' } } = props;
+
   useEffect(() => {
     const subscription = alertApi
       .alert$()
@@ -56,7 +68,7 @@ export function AlertDisplay(_props: {}) {
   };
 
   return (
-    <Snackbar open anchorOrigin={{ vertical: 'top', horizontal: 'center' }}>
+    <Snackbar open anchorOrigin={anchorOrigin}>
       <Alert
         action={
           <IconButton

packages/core-components/src/components/AlertDisplay/index.ts

@@ -14,4 +14,4 @@
  * limitations under the License.
  */
 
-export { AlertDisplay } from './AlertDisplay';
+export * from './AlertDisplay';