Add ticket tribe notification link

src/bounties/BountyModalButtonSet.tsx

@@ -15,6 +15,9 @@ const ButtonSetContainer = styled.div`
 
 const ButtonSet = ({ showGithubBtn, ...props }: any) => {
   const color = colors['light'];
+  const tribeName = typeof props.tribe === 'string' ? props.tribe.trim() : '';
+  const hasTribe = tribeName.length > 0 && tribeName.toLowerCase() !== 'none';
+
   return (
     <ButtonSetContainer
       style={{
@@ -78,7 +81,7 @@ const ButtonSet = ({ showGithubBtn, ...props }: any) => {
           </div>
         </ButtonContainer>
       )}
-      {typeof props.tribe === 'string' && props.tribe !== 'None' ? (
+      {hasTribe ? (
         <ButtonContainer
           topMargin={'16px'}
           onClick={() => {
@@ -101,7 +104,7 @@ const ButtonSet = ({ showGithubBtn, ...props }: any) => {
             />
           </div>
           <EuiText className="ButtonText">
-            {props.tribe.slice(0, 14)} {props.tribe.length > 14 && '...'}
+            {tribeName.slice(0, 14)} {tribeName.length > 14 && '...'}
           </EuiText>
           <div className="ImageContainer">
             <img
@@ -174,6 +177,32 @@ const ButtonSet = ({ showGithubBtn, ...props }: any) => {
         </div>
         <EuiText className="ButtonText">Share to Twitter</EuiText>
       </ButtonContainer>
+      {hasTribe && (
+        <EuiText
+          data-testid="join-tribe-ticket-link"
+          onClick={() => props?.tribeFunction?.()}
+          onKeyDown={(event: React.KeyboardEvent) => {
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              props?.tribeFunction?.();
+            }
+          }}
+          role="button"
+          style={{
+            color: color.blue1,
+            cursor: 'pointer',
+            fontSize: '13px',
+            fontWeight: 500,
+            lineHeight: '18px',
+            marginTop: '16px',
+            maxWidth: '220px'
+          }}
+          tabIndex={0}
+        >
+          Interested in seeing more tickets like this? Join the tribe and get notified about new
+          tickets
+        </EuiText>
+      )}
       {props.isOwner && props.show === false && (
         <>
           <div

src/bounties/__tests__/BountyModelButtonSet.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 import ButtonSet from '../BountyModalButtonSet';
@@ -23,4 +23,35 @@ describe('BountyModalButtonSet Component', () => {
     const tribeButton = screen.getByText(/kotlin/i);
     expect(tribeButton).toBeInTheDocument();
   });
+
+  it('renders the ticket tribe notification link and opens the tribe when clicked', () => {
+    const tribeFunction = jest.fn();
+
+    render(<ButtonSet tribe="kotlin" tribeFunction={tribeFunction} />);
+
+    const joinLink = screen.getByTestId('join-tribe-ticket-link');
+    expect(joinLink).toHaveTextContent(
+      'Interested in seeing more tickets like this? Join the tribe and get notified about new tickets'
+    );
+
+    fireEvent.click(joinLink);
+    expect(tribeFunction).toHaveBeenCalledTimes(1);
+  });
+
+  it('opens the tribe notification link from the keyboard', () => {
+    const tribeFunction = jest.fn();
+
+    render(<ButtonSet tribe="kotlin" tribeFunction={tribeFunction} />);
+
+    fireEvent.keyDown(screen.getByTestId('join-tribe-ticket-link'), { key: 'Enter' });
+    expect(tribeFunction).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not render the ticket tribe notification link for missing tribes', () => {
+    const { rerender } = render(<ButtonSet tribe="none" />);
+    expect(screen.queryByTestId('join-tribe-ticket-link')).not.toBeInTheDocument();
+
+    rerender(<ButtonSet tribe=" " />);
+    expect(screen.queryByTestId('join-tribe-ticket-link')).not.toBeInTheDocument();
+  });
 });