Index: components/ProductDetailsRelatedProducts/ProductDetailsRelatedProducts.component.tsx
===================================================================
diff -u -rc9ac16c365bb8ed527371e5694d9b24a56959a80 -r1a9ab74c8dca46c43d2ac41051cc5faef50592da
--- components/ProductDetailsRelatedProducts/ProductDetailsRelatedProducts.component.tsx	(.../ProductDetailsRelatedProducts.component.tsx)	(revision c9ac16c365bb8ed527371e5694d9b24a56959a80)
+++ components/ProductDetailsRelatedProducts/ProductDetailsRelatedProducts.component.tsx	(.../ProductDetailsRelatedProducts.component.tsx)	(revision 1a9ab74c8dca46c43d2ac41051cc5faef50592da)
@@ -8,6 +8,7 @@
 import { trim, unique } from 'ts-functional';
 import { ExpandableImage } from '../ExpandableImage';
 import { SelectProductsButton } from '../SelectProductsButton';
+import { permissionCheck } from 'lemans-uac';
 import './ProductDetailsRelatedProducts.styles.less';
 import { ProductDetailsRelatedProductsProps } from './ProductDetailsRelatedProducts.types';
 
@@ -63,6 +64,9 @@
         }
     ];
 
+    const [CanEdit] = permissionCheck(['ds.product.relatedProduct.edit']);
+    const [CanView] = permissionCheck(['ds.product.relatedProduct.view']);
+
     const relatedProductColumns: any = [
         {
             className: 'thumbnail-col',
@@ -95,22 +99,24 @@
             className: 'action-col',
             dataIndex: '',
             key: 'relatedActions',
-            render: (_: any, row: IRelatedProduct) =>
-                <Popconfirm
-                    cancelButtonProps={{ size: 'middle' }}
-                    cancelText="No"
-                    okButtonProps={{ size: 'middle' }}
-                    okText="Yes"
-                    onCancel={popconfirmDeleteCancel}
-                    onConfirm={popconfirmDeleteConfirm(row)}
-                    title="Delete this product association?"
-                >
-                    <Button type="primary" danger>
-                        <DeleteOutlined />
-                    </Button>
-                </Popconfirm>,
+            render: (_: any, row: IRelatedProduct) => (
+                <CanEdit>
+                    <Popconfirm
+                        cancelButtonProps={{ size: 'middle' }}
+                        cancelText="No"
+                        okButtonProps={{ size: 'middle' }}
+                        okText="Yes"
+                        onConfirm={popconfirmDeleteConfirm(row)}
+                        onCancel={popconfirmDeleteCancel}
+                        placement="topRight"
+                        title="Are you sure to remove this related product?"
+                    >
+                        <Button icon={<DeleteOutlined />} size="middle" type="primary" danger />
+                    </Popconfirm>
+                </CanEdit>
+            ),
             title: 'Action',
-        },
+        }
     ];
 
     const [crossRelate, setCrossRelate] = useState(false);
@@ -258,70 +264,74 @@
     }
 
     return (
-        <div className="ProductDetailsRelatedProducts">
-            <Row gutter={[16, 16]}>
-                <Col span={2}>
-                    <div className="cross-relate-wrapper">
-                        <Checkbox onChange={handleNewProductCrossRelateChange}>
-                            Cross Relate
-                        </Checkbox>
-                    </div>
-                </Col>
-                <Col span={5}>
-                    <XRefSelect
-                        type="ProductAssociationType"
-                        label="Type"
-                        value={associationTypeId}
-                        onChange={setAssociationTypeId}
-                    />
-                </Col>
-                <Col span={17}>
-                    <SelectProductsButton
-                        id="selectRelatedProductsBtn"
-                        label={<><SearchOutlined/> Find Products</>}
-                        onSelect={updateProductIds}
-                    />
-                    <Input
-                        className="product-ids-input"
-                        onChange={handleNewProductIdsChange}
-                        placeholder="Enter Product IDs separated by a comma (',')"
-                        value={productIds}
-                    />
-                    <Button
-                        icon={<PlusOutlined />}
-                        onClick={handleAddNewProducts}
-                        type="primary"
-                    >
-                        Add Products
-                    </Button>
-                </Col>
-            </Row>
-            <Row gutter={[0, 16]}>
-                <Col span={24}>
-                    <h2>Related Products</h2>
-                    <Table
-                        columns={relatedProductColumns}
-                        dataSource={relatedProducts}
-                        loading={isLoading}
-                        pagination={relatedPagination}
-                        rowKey="relatedProductId"
-                        showSorterTooltip={false}
-                    />
-                </Col>
-            </Row>
-            <Row gutter={[0, 16]}>
-                <Col span={24}>
-                    <h2>Referred to by Products</h2>
-                    <Table
-                        columns={referralProductColumns}
-                        dataSource={referralProducts}
-                        loading={isLoading}
-                        pagination={referralPagination}
-                        rowKey='relatedProductId'
-                        showSorterTooltip={false}
-                    />
-                </Col>
-            </Row>
-        </div>
+        <CanView>
+            <div className="ProductDetailsRelatedProducts">
+                <CanEdit>
+                    <Row gutter={[16, 16]}>
+                        <Col span={2}>
+                            <div className="cross-relate-wrapper">
+                                <Checkbox onChange={handleNewProductCrossRelateChange}>
+                                    Cross Relate
+                                </Checkbox>
+                            </div>
+                        </Col>
+                        <Col span={5}>
+                            <XRefSelect
+                                type="ProductAssociationType"
+                                label="Type"
+                                value={associationTypeId}
+                                onChange={setAssociationTypeId}
+                            />
+                        </Col>
+                        <Col span={17}>
+                            <SelectProductsButton
+                                id="selectRelatedProductsBtn"
+                                label={<><SearchOutlined/> Find Products</>}
+                                onSelect={updateProductIds}
+                            />
+                            <Input
+                                className="product-ids-input"
+                                onChange={handleNewProductIdsChange}
+                                placeholder="Enter Product IDs separated by a comma (',')"
+                                value={productIds}
+                            />
+                            <Button
+                                icon={<PlusOutlined />}
+                                onClick={handleAddNewProducts}
+                                type="primary"
+                            >
+                                Add Products
+                            </Button>
+                        </Col>
+                    </Row>
+                </CanEdit>
+                <Row gutter={[0, 16]}>
+                    <Col span={24}>
+                        <h2>Related Products</h2>
+                        <Table
+                            columns={relatedProductColumns}
+                            dataSource={relatedProducts}
+                            loading={isLoading}
+                            pagination={relatedPagination}
+                            rowKey="relatedProductId"
+                            showSorterTooltip={false}
+                        />
+                    </Col>
+                </Row>
+                <Row gutter={[0, 16]}>
+                    <Col span={24}>
+                        <h2>Referred to by Products</h2>
+                        <Table
+                            columns={referralProductColumns}
+                            dataSource={referralProducts}
+                            loading={isLoading}
+                            pagination={referralPagination}
+                            rowKey='relatedProductId'
+                            showSorterTooltip={false}
+                        />
+                    </Col>
+                </Row>
+            </div>
+        </CanView>
     )
 }