Merge branch 'master' into Remove-Pagination-for-Workspace-Bounty-Cards

stakwork · Jan 4, 2025 · dfdda0b · dfdda0b
2 parents 589dbda + 35f8faf
commit dfdda0b
Show file tree

Hide file tree

Showing 18 changed files with 517 additions and 137 deletions.
diff --git a/src/components/BountyComponents/BountySteps.tsx b/src/components/BountyComponents/BountySteps.tsx
@@ -27,6 +27,17 @@ const StepText = styled.span`
   font-weight: 500;
 `;
 
+const StepLink = styled.a`
+  color: ${colors.light.text1};
+  font-weight: 500;
+  text-decoration: none;
+  color: ${colors.light.blue1};
+  &:hover {
+    color: ${colors.light.blue2};
+    text-decoration: none;
+  }
+`;
+
 const StepTitle = styled.h6`
   font-size: 20px;
   font-family: 'Barlow';
@@ -37,14 +48,16 @@ const StepTitle = styled.h6`
 
 interface Step {
   text: string;
+  link?: string;
 }
 
 const steps: Step[] = [
   {
     text: 'Sign up for a Sphinx by clicking the Get Sphinx button!'
   },
   {
-    text: 'Check out the open bounties, by clicking bounties!'
+    text: 'Check out the',
+    link: 'https://community.sphinx.chat/bounties'
   },
   {
     text: 'Reach out to the bounty provider by clicking "I can help!"'
@@ -53,7 +66,7 @@ const steps: Step[] = [
     text: 'Introduce yourself and get assigned'
   },
   {
-    text: 'Compelte the work and get paid directly to your Sphinx Wallet!'
+    text: 'Complete the work and get paid directly to your Sphinx Wallet!'
   }
 ];
 
@@ -63,7 +76,19 @@ export const BountySteps: React.FC = () => (
     {steps.map((step: Step, index: number) => (
       <StepItem key={index}>
         <StepLabel>{`Step ${index + 1}:`}</StepLabel>
-        <StepText>{step.text}</StepText>
+        <StepText>
+          {step.link ? (
+            <>
+              {step.text}{' '}
+              <StepLink href={step.link} target="_blank" rel="noopener noreferrer">
+                open bounties, by clicking bounties
+              </StepLink>
+              !
+            </>
+          ) : (
+            step.text
+          )}
+        </StepText>
       </StepItem>
     ))}
   </StepsContainer>

diff --git a/src/components/common/TicketEditor/TicketEditor.tsx b/src/components/common/TicketEditor/TicketEditor.tsx
@@ -12,6 +12,7 @@ import {
 } from '@elastic/eui';
 import { renderMarkdown } from 'people/utils/RenderMarkdown.tsx';
 import styled from 'styled-components';
+import history from 'config/history.ts';
 import { phaseTicketStore } from '../../../store/phase';
 import {
   ActionButton,
@@ -92,6 +93,7 @@ const TicketEditor = observer(
     const [isCopying, setIsCopying] = useState(false);
     const [activeMode, setActiveMode] = useState<'preview' | 'edit'>('edit');
     const { main } = useStores();
+    const [isCreatingBounty, setIsCreatingBounty] = useState(false);
     const ui = uiStore;
 
     const groupTickets = useMemo(
@@ -277,6 +279,43 @@ const TicketEditor = observer(
         setIsCopying(false);
       }
     };
+
+    const handleCreateBounty = async () => {
+      if (isCreatingBounty) return;
+
+      setIsCreatingBounty(true);
+      try {
+        const data = await main.createBountyFromTicket(ticketData.uuid);
+
+        if (data?.success) {
+          setToasts([
+            {
+              id: `${Date.now()}-bounty-success`,
+              title: 'Bounty Created',
+              color: 'success',
+              text: 'Bounty created successfully!'
+            }
+          ]);
+
+          history.push(`/bounty/${data.bounty_id}`);
+        } else {
+          throw new Error('Failed to create bounty');
+        }
+      } catch (error) {
+        console.error('Error creating bounty:', error);
+        setToasts([
+          {
+            id: `${Date.now()}-bounty-error`,
+            title: 'Error',
+            color: 'danger',
+            text: 'Failed to create bounty'
+          }
+        ]);
+      } finally {
+        setIsCreatingBounty(false);
+      }
+    };
+
     return (
       <TicketContainer>
         <EuiFlexGroup alignItems="center" gutterSize="s">
@@ -372,14 +411,28 @@ const TicketEditor = observer(
               >
                 Update
               </ActionButton>
+              <ActionButton
+                color="primary"
+                onClick={handleCreateBounty}
+                disabled={isCreatingBounty}
+                data-testid="create-bounty-from-ticket-btn"
+              >
+                {isCreatingBounty ? 'Creating Bounty...' : 'Create Bounty'}
+              </ActionButton>
               {swwfLink && (
                 <ActionButton
                   as="a"
                   href={`https://jobs.stakwork.com/admin/projects/${swwfLink}`}
                   target="_blank"
                   rel="noopener noreferrer"
-                  style={{ textDecoration: 'none' }}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    textDecoration: 'none'
+                  }}
                   color="#49C998"
+                  className="no-underline"
                 >
                   SW Run: {swwfLink}
                 </ActionButton>

diff --git a/src/components/common/TicketEditor/TicketTextArea.tsx b/src/components/common/TicketEditor/TicketTextArea.tsx
@@ -40,9 +40,15 @@ interface TicketTextAreaProps {
   onChange: (value: string) => void;
   placeholder?: string;
   ui: UiStore;
+  'data-testid'?: string;
 }
 
-export const TicketTextAreaComp = ({ value, onChange, placeholder }: TicketTextAreaProps) => {
+export const TicketTextAreaComp = ({
+  value,
+  onChange,
+  placeholder,
+  'data-testid': dataTestId
+}: TicketTextAreaProps) => {
   const { main } = useStores();
 
   const textareaValue = () => {
@@ -140,6 +146,7 @@ export const TicketTextAreaComp = ({ value, onChange, placeholder }: TicketTextA
         onChange={(e: ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
         onPaste={handlePaste}
         placeholder={placeholder}
+        data-testid={dataTestId}
       />
     </div>
   );

diff --git a/src/components/common/TopEarners/index.tsx b/src/components/common/TopEarners/index.tsx
@@ -68,6 +68,31 @@ const ErrorContainer = styled.div`
   color: ${colors.light.red1};
 `;
 
+const ViewBountiesButton = styled.button`
+  margin-top: 60px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  background-color: ${colors.light.blue1};
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:hover {
+    background-color: ${colors.light.blue2};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${colors.light.blue2};
+  }
+`;
+
 const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarnersProps) => {
   const { leaderboard } = useStores();
   const [error, setError] = useState<Error | null>(null);
@@ -86,6 +111,10 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
     fetchData();
   }, [leaderboard, onError]);
 
+  const handleViewBountiesClick = () => {
+    window.open('https://community.sphinx.chat/bounties', '_blank');
+  };
+
   if (error) {
     return (
       <ErrorContainer>
@@ -111,6 +140,7 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
             <LeaerboardItem position={index + 1} key={item.owner_pubkey} {...item} />
           ))}
       </div>
+      <ViewBountiesButton onClick={handleViewBountiesClick}>View Open Bounties</ViewBountiesButton>
     </Container>
   );
 });

diff --git a/src/config/ModeDispatcher.tsx b/src/config/ModeDispatcher.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import React from 'react';
 
 export enum AppMode {

diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIsMobile } from '../../hooks';
 import { colors } from '../../config/colors';
-import { BountiesHeader, HeaderWrap, Leftheader } from '../tickets/style.ts';
-import { BountyHeaderContent } from '../tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx';
 import TopEarners from '../../components/common/TopEarners/index.tsx';
 import { BountyComponents } from '../../components/BountyComponents';
 
@@ -14,24 +12,29 @@ const BountiesLandingPage: React.FC = () => {
   const color = colors['light'];
 
   const Body = styled.div<{ isMobile: boolean }>`
-    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
     height: ${(p: { isMobile: boolean }) =>
       p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)'};
     background: ${(p: { isMobile: boolean }) => (p.isMobile ? undefined : color.grayish.G950)};
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
   `;
 
   const ContentWrapper = styled.div`
     max-width: 1400px;
-    min-height: 650px;
-    margin: 30px auto;
     width: 100%;
-    padding: 40px 40px 40px 30px;
+    padding: 40px;
     background: white;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   `;
 
   const ContentGrid = styled.div`
@@ -77,25 +80,16 @@ const BountiesLandingPage: React.FC = () => {
     }
 
     p {
-      font-family: Barlow;
       margin-bottom: 16px;
+      font-weight: 500;
       line-height: 1.6;
       word-wrap: break-word;
-      max-width: 550px;
-      color: ${color.text2};
-      font-size: 15px;
+      max-width: 560px;
     }
   `;
 
   return (
     <Body isMobile={isMobile}>
-      <HeaderWrap>
-        <BountiesHeader>
-          <Leftheader>
-            <BountyHeaderContent>Bounties</BountyHeaderContent>
-          </Leftheader>
-        </BountiesHeader>
-      </HeaderWrap>
       <ContentWrapper>
         <ContentGrid>
           <Column>

diff --git a/src/people/WorkSpacePlanner/BountyCard/index.tsx b/src/people/WorkSpacePlanner/BountyCard/index.tsx
@@ -46,7 +46,6 @@ const AssignerPic = styled.div`
   height: 40px;
   border-radius: 50%;
   overflow: hidden;
-  background-color: ${colors.light.red1};
   display: flex;
   justify-content: center;
   align-items: center;
@@ -127,7 +126,11 @@ const BountyCardComponent: React.FC<BountyCardProps> = ({
       >
         {title}
       </CardTitle>
-      <AssignerPic>{assignee_img ? <img src={assignee_img} alt="Assigner" /> : 'Pic'}</AssignerPic>
+      {assignee_img && (
+        <AssignerPic>
+          <img src={assignee_img} alt="Assigner" />
+        </AssignerPic>
+      )}
     </CardHeader>
 
     <RowT>

diff --git a/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx b/src/people/WorkSpacePlanner/WorkspacePlannerHeader/index.tsx
@@ -151,7 +151,7 @@ export const WorkspacePlannerHeader = observer(
         <FillContainer>
           <Header>
             <Leftheader>
-              <ImageContainer src={img} width="72px" height="72px" alt="workspace icon" />
+              {img && <ImageContainer src={img} width="72px" height="72px" alt="workspace icon" />}
               <CompanyNameAndLink>
                 <CompanyLabel>{name}</CompanyLabel>
                 <UrlButtonContainer data-testid="url-button-container">

diff --git a/src/people/WorkSpacePlanner/index.tsx b/src/people/WorkSpacePlanner/index.tsx
@@ -15,7 +15,8 @@ const PlannerContainer = styled.div`
   padding: 0;
   height: calc(100vh - 65px);
   background: ${colors.light.grayish.G950};
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
 `;
 
 const ContentArea = styled.div`
@@ -32,8 +33,8 @@ const ColumnsContainer = styled.div`
   gap: 1rem;
   padding: 1rem;
   overflow-x: auto;
-  background: white;
-  height: 600px !important;
+  background: whote;
+  height: calc(100vh - 200px) !important;
 
   &::-webkit-scrollbar {
     height: 7px;
@@ -54,7 +55,8 @@ const Column = styled.div`
   border-radius: 8px;
   display: flex;
   flex-direction: column;
-  max-height: 100%;
+  height: auto;
+  min-height: 500px;
 `;
 
 const ColumnHeader = styled.div`
@@ -173,7 +175,9 @@ const WorkspacePlanner = observer(() => {
 
   const handleCardClick = (bountyId: string) => {
     bountyCardStore.saveFilterState();
-    history.push(`/bounty/${bountyId}`);
+    history.push(`/bounty/${bountyId}`, {
+      from: `/workspace/${uuid}/planner`
+    });
   };
 
   return (
@@ -185,7 +189,6 @@ const WorkspacePlanner = observer(() => {
         setFilterToggle={setFilterToggle}
       />
       <ContentArea>
-        <h1>Welcome to the new Workspace Planner</h1>
         <ColumnsContainer>
           {COLUMN_CONFIGS.map(({ id, title }: { id: string; title: string }) => (
             <Column key={id}>

diff --git a/src/people/hiveChat/index.tsx b/src/people/hiveChat/index.tsx
@@ -264,7 +264,7 @@ export const HiveChatView: React.FC = observer(() => {
 
     debounceUpdateTitle = setTimeout(() => {
       updateChatTitle(chatId, uuid, title, setIsUpdatingTitle);
-    }, 500);
+    }, 1500);
   };
 
   const onTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {