Add alert bar component

openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.interface.ts

@@ -0,0 +1,18 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+export type AlertBarType = 'general' | 'info' | 'success' | 'warning' | 'error';
+
+export interface AlertBarProps {
+  type: AlertBarType;
+  message: string;
+}

openmetadata-ui/src/main/resources/ui/src/components/AlertBar/AlertBar.tsx

@@ -0,0 +1,108 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import Icon from '@ant-design/icons';
+import { Alert } from 'antd';
+import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import { ReactComponent as ErrorCross } from '../../assets/svg/error-cross.svg';
+import { ReactComponent as CrossIcon } from '../../assets/svg/ic-cross.svg';
+import { ReactComponent as ErrorIcon } from '../../assets/svg/ic-error.svg';
+import { ReactComponent as GeneralIcon } from '../../assets/svg/ic-general.svg';
+import { ReactComponent as InfoIcon } from '../../assets/svg/ic-info-tag.svg';
+import { ReactComponent as SuccessIcon } from '../../assets/svg/ic-success.svg';
+import { ReactComponent as WarningIcon } from '../../assets/svg/ic-warning-tag.svg';
+import { ReactComponent as InfoCross } from '../../assets/svg/info-cross.svg';
+import { ReactComponent as SuccessCross } from '../../assets/svg/success-cross.svg';
+import { ReactComponent as WarningCross } from '../../assets/svg/warning-cross.svg';
+import { useAlertStore } from '../../hooks/useAlertBar';
+import './alert-bar.style.less';
+import { AlertBarProps } from './AlertBar.interface';
+
+const AlertBar = ({
+  type = 'general',
+  message = '',
+}: AlertBarProps): JSX.Element => {
+  const { resetAlert } = useAlertStore();
+
+  const {
+    icon: AlertIcon,
+    className,
+    crossIcon: CloseIcon,
+  } = useMemo(() => {
+    switch (type) {
+      case 'info':
+        return {
+          icon: InfoIcon,
+          className: 'info',
+          crossIcon: InfoCross,
+        };
+
+      case 'success':
+        return {
+          icon: SuccessIcon,
+          className: 'success',
+          crossIcon: SuccessCross,
+        };
+
+      case 'warning':
+        return {
+          icon: WarningIcon,
+          className: 'warning',
+          crossIcon: WarningCross,
+        };
+
+      case 'error':
+        return {
+          icon: ErrorIcon,
+          className: 'error',
+          crossIcon: ErrorCross,
+        };
+
+      default:
+        return {
+          icon: GeneralIcon,
+          className: 'general',
+          crossIcon: CrossIcon,
+        };
+    }
+  }, [type]);
+
+  return (
+    <>
+      {type === 'general' ? (
+        <div className={`alert-container ${className}`}>
+          <div className="alert-content">
+            <Icon className="align-middle alert-icon" component={AlertIcon} />
+            <p>{message}</p>
+          </div>
+          <button className="cross-icon" onClick={resetAlert}>
+            <Icon className="align-middle" component={CloseIcon} />
+          </button>
+        </div>
+      ) : (
+        <Alert
+          closable
+          showIcon
+          className={classNames(className, 'alert-container')}
+          closeIcon={<CloseIcon />}
+          description={message}
+          icon={<AlertIcon />}
+          type={type}
+          onClose={resetAlert}
+        />
+      )}
+    </>
+  );
+};
+
+export default AlertBar;

openmetadata-ui/src/main/resources/ui/src/components/AlertBar/alert-bar.style.less

@@ -0,0 +1,78 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+.alert-container {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  font-size: 16px;
+
+  &.ant-alert-with-description {
+    padding: 20px;
+  }
+
+  &.general {
+    background-color: #f6f7f9;
+    color: #292929;
+  }
+
+  &.info {
+    background-color: #f6f8ff;
+    color: #0950c5;
+    border: none;
+    border-radius: 0px;
+  }
+
+  &.success {
+    background-color: #f5fbf8;
+    color: #1d7c4d;
+    border: none;
+    border-radius: 0px;
+  }
+
+  &.warning {
+    background-color: #fff5eb;
+    color: #f59638;
+    border: none;
+    border-radius: 0px;
+  }
+
+  &.error {
+    background-color: #fcf0f1;
+    color: #cb2531;
+    border: none;
+    border-radius: 0px;
+  }
+
+  .alert-content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .alert-icon {
+    font-size: 25px;
+  }
+
+  .cross-icon {
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+  }
+
+  .ant-alert-description {
+    font-size: 16px;
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/PageLayoutV1/PageLayoutV1.tsx

@@ -21,6 +21,8 @@ import React, {
   ReactNode,
   useMemo,
 } from 'react';
+import { useAlertStore } from '../../hooks/useAlertBar';
+import AlertBar from '../AlertBar/AlertBar';
 import DocumentTitle from '../common/DocumentTitle/DocumentTitle';
 import './../../styles/layout/page-layout.less';
 
@@ -60,6 +62,8 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
   mainContainerClassName = '',
   pageContainerStyle = {},
 }: PageLayoutProp) => {
+  const { alert } = useAlertStore();
+
   const contentWidth = useMemo(() => {
     if (leftPanel && rightPanel) {
       return `calc(100% - ${leftPanelWidth + rightPanelWidth}px)`;
@@ -99,27 +103,36 @@ const PageLayoutV1: FC<PageLayoutProp> = ({
             {leftPanel}
           </Col>
         )}
-        <Col
-          className={classNames(
-            'page-layout-v1-center p-t-sm page-layout-v1-vertical-scroll',
-            {
-              'flex justify-center': center,
-            },
-            mainContainerClassName
+        <Col className="w-full">
+          {alert && (
+            <Row>
+              <AlertBar message={alert.message} type={alert.type} />
+            </Row>
           )}
-          flex={contentWidth}
-          offset={center ? 3 : 0}
-          span={center ? 18 : 24}>
-          {children}
+          <Row>
+            <Col
+              className={classNames(
+                'page-layout-v1-center p-t-sm page-layout-v1-vertical-scroll',
+                {
+                  'flex justify-center': center,
+                },
+                mainContainerClassName
+              )}
+              flex={contentWidth}
+              offset={center ? 3 : 0}
+              span={center ? 18 : 24}>
+              {children}
+            </Col>
+            {rightPanel && (
+              <Col
+                className="page-layout-rightpanel page-layout-v1-vertical-scroll"
+                flex={rightPanelWidth + 'px'}
+                id="right-panelV1">
+                {rightPanel}
+              </Col>
+            )}
+          </Row>
         </Col>
-        {rightPanel && (
-          <Col
-            className="page-layout-rightpanel page-layout-v1-vertical-scroll"
-            flex={rightPanelWidth + 'px'}
-            id="right-panelV1">
-            {rightPanel}
-          </Col>
-        )}
       </Row>
     </Fragment>
   );

openmetadata-ui/src/main/resources/ui/src/hooks/useAlertBar.ts

@@ -0,0 +1,35 @@
+/*
+ *  Copyright 2024 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { create } from 'zustand';
+import { AlertBarType } from '../components/AlertBar/AlertBar.interface';
+
+type AlertType = {
+  type: AlertBarType;
+  message: string;
+};
+
+interface AlertStore {
+  alert: AlertType | undefined;
+  addAlert: (alert: AlertType) => void;
+  resetAlert: () => void;
+}
+
+export const useAlertStore = create<AlertStore>()((set) => ({
+  alert: undefined,
+  addAlert: (alert: AlertType) => {
+    set({ alert });
+  },
+  resetAlert: () => {
+    set({ alert: undefined });
+  },
+}));