fix the switch placement and added beta tag (#18726)

open-metadata · Nov 24, 2024 · d797e0c · d797e0c
1 parent b1d6b4b
commit d797e0c
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 26 deletions.
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.component.tsx
@@ -11,16 +11,20 @@
  *  limitations under the License.
  */
 
-import { Typography } from 'antd';
+import { Badge, Typography } from 'antd';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import './page-header.less';
 import { HeaderProps } from './PageHeader.interface';
 
 const PageHeader = ({
   data: { header, subHeader },
   titleProps,
   subHeaderProps,
+  isBeta,
 }: HeaderProps) => {
+  const { t } = useTranslation();
+
   return (
     <div className="page-header-container" data-testid="page-header-container">
       <Typography.Title
@@ -29,6 +33,15 @@ const PageHeader = ({
         level={5}
         {...titleProps}>
         {header}
+
+        {isBeta && (
+          <Badge
+            className="service-beta-page-header m-l-sm"
+            count={t('label.beta')}
+            data-testid="beta-badge"
+            size="small"
+          />
+        )}
       </Typography.Title>
       <Typography.Paragraph
         className="sub-heading"

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/PageHeader/PageHeader.interface.ts
@@ -22,4 +22,5 @@ export interface HeaderProps {
   };
   titleProps?: TypographyProps;
   subHeaderProps?: ParagraphProps;
+  isBeta?: boolean;
 }
diff --git a/...data-ui/src/main/resources/ui/src/pages/SearchRBACSettingsPage/SearchRBACSettingsPage.tsx b/...data-ui/src/main/resources/ui/src/pages/SearchRBACSettingsPage/SearchRBACSettingsPage.tsx
@@ -103,35 +103,30 @@ const SearchRBACSettingsPage = () => {
         <Col span={24}>
           <Row align="middle" justify="space-between">
             <Col>
-              <PageHeader data={PAGE_HEADERS.SEARCH_RBAC} />
+              <PageHeader isBeta data={PAGE_HEADERS.SEARCH_RBAC} />
             </Col>
           </Row>
         </Col>
-        <Col span={12}>
-          <Row align="middle">
-            <Col span={24}>
-              <Typography.Text className="m-0 text-grey-muted">
-                {t('label.enable-roles-polices-in-search')}
-                <Tooltip
-                  placement="top"
-                  title={t('message.enable-access-control-description')}
-                  trigger="hover">
-                  <InfoCircleOutlined
-                    className="m-x-xss"
-                    data-testid="enable-access-control-info"
-                    style={{ color: GRAYED_OUT_COLOR }}
-                  />
-                </Tooltip>
-              </Typography.Text>
-            </Col>
-            <Col>
-              <Switch
-                checked={searchConfig?.enableAccessControl}
-                disabled={isUpdating}
-                onChange={handleUpdateClick}
+        <Col className="d-flex items-center" span={12}>
+          <Typography.Text className="m-0 text-grey-muted">
+            {t('label.enable-roles-polices-in-search')}
+            <Tooltip
+              placement="top"
+              title={t('message.enable-access-control-description')}
+              trigger="hover">
+              <InfoCircleOutlined
+                className="m-x-xss"
+                data-testid="enable-access-control-info"
+                style={{ color: GRAYED_OUT_COLOR }}
               />
-            </Col>
-          </Row>
+            </Tooltip>
+          </Typography.Text>
+          <Switch
+            checked={searchConfig?.enableAccessControl}
+            className="m-l-xlg"
+            disabled={isUpdating}
+            onChange={handleUpdateClick}
+          />
         </Col>
       </Row>
     </PageLayoutV1>

diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -557,6 +557,20 @@ a[href].link-text-grey,
   }
 }
 
+// beta tag for page header
+.service-beta-page-header {
+  sup {
+    height: auto;
+    padding: 2px 6px;
+    border-radius: 30px;
+    margin-left: 2px;
+    font-size: 10px;
+    background: @primary-1;
+    border: 1px solid @primary-color;
+    color: @primary-color;
+  }
+}
+
 /* Tabs */
 .ant-tabs-top > .ant-tabs-nav::before {
   border-color: @border-color;

diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less b/openmetadata-ui/src/main/resources/ui/src/styles/spacing.less
@@ -155,6 +155,9 @@
 .m-l-lg {
   margin-left: @margin-lg;
 }
+.m-l-xlg {
+  margin-left: @margin-xlg;
+}
 .m-l-auto {
   margin-left: auto;
 }