fix design issues with input/output port feature

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/AssetsSelectionModal/AssetSelectionDrawer.tsx

@@ -22,6 +22,7 @@ interface AssetSelectionDrawerProps {
   emptyPlaceHolderText?: string;
   onSave?: () => void;
   onCancel: () => void;
+  title?: string;
 }
 
 export const AssetSelectionDrawer = ({
@@ -32,6 +33,7 @@ export const AssetSelectionDrawer = ({
   emptyPlaceHolderText,
   onSave,
   onCancel,
+  title,
 }: AssetSelectionDrawerProps) => {
   return useAssetSelectionDrawer({
     entityFqn,
@@ -41,5 +43,6 @@ export const AssetSelectionDrawer = ({
     emptyPlaceHolderText,
     onSave,
     onCancel,
+    title,
   });
 };

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/AssetsSelectionModal/useAssetSelectionContent.tsx

@@ -97,6 +97,7 @@ export interface AssetSelectionContentProps {
   onCancel?: () => void;
   queryFilter?: QueryFilterInterface;
   emptyPlaceHolderText?: string;
+  title?: string;
 }
 
 export const useAssetSelectionContent = ({

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/AssetsSelectionModal/useAssetSelectionDrawer.tsx

@@ -23,6 +23,7 @@ interface UseAssetSelectionDrawerProps {
   type?: AssetsOfEntity;
   queryFilter?: QueryFilterInterface;
   emptyPlaceHolderText?: string;
+  title?: string;
   onSave?: () => void;
   onCancel: () => void;
 }
@@ -33,6 +34,7 @@ export const useAssetSelectionDrawer = ({
   type = AssetsOfEntity.GLOSSARY,
   queryFilter,
   emptyPlaceHolderText,
+  title,
   onSave,
   onCancel,
 }: UseAssetSelectionDrawerProps) => {
@@ -63,7 +65,8 @@ export const useAssetSelectionDrawer = ({
     testId: 'asset-selection-modal',
     onClose: onCancel,
     header: {
-      title: t('label.add-entity', { entity: t('label.asset-plural') }),
+      title:
+        title ?? t('label.add-entity', { entity: t('label.asset-plural') }),
       onClose: onCancel,
     },
     body: {

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/InputOutputPortsTab.component.tsx

@@ -55,7 +55,14 @@ export const InputOutputPortsTab = forwardRef<
   InputOutputPortsTabProps
 >(
   (
-    { dataProduct, dataProductFqn, permissions, onPortsUpdate, onPortClick },
+    {
+      dataProduct,
+      dataProductFqn,
+      permissions,
+      assetCount,
+      onPortsUpdate,
+      onPortClick,
+    },
     ref
   ) => {
     const { t } = useTranslation();
@@ -220,9 +227,15 @@ export const InputOutputPortsTab = forwardRef<
       <Box
         className="input-output-ports-tab"
         data-testid="input-output-ports-tab"
-        sx={{ p: 2, height: '100%', overflowY: 'auto' }}>
-        <Grid container spacing={5}>
-          {/* Lineage View Section */}
+        sx={{
+          height: '100%',
+          overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          gap: 5,
+        }}>
+        <Grid container spacing={2} sx={{ width: '100%', flexShrink: 0 }}>
           <Grid size={12}>
             <Card
               sx={{
@@ -283,6 +296,7 @@ export const InputOutputPortsTab = forwardRef<
                   ) : (
                     <ReactFlowProvider>
                       <PortsLineageView
+                        assetCount={assetCount}
                         dataProduct={dataProduct}
                         height={250}
                         inputPortsData={lineageInputPortsData}
@@ -297,14 +311,20 @@ export const InputOutputPortsTab = forwardRef<
               </Collapse>
             </Card>
           </Grid>
+        </Grid>
 
-          {/* Input Ports Section */}
+        <Grid
+          container
+          spacing={2}
+          sx={{ width: '100%', flex: 1, minHeight: 0 }}>
           <Grid size={{ xs: 12, md: 6 }}>
             <Card
               sx={{
                 border: `1px solid ${theme.palette.allShades.blueGray[100]}`,
                 borderRadius: '8px',
                 boxShadow: 'none',
+                display: 'flex',
+                flexDirection: 'column',
               }}
               variant="outlined">
               <Box
@@ -336,6 +356,7 @@ export const InputOutputPortsTab = forwardRef<
                     <Button
                       className="h-8 flex items-center"
                       data-testid="add-input-port-button"
+                      disabled={assetCount === 0}
                       onClick={(e) => {
                         e.stopPropagation();
                         handleAddInputPort();
@@ -361,12 +382,10 @@ export const InputOutputPortsTab = forwardRef<
               <Collapse in={!isInputPortsCollapsed}>
                 <CardContent
                   sx={{
-                    height: 'calc(100vh - 450px)',
-                    minHeight: 300,
                     display: 'flex',
                     flexDirection: 'column',
-                    overflow: 'hidden',
                     '&:last-child': { pb: 2 },
+                    maxHeight: 'calc(100vh - 400px)',
                   }}>
                   {inputPortsCount === 0 ? (
                     <ErrorPlaceHolder
@@ -380,7 +399,9 @@ export const InputOutputPortsTab = forwardRef<
                       size={SIZE.SMALL}
                       type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
                       <Typography className="text-center">
-                        {t('message.no-input-ports-added')}
+                        {assetCount === 0
+                          ? t('message.no-assets-for-input-ports')
+                          : t('message.no-input-ports-added')}
                       </Typography>
                     </ErrorPlaceHolder>
                   ) : (
@@ -397,13 +418,14 @@ export const InputOutputPortsTab = forwardRef<
             </Card>
           </Grid>
 
-          {/* Output Ports Section */}
           <Grid size={{ xs: 12, md: 6 }}>
             <Card
               sx={{
                 border: `1px solid ${theme.palette.allShades.blueGray[100]}`,
                 borderRadius: '8px',
                 boxShadow: 'none',
+                display: 'flex',
+                flexDirection: 'column',
               }}
               variant="outlined">
               <Box
@@ -435,6 +457,7 @@ export const InputOutputPortsTab = forwardRef<
                     <Button
                       className="h-8 flex items-center"
                       data-testid="add-output-port-button"
+                      disabled={assetCount === 0}
                       onClick={(e) => {
                         e.stopPropagation();
                         handleAddOutputPort();
@@ -460,12 +483,10 @@ export const InputOutputPortsTab = forwardRef<
               <Collapse in={!isOutputPortsCollapsed}>
                 <CardContent
                   sx={{
-                    height: 'calc(100vh - 450px)',
-                    minHeight: 300,
                     display: 'flex',
                     flexDirection: 'column',
-                    overflow: 'hidden',
                     '&:last-child': { pb: 2 },
+                    maxHeight: 'calc(100vh - 400px)',
                   }}>
                   {outputPortsCount === 0 ? (
                     <ErrorPlaceHolder
@@ -479,7 +500,9 @@ export const InputOutputPortsTab = forwardRef<
                       size={SIZE.SMALL}
                       type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
                       <Typography className="text-center">
-                        {t('message.no-output-ports-added')}
+                        {assetCount === 0
+                          ? t('message.no-assets-for-output-ports')
+                          : t('message.no-output-ports-added')}
                       </Typography>
                     </ErrorPlaceHolder>
                   ) : (
@@ -500,6 +523,9 @@ export const InputOutputPortsTab = forwardRef<
         <AssetSelectionDrawer
           entityFqn={dataProductFqn}
           open={isAddingInputPort}
+          title={t('label.add-entity', {
+            entity: t('label.entity-port', { entity: t('label.input') }),
+          })}
           type={AssetsOfEntity.DATA_PRODUCT_INPUT_PORT}
           onCancel={() => setIsAddingInputPort(false)}
           onSave={handleInputPortSave}
@@ -508,6 +534,9 @@ export const InputOutputPortsTab = forwardRef<
         <AssetSelectionDrawer
           entityFqn={dataProductFqn}
           open={isAddingOutputPort}
+          title={t('label.add-entity', {
+            entity: t('label.entity-port', { entity: t('label.output') }),
+          })}
           type={AssetsOfEntity.DATA_PRODUCT_OUTPUT_PORT}
           onCancel={() => setIsAddingOutputPort(false)}
           onSave={handleOutputPortSave}

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/InputOutputPortsTab.types.ts

@@ -19,6 +19,7 @@ export interface InputOutputPortsTabProps {
   dataProduct: DataProduct;
   dataProductFqn: string;
   permissions: OperationPermission;
+  assetCount: number;
   onPortsUpdate: () => void;
   onPortClick?: (port?: EntityDetailsObjectInterface) => void;
 }

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.component.tsx

@@ -54,6 +54,7 @@ const PortsLineageView = ({
   dataProduct,
   inputPortsData,
   outputPortsData,
+  assetCount,
   isFullScreen = false,
   height = 350,
   onToggleFullScreen,
@@ -64,6 +65,16 @@ const PortsLineageView = ({
   const [isInitialized, setIsInitialized] = useState(false);
   const reactFlowInstance = useReactFlow();
 
+  const handleToggleFullScreen = useCallback(() => {
+    if (onToggleFullScreen) {
+      onToggleFullScreen();
+      setTimeout(() => {
+        reactFlowInstance.fitView({ padding: 0.2 });
+        reactFlowInstance.zoomTo(0.4);
+      }, 100);
+    }
+  }, [onToggleFullScreen, reactFlowInstance]);
+
   const hasAnyPorts =
     dataProduct && (inputPortsData.length > 0 || outputPortsData.length > 0);
 
@@ -183,6 +194,7 @@ const PortsLineageView = ({
     if (nodes.length > 0 && !isInitialized && reactFlowInstance) {
       setTimeout(() => {
         reactFlowInstance.fitView({ padding: 0.2 });
+        reactFlowInstance.zoomTo(0.4);
         setIsInitialized(true);
       }, 100);
     }
@@ -221,7 +233,9 @@ const PortsLineageView = ({
           size={SIZE.SMALL}
           type={ERROR_PLACEHOLDER_TYPE.CUSTOM}>
           <Typography className="text-center" variant="body2">
-            {t('message.no-ports-to-display-lineage')}
+            {assetCount === 0
+              ? t('message.no-assets-for-ports-lineage')
+              : t('message.no-ports-to-display-lineage')}
           </Typography>
         </ErrorPlaceHolder>
       </Box>
@@ -266,30 +280,27 @@ const PortsLineageView = ({
               sx={{
                 backgroundColor: 'white',
                 border: '1px solid',
-                borderColor: 'grey.300',
+                borderColor: '#414651',
                 '&:hover': {
                   backgroundColor: 'grey.100',
                 },
               }}
-              onClick={onToggleFullScreen}>
+              onClick={handleToggleFullScreen}>
               {isFullScreen ? (
-                <Minimize01 height={18} width={18} />
+                <Minimize01 fill='#414651' height={18} width={18} />
               ) : (
-                <Maximize01 height={18} width={18} />
+                <Maximize01 fill='#414651' height={18} width={18} />
               )}
             </IconButton>
           </Tooltip>
         </Box>
       )}
 
       <ReactFlow
-        fitView
         panOnDrag
         zoomOnScroll
         edges={edges}
         fitViewOptions={{ padding: 0.2 }}
-        maxZoom={1.5}
-        minZoom={0.3}
         nodeTypes={nodeTypes}
         nodes={nodes}
         nodesConnectable={false}

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsLineageView/PortsLineageView.types.ts

@@ -19,6 +19,7 @@ export interface PortsLineageViewProps {
   dataProduct: DataProduct;
   inputPortsData: SearchedDataProps['data'];
   outputPortsData: SearchedDataProps['data'];
+  assetCount: number;
   isFullScreen?: boolean;
   height?: number;
   onToggleFullScreen?: () => void;

openmetadata-ui/src/main/resources/ui/src/components/DataProducts/InputOutputPortsTab/PortsListView/PortsListView.component.tsx

@@ -238,6 +238,7 @@ const PortsListView = forwardRef<PortsListViewRef, PortsListViewProps>(
                   }
                   className="m-b-sm"
                   id={port.id ?? ''}
+                  showTags={false}
                   source={port}
                 />
               </Col>

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.interface.ts

@@ -13,7 +13,7 @@
 
 import { EntityTags } from 'Models';
 import { LabelType, State, TagSource } from '../../../generated/type/tagLabel';
-import { DisplayType, LayoutType } from '../TagsViewer/TagsViewer.interface';
+import { DisplayType } from '../TagsViewer/TagsViewer.interface';
 
 export interface TagsContainerV2Props {
   permission: boolean;
@@ -30,7 +30,6 @@ export interface TagsContainerV2Props {
   showInlineEditButton?: boolean;
   children?: React.ReactNode;
   displayType?: DisplayType;
-  layoutType?: LayoutType;
   onSelectionChange?: (selectedTags: EntityTags[]) => Promise<void>;
   defaultState?: State;
   defaultLabelType?: LabelType;

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsViewer/TagsViewer.tsx

@@ -31,7 +31,11 @@ import TagChip from '../../common/atoms/TagChip/TagChip';
 import { useGenericContext } from '../../Customization/GenericProvider/GenericProvider';
 import TagsV1 from '../TagsV1/TagsV1.component';
 import './tags-viewer.less';
-import { DisplayType, TagsViewerProps } from './TagsViewer.interface';
+import {
+  DisplayType,
+  LayoutType,
+  TagsViewerProps,
+} from './TagsViewer.interface';
 
 const TagsViewer: FunctionComponent<TagsViewerProps> = ({
   tags,
@@ -40,6 +44,7 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
   showNoDataPlaceholder = true,
   newLook = false,
   entityFqn,
+  layout,
 }: TagsViewerProps) => {
   const { t } = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
@@ -74,7 +79,7 @@ const TagsViewer: FunctionComponent<TagsViewerProps> = ({
             title={getTagTooltip(tag.tagFQN, tag.description) ?? ''}>
             <Link
               className={classNames(
-                'w-full',
+                { 'w-full': layout !== LayoutType.HORIZONTAL },
                 { 'diff-added tw-mx-1': tag?.added },
                 { 'diff-removed': tag?.removed }
               )}

openmetadata-ui/src/main/resources/ui/src/locale/languages/ar-sa.json

@@ -2552,6 +2552,9 @@
     "no-admin-available-with-name": "لم يتم العثور على مستخدمين مسؤولين بالاسم \"{{searchText}}\". إذا كنت تبحث عن مستخدمين غير مسؤولين، يرجى التحقق من <0>صفحة المستخدمين</0>.",
     "no-announcement-message": "لا توجد إعلانات، انقر على إضافة إعلان لإضافة واحد.",
     "no-asset-available": "لا توجد أصول متاحة.",
+    "no-assets-for-input-ports": "لإضافة منافذ الإدخال، قم بتعيين الأصول لمنتج البيانات هذا أولاً.",
+    "no-assets-for-output-ports": "لإضافة منافذ الإخراج، قم بتعيين الأصول لمنتج البيانات هذا أولاً.",
+    "no-assets-for-ports-lineage": "لعرض سلسلة البيانات، قم بتعيين الأصول لمنتج البيانات هذا وأضفها كمنافذ إدخال/إخراج.",
     "no-changes-to-save": "No changes to save",
     "no-closed-task": "لا توجد مهام مغلقة",
     "no-config-available": "لا تتوفر تكوينات اتصال.",

openmetadata-ui/src/main/resources/ui/src/locale/languages/de-de.json

@@ -2552,6 +2552,9 @@
     "no-admin-available-with-name": "Keine Administratoren mit dem Namen \"{{searchText}}\" gefunden",
     "no-announcement-message": "Keine Ankündigungen gefunden. Klicken Sie auf Ankündigung hinzufügen, um eine hinzuzufügen.",
     "no-asset-available": "Keine Assets verfügbar.",
+    "no-assets-for-input-ports": "Um Eingabe-Ports hinzuzufügen, weisen Sie diesem Datenprodukt zuerst Assets zu.",
+    "no-assets-for-output-ports": "Um Ausgabe-Ports hinzuzufügen, weisen Sie diesem Datenprodukt zuerst Assets zu.",
+    "no-assets-for-ports-lineage": "Um die Abstammung anzuzeigen, weisen Sie diesem Datenprodukt Assets zu und fügen Sie sie als Eingabe-/Ausgabe-Ports hinzu.",
     "no-changes-to-save": "No changes to save",
     "no-closed-task": "Keine geschlossenen Aufgaben.",
     "no-config-available": "Keine Verbindungskonfigurationen verfügbar.",