Adding button fixes for assertions

Author: John Joyce

datahub-web-react/src/app/entity/shared/tabs/Dataset/Validations/DatasetAssertionsList.tsx

@@ -198,9 +198,8 @@ export const DatasetAssertionsList = ({
                                                 EntityType.Dataset,
                                                 entityData.urn,
                                             )}/Quality/Data Contract`}
-                                            style={{ color: REDESIGN_COLORS.BLUE }}
                                         >
-                                            view
+                                            View
                                         </Link>
                                     </>
                                 }

datahub-web-react/src/app/entityV2/shared/components/search/InlineListSearch.tsx

@@ -1,4 +1,3 @@
-import { SearchOutlined } from '@ant-design/icons';
 import React from 'react';
 import { pluralize } from '@src/app/shared/textUtil';
 import { MatchLabelText, SearchContainer, StyledInput } from './styledComponents';
@@ -28,12 +27,10 @@ export const InlineListSearch: React.FC<InlineListSearchProps> = ({
     return (
         <SearchContainer>
             <StyledInput
-                bordered={false}
                 value={searchText}
                 placeholder={options?.placeholder || 'Search...'}
                 onChange={debouncedSetFilterText}
-                allowClear
-                prefix={!options?.hidePrefix && <SearchOutlined />}
+                label=""
             />
             {searchText && !options?.hideMatchCountText && (
                 <MatchLabelText>

datahub-web-react/src/app/entityV2/shared/components/search/styledComponents.tsx

@@ -1,5 +1,5 @@
-import { Input } from 'antd';
 import styled from 'styled-components';
+import { Input } from '@src/alchemy-components';
 import { REDESIGN_COLORS } from '../../constants';
 
 export const StyledInput = styled(Input)`
@@ -15,6 +15,7 @@ export const MatchLabelText = styled.span`
     font-size: 12px;
     font-weight: 400;
     color: ${REDESIGN_COLORS.DARK_GREY};
+    padding: 4px 4px;
 `;
 
 export const SearchContainer = styled.div`

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AcrylAssertionsTableColumns.tsx

@@ -83,9 +83,8 @@ export function DetailsColumn({ assertion, contract, lastEvaluation, onViewAsser
                                     EntityType.Dataset,
                                     entityData.urn,
                                 )}/Quality/Data Contract`}
-                                style={{ color: REDESIGN_COLORS.BLUE }}
                             >
-                                view
+                                View
                             </Link>
                         </>
                     }

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AssertionList/AssertionListTitleContainer.tsx

@@ -5,8 +5,8 @@ import styled from 'styled-components';
 const AssertionTitleContainer = styled.div`
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin: 20px;
-    height: 50px;
     div {
         border-bottom: 0px;
     }

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AssertionList/DataContractBadge.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
 import { AuditOutlined } from '@ant-design/icons';
-import { REDESIGN_COLORS } from '@src/app/entity/shared/constants';
-import { Tooltip } from '@components';
+import { colors, Tooltip } from '@components';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 const DataContractLogo = styled(AuditOutlined)`
     margin-left: 8px;
     font-size: 16px;
-    color: ${REDESIGN_COLORS.BLUE};
+    color: ${colors.violet[500]};
 `;
+
 export const DataContractBadge = ({ link }: { link: string }) => {
     return (
         <Tooltip
             title={
                 <>
                     Part of Data Contract{' '}
-                    <Link to={link} style={{ color: REDESIGN_COLORS.BLUE }}>
-                        view
+                    <Link to={link} style={{ color: colors.gray[300] }}>
+                        View
                     </Link>
                 </>
             }

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/AssertionList/Tags/AcrylAssertionTagColumn.tsx

@@ -15,7 +15,7 @@ import DataHubTooltip from '@src/alchemy-components/components/Tooltip/Tooltip';
 const StyledTagContainer = styled.div`
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     flex-wrap: wrap;
     cursor: pointer;
     gap: 4px;

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/ActionItem.tsx

@@ -2,17 +2,15 @@ import React from 'react';
 import { Tooltip } from '@components';
 import { TooltipPlacement } from 'antd/es/tooltip';
 import styled from 'styled-components';
-import { ActionItemButton } from './styledComponents';
+import { ActionMenuItem } from '@src/app/entityV2/shared/EntityDropdown/styledComponents';
 
 const StyledActionButtonContainer = styled.div`
     display: flex;
     align-items: center;
     gap: 8px;
-    color: #46507b;
 `;
 
 type Props = {
-    primary?: boolean;
     tip?: string;
     disabled?: boolean;
     onClick: () => void;
@@ -25,7 +23,6 @@ type Props = {
 };
 
 export const ActionItem = ({
-    primary = false,
     tip,
     disabled = false,
     onClick,
@@ -39,23 +36,20 @@ export const ActionItem = ({
     return (
         <Tooltip placement={placement} title={isExpandedView ? '' : tip}>
             <StyledActionButtonContainer
-                style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
                 onClick={(e) => {
                     e.stopPropagation();
                     if (disabled) return;
                     onClick();
                 }}
             >
-                <ActionItemButton
-                    primary={primary}
+                <ActionMenuItem
                     key={key}
                     disabled={disabled}
                     title={!isExpandedView ? tip : undefined}
-                    isExpandedView={isExpandedView}
                     data-testid={dataTestId}
                 >
                     {icon}
-                </ActionItemButton>
+                </ActionMenuItem>
                 {isExpandedView && actionName && <span>{actionName}</span>}
             </StyledActionButtonContainer>
         </Tooltip>

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/AssertionListItemActions.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, Dropdown, Menu } from 'antd';
-
+import { Dropdown, Menu } from 'antd';
+import { Button, colors } from '@src/alchemy-components';
+import { DotsThreeVertical } from 'phosphor-react';
 import { Assertion, AssertionRunStatus, DataContract } from '../../../../../../../../../types.generated';
 import { ContractAction } from './ContractAction';
 import { CopyLinkAction } from './CopyLinkAction';
@@ -12,7 +13,7 @@ import { useIsOnSiblingsView } from '../../../../../../useIsSeparateSiblingsMode
 const ActionList = styled.div<{ $shouldRightAlign?: boolean }>`
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: end;
     padding: ${(props) => (props.$shouldRightAlign ? '0px' : '0px 10px')};
     margin-left: ${(props) => (props.$shouldRightAlign ? 'auto' : undefined)};
 `;

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/ExternalUrlAction.tsx

@@ -47,7 +47,6 @@ export const ExternalUrlAction = ({ assertion, isExpandedView = false }: Props)
     return (
         <ActionItem
             key="external-url"
-            primary
             tip={`View in ${platformName}.`}
             onClick={handleRedirect}
             icon={<StyledLaunchOutlined />}

datahub-web-react/src/app/entityV2/shared/tabs/Dataset/Validations/assertion/profile/actions/styledComponents.tsx

@@ -10,6 +10,7 @@ const getColor = ({ isExpandedView, primary }: { isExpandedView?: boolean; prima
     if (primary) return '#fff';
     return isExpandedView ? '#000' : '#5280e8';
 };
+
 const getBorder = ({ isExpandedView, primary }: { isExpandedView?: boolean; primary?: boolean }) => {
     if (isExpandedView) return 'none';
     return primary ? '1px solid #5280e8' : '1px solid #f0f0f0';