Merge branch 'main' into revamp-sidebar

open-metadata · Jan 16, 2024 · bb8979c · bb8979c
2 parents e632612 + 5dee98f
commit bb8979c
Show file tree

Hide file tree

Showing 24 changed files with 2,030 additions and 114 deletions.
diff --git a/openmetadata-docs/content/v1.2.x/deployment/backup-restore-metadata.md b/openmetadata-docs/content/v1.2.x/deployment/backup-restore-metadata.md
@@ -242,3 +242,14 @@ And we'll get the following output:
 Restoring OpenMetadata backup for localhost:3306/openmetadata_db...
 Backup restored from openmetadata_202209301715_backup.sql
 ```
+
+## Troubleshooting
+
+It is not recommended to restore a backup of an older version to a newer version. Doing this may result into number of issues since the data is not in the expected shape, as migration has not been performed on this data yet. Read [this document](https://docs.open-metadata.org/deployment/upgrade/how-does-it-work) to understand how does the backup and restore works in OpenMetadata.
+
+In case you are facing some issues because you restored the backup of older version into a newer version. Follow the below steps to resolve the issues:
+
+1. Delete the current OpenMetadata instance and clean all the data, i.e. delete the `openmetadata_db` from your database source. In case you are using docker or kubernetes mode of deployment then clean all your volumes attached to database image.
+2. Spin up a new instance of OpenMetadata of the older version. For example, if your backup file was generated by version 1.1.0 then spin up a fresh instance of OpenMetadata version 1.1.0.
+3. Restore the data using the `metadata restore` command as described in the above doc.
+4. Once the restoration process is completed follow the steps defined in [this document](https://docs.open-metadata.org/v1.2.x/deployment/upgrade) to upgrade your instance to the newer version depending on your deployment mode.
diff --git a/openmetadata-docs/content/v1.3.x-SNAPSHOT/deployment/backup-restore-metadata.md b/openmetadata-docs/content/v1.3.x-SNAPSHOT/deployment/backup-restore-metadata.md
@@ -242,3 +242,14 @@ And we'll get the following output:
 Restoring OpenMetadata backup for localhost:3306/openmetadata_db...
 Backup restored from openmetadata_202209301715_backup.sql
 ```
+
+## Troubleshooting
+
+It is not recommended to restore a backup of an older version to a newer version. Doing this may result into number of issues since the data is not in the expected shape, as migration has not been performed on this data yet. Read [this document](https://docs.open-metadata.org/deployment/upgrade/how-does-it-work) to understand how does the backup and restore works in OpenMetadata.
+
+In case you are facing some issues because you restored the backup of older version into a newer version. Follow the below steps to resolve the issues:
+
+1. Delete the current OpenMetadata instance and clean all the data, i.e. delete the `openmetadata_db` from your database source. In case you are using docker or kubernetes mode of deployment then clean all your volumes attached to database image.
+2. Spin up a new instance of OpenMetadata of the older version. For example, if your backup file was generated by version 1.1.0 then spin up a fresh instance of OpenMetadata version 1.1.0.
+3. Restore the data using the `metadata restore` command as described in the above doc.
+4. Once the restoration process is completed follow the steps defined in [this document](https://docs.open-metadata.org/v1.2.x/deployment/upgrade) to upgrade your instance to the newer version depending on your deployment mode.
diff --git a/openmetadata-ui/src/main/resources/ui/src/App.tsx b/openmetadata-ui/src/main/resources/ui/src/App.tsx
@@ -20,6 +20,7 @@ import 'react-toastify/dist/ReactToastify.min.css';
 import ApplicationConfigProvider from './components/ApplicationConfigProvider/ApplicationConfigProvider';
 import AppRouter from './components/AppRouter/AppRouter';
 import { AuthProvider } from './components/Auth/AuthProviders/AuthProvider';
+import DirectionProvider from './components/DirectionProvider/DirectionProvider';
 import DomainProvider from './components/Domain/DomainProvider/DomainProvider';
 import { EntityExportModalProvider } from './components/Entity/EntityExportModalProvider/EntityExportModalProvider.component';
 import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
@@ -43,27 +44,29 @@ const App: FC<AppProps> = ({ routeElements }) => {
         <Router history={history}>
           <I18nextProvider i18n={i18n}>
             <ErrorBoundary>
-              <ApplicationConfigProvider routeElements={routeElements}>
-                <AuthProvider childComponentType={AppRouter}>
-                  <TourProvider>
-                    <HelmetProvider>
-                      <WebAnalyticsProvider>
-                        <PermissionProvider>
-                          <WebSocketProvider>
-                            <GlobalSearchProvider>
-                              <DomainProvider>
-                                <EntityExportModalProvider>
-                                  <AppRouter />
-                                </EntityExportModalProvider>
-                              </DomainProvider>
-                            </GlobalSearchProvider>
-                          </WebSocketProvider>
-                        </PermissionProvider>
-                      </WebAnalyticsProvider>
-                    </HelmetProvider>
-                  </TourProvider>
-                </AuthProvider>
-              </ApplicationConfigProvider>
+              <DirectionProvider>
+                <ApplicationConfigProvider routeElements={routeElements}>
+                  <AuthProvider childComponentType={AppRouter}>
+                    <TourProvider>
+                      <HelmetProvider>
+                        <WebAnalyticsProvider>
+                          <PermissionProvider>
+                            <WebSocketProvider>
+                              <GlobalSearchProvider>
+                                <DomainProvider>
+                                  <EntityExportModalProvider>
+                                    <AppRouter />
+                                  </EntityExportModalProvider>
+                                </DomainProvider>
+                              </GlobalSearchProvider>
+                            </WebSocketProvider>
+                          </PermissionProvider>
+                        </WebAnalyticsProvider>
+                      </HelmetProvider>
+                    </TourProvider>
+                  </AuthProvider>
+                </ApplicationConfigProvider>
+              </DirectionProvider>
             </ErrorBoundary>
           </I18nextProvider>
         </Router>

diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-ltr.svg
diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg b/openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-rtl.svg
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/BlockEditor.tsx
@@ -18,6 +18,7 @@ import React, {
   useImperativeHandle,
   useRef,
 } from 'react';
+import { useTranslation } from 'react-i18next';
 import { EDITOR_OPTIONS } from '../../constants/BlockEditor.constants';
 import { formatContent } from '../../utils/BlockEditorUtils';
 import './block-editor.less';
@@ -37,6 +38,7 @@ export interface BlockEditorProps {
 
 const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
   ({ content = '', editable = true, onChange }, ref) => {
+    const { i18n } = useTranslation();
     const editorSlots = useRef<EditorSlotsRef>(null);
 
     const editor = useCustomEditor({
@@ -89,6 +91,20 @@ const BlockEditor = forwardRef<BlockEditorRef, BlockEditorProps>(
       setTimeout(() => editor.setEditable(editable));
     }, [editable, editor]);
 
+    useEffect(() => {
+      const editorWrapper = document.getElementById('block-editor-wrapper');
+      if (!editorWrapper) {
+        return;
+      }
+      editorWrapper.setAttribute('dir', i18n.dir());
+      // text align right if rtl
+      if (i18n.dir() === 'rtl') {
+        editorWrapper.style.textAlign = 'right';
+      } else {
+        editorWrapper.style.textAlign = 'left';
+      }
+    }, [i18n]);
+
     return (
       <div className="block-editor-wrapper" id="block-editor-wrapper">
         <EditorContent

diff --git a/...resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts b/...resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/BlockAndDragHandle.ts
@@ -15,6 +15,7 @@ import { NodeSelection, Plugin } from '@tiptap/pm/state';
 // @ts-ignore
 import { EditorView, __serializeForClipboard } from '@tiptap/pm/view';
 import { isUndefined } from 'lodash';
+import i18n from '../../../../utils/i18next/LocalUtil';
 import { BlockAndDragHandleOptions } from './BlockAndDragDrop';
 import { absoluteRect, nodeDOMAtCoords, nodePosAtDOM } from './helpers';
 
@@ -128,7 +129,11 @@ export const BlockAndDragHandle = (options: BlockAndDragHandleOptions) => {
       return;
     }
 
-    dragHandleElement.style.left = `${rect.left - rect.width}px`;
+    if (i18n.dir() === 'rtl') {
+      dragHandleElement.style.right = `${rect.right - rect.width}px`;
+    } else {
+      dragHandleElement.style.left = `${rect.left - rect.width}px`;
+    }
     dragHandleElement.style.top = `${rect.top}px`;
     showDragHandle();
   };
@@ -177,9 +182,15 @@ export const BlockAndDragHandle = (options: BlockAndDragHandleOptions) => {
       return;
     }
 
-    blockHandleElement.style.left = `${
-      rect.left - rect.width - options.blockHandleWidth
-    }px`;
+    if (i18n.dir() === 'rtl') {
+      blockHandleElement.style.right = `${
+        rect.right - rect.width - options.blockHandleWidth
+      }px`;
+    } else {
+      blockHandleElement.style.left = `${
+        rect.left - rect.width - options.blockHandleWidth
+      }px`;
+    }
     blockHandleElement.style.top = `${rect.top}px`;
     showBlockHandle();
   };

diff --git a/...i/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/helpers.ts b/...i/src/main/resources/ui/src/components/BlockEditor/Extensions/BlockAndDragDrop/helpers.ts
@@ -19,6 +19,7 @@ export const absoluteRect = (node: Element) => {
     top: data.top,
     left: data.left,
     width: data.width,
+    right: data.right,
   };
 };
 

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less b/openmetadata-ui/src/main/resources/ui/src/components/BlockEditor/block-editor.less
@@ -451,3 +451,9 @@
     padding: 0px;
   }
 }
+
+.block-editor-wrapper[dir='rtl'] {
+  .tiptap.ProseMirror-focused .is-node-empty.has-focus::before {
+    float: right;
+  }
+}
diff --git a/...in/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx b/...in/resources/ui/src/components/CustomizableComponents/CustomizeMyData/CustomizeMyData.tsx
@@ -28,6 +28,7 @@ import { AssetsType } from '../../../enums/entity.enum';
 import { Document } from '../../../generated/entity/docStore/document';
 import { EntityReference } from '../../../generated/entity/type';
 import { PageType } from '../../../generated/system/ui/page';
+import { useGridLayoutDirection } from '../../../hooks/useGridLayoutDirection';
 import { WidgetConfig } from '../../../pages/CustomizablePage/CustomizablePage.interface';
 import '../../../pages/MyDataPage/my-data.less';
 import { getUserById } from '../../../rest/userAPI';
@@ -249,6 +250,9 @@ function CustomizeMyData({
     fetchMyData();
   }, []);
 
+  // call the hook to set the direction of the grid layout
+  useGridLayoutDirection();
+
   return (
     <ActivityFeedProvider>
       <PageLayoutV1

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DirectionProvider/DirectionProvider.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DirectionProvider/DirectionProvider.tsx
@@ -0,0 +1,23 @@
+/*
+ *  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 { ConfigProvider } from 'antd';
+import React, { FC, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const DirectionProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  const { i18n } = useTranslation();
+
+  return <ConfigProvider direction={i18n.dir()}>{children}</ConfigProvider>;
+};
+
+export default DirectionProvider;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx
@@ -12,7 +12,7 @@
  */
 
 import classNames from 'classnames';
-import { debounce } from 'lodash';
+import { debounce, isNil } from 'lodash';
 import Emoji from 'quill-emoji';
 import 'quill-emoji/dist/quill-emoji.css';
 import 'quill-mention';
@@ -42,11 +42,7 @@ import {
   userMentionItemWithAvatar,
 } from '../../utils/FeedUtils';
 import { LinkBlot } from '../../utils/QuillLink/QuillLink';
-import {
-  directionHandler,
-  insertMention,
-  insertRef,
-} from '../../utils/QuillUtils';
+import { insertMention, insertRef } from '../../utils/QuillUtils';
 import { getEntityIcon } from '../../utils/TableUtils';
 import { useApplicationConfigContext } from '../ApplicationConfigProvider/ApplicationConfigProvider';
 import { editorRef } from '../common/RichTextEditor/RichTextEditor.interface';
@@ -74,7 +70,7 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
     }: FeedEditorProp,
     ref
   ) => {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const editorRef = useRef<ReactQuill>(null);
     const [value, setValue] = useState<string>(defaultValue ?? '');
     const [isMentionListOpen, toggleMentionList] = useState(false);
@@ -180,7 +176,6 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
           handlers: {
             insertMention: insertMention,
             insertRef: insertRef,
-            direction: directionHandler,
           },
         },
         'emoji-toolbar': true,
@@ -281,6 +276,29 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
       }
     }, [focused, editorRef]);
 
+    useEffect(() => {
+      // get the editor container
+      const container = document.getElementById('om-quill-editor');
+
+      if (container && editorRef.current) {
+        // get the editor instance
+        const editorInstance = editorRef.current.getEditor();
+        const direction = i18n.dir();
+
+        // get the current direction of the editor
+        const { align } = editorInstance.getFormat();
+
+        if (direction === 'rtl' && isNil(align)) {
+          container.setAttribute('data-dir', direction);
+          editorInstance.format('align', 'right', 'user');
+        } else if (align === 'right') {
+          editorInstance.format('align', false, 'user');
+          container.setAttribute('data-dir', 'ltr');
+        }
+        editorInstance.format('direction', direction, 'user');
+      }
+    }, [i18n, editorRef]);
+
     return (
       <div
         className={className}

diff --git a/...ata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx b/...ata-ui/src/main/resources/ui/src/components/PipelineDetails/PipelineDetails.component.tsx
@@ -70,6 +70,7 @@ import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
 import ActivityThreadPanel from '../ActivityFeed/ActivityThreadPanel/ActivityThreadPanel';
 import { withActivityFeed } from '../AppRouter/withActivityFeed';
 import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
+import { OwnerLabel } from '../common/OwnerLabel/OwnerLabel.component';
 import EntityRightPanel from '../Entity/EntityRightPanel/EntityRightPanel';
 import Lineage from '../Lineage/Lineage.component';
 import LineageProvider from '../LineageProvider/LineageProvider';
@@ -423,6 +424,15 @@ const PipelineDetails = ({
           />
         ),
       },
+      {
+        title: t('label.owner'),
+        dataIndex: 'owner',
+        key: 'owner',
+        width: 120,
+        accessor: 'owner',
+        filterIcon: getFilterIcon('tag-filter'),
+        render: (owner) => <OwnerLabel hasPermission={false} owner={owner} />,
+      },
       {
         title: t('label.tag-plural'),
         dataIndex: 'tags',