feat(glossary) Add Source section to sidebar for Glossary Terms (#5262)

datahub-project · Jun 28, 2022 · 99890cd · 99890cd
1 parent 11f101e
commit 99890cd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git a/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx b/datahub-web-react/src/app/entity/shared/containers/profile/sidebar/SidebarAboutSection.tsx
@@ -14,7 +14,7 @@ const DescriptionTypography = styled(Typography.Paragraph)`
 `;
 
 const SidebarLinkList = styled.div`
-    margin-left: -15px;
+    margin: 0 0 10px -15px;
     min-width: 0;
 `;
 
@@ -32,10 +32,14 @@ const LinkButton = styled(Button)`
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
-        line-height: 1;
     }
 `;
 
+const SourceButton = styled(LinkButton)`
+    padding: 0;
+    margin-top: -5px;
+`;
+
 interface Props {
     hideLinksButton?: boolean;
 }
@@ -49,6 +53,9 @@ export const SidebarAboutSection = ({ properties }: { properties?: Props }) => {
     const description = entityData?.editableProperties?.description || entityData?.properties?.description;
     const links = entityData?.institutionalMemory?.elements || [];
 
+    const sourceUrl = entityData?.properties?.sourceUrl;
+    const sourceRef = entityData?.properties?.sourceRef;
+
     const isUntouched = !description && !(links?.length > 0);
 
     return (
@@ -117,6 +124,23 @@ export const SidebarAboutSection = ({ properties }: { properties?: Props }) => {
                     )}
                 </SidebarLinkList>
             )}
+            {sourceRef && (
+                <>
+                    <SidebarHeader title="Source" />
+                    <Typography.Paragraph>
+                        {sourceUrl ? (
+                            <SourceButton type="link" href={sourceUrl} target="_blank" rel="noreferrer">
+                                <LinkOutlined />
+                                {sourceRef}
+                            </SourceButton>
+                        ) : (
+                            {
+                                sourceRef,
+                            }
+                        )}
+                    </Typography.Paragraph>
+                </>
+            )}
         </div>
     );
 };
diff --git a/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/LinkList.tsx b/datahub-web-react/src/app/entity/shared/tabs/Documentation/components/LinkList.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { message, Button, List, Typography } from 'antd';
 import { LinkOutlined, DeleteOutlined } from '@ant-design/icons';
 import { EntityType } from '../../../../../../types.generated';

diff --git a/datahub-web-react/src/app/entity/shared/types.ts b/datahub-web-react/src/app/entity/shared/types.ts
@@ -57,6 +57,8 @@ export type GenericEntityProperties = {
     properties?: Maybe<{
         description?: Maybe<string>;
         qualifiedName?: Maybe<string>;
+        sourceUrl?: Maybe<string>;
+        sourceRef?: Maybe<string>;
     }>;
     globalTags?: Maybe<GlobalTags>;
     glossaryTerms?: Maybe<GlossaryTerms>;