Merge pull request #3136 from DzhideX/rename-working-groups

Rename working groups in Pioneer v1

pioneer/packages/joy-proposals/src/forms/GenericWorkingGroupProposalForm.tsx

@@ -14,6 +14,8 @@ import { usePromise, useTransport } from '@polkadot/joy-utils/react/hooks';
 import PromiseComponent from '@polkadot/joy-utils/react/components/PromiseComponent';
 import { WorkerData } from '@polkadot/joy-utils/types/workingGroups';
 import { LeadInfo } from '@polkadot/joy-utils/react/components/working-groups/LeadInfo';
+import styled from 'styled-components';
+import _ from 'lodash';
 
 export type FormValues = GenericFormValues & {
   workingGroup: WorkingGroupKey;
@@ -43,18 +45,34 @@ type ExportComponentProps = ProposalFormExportProps<FormAdditionalProps, FormVal
 type FormContainerProps = ProposalFormContainerProps<ExportComponentProps>;
 export type FormInnerProps = ProposalFormInnerProps<FormContainerProps, FormValues>;
 
+const OPERATIONS_GROUP_NAMES = { Alpha: 'Builders', Beta: 'Human Resources', Gamma: 'Marketing' };
+
+const OperationsGroupSubtext = styled('p')`
+  font-size: 11px !important;
+  margin-top: -12px !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+`;
+
 const availableGroupsOptions = Object.keys(WorkingGroupDef)
   .filter((wgKey) => wgKey !== 'Gateway') // Gateway group not yet supported!
   .map((wgKey) => {
-    let text = `${wgKey} Working Group`;
+    let operationsGroupName;
+    let operationsGroupSubtext;
 
     if (wgKey.toLowerCase().includes('operations')) {
-      const workingGroupType = wgKey.slice('operations'.length);
+      const operationsGroupType = wgKey.slice('operations'.length) as 'Alpha' | 'Beta' | 'Gamma';
 
-      text = `Operations Working Group ${workingGroupType}`;
+      operationsGroupName = OPERATIONS_GROUP_NAMES[operationsGroupType];
+      operationsGroupSubtext = `Operations Working Group ${operationsGroupType}`;
     }
 
-    return { text, value: wgKey };
+    return { text: (
+      <>
+        <p>{operationsGroupName ?? `${wgKey} Working Group`}</p>
+        {operationsGroupName ? <OperationsGroupSubtext>{operationsGroupSubtext}</OperationsGroupSubtext> : null}
+      </>
+    ),
+    value: wgKey };
   });
 
 export const GenericWorkingGroupProposalForm: React.FunctionComponent<FormInnerProps> = (props) => {

pioneer/packages/joy-roles/src/tabs/Opportunities.tsx

@@ -484,6 +484,22 @@ const OpeningLabel = styled(Label)`
 
 type OpeningViewProps = WorkingGroupOpening & BlockTimeProps & MemberIdProps
 
+const renderWorkingGroupName = (workingGroup: WorkingGroups) => {
+  if (workingGroup === WorkingGroups.OperationsAlpha) {
+    return { text: 'Builders', subtext: 'Operations Working Group Alpha' };
+  }
+
+  if (workingGroup === WorkingGroups.OperationsBeta) {
+    return { text: 'Human Resources', subtext: 'Operations Working Group Beta' };
+  }
+
+  if (workingGroup === WorkingGroups.OperationsGamma) {
+    return { text: 'Marketing', subtext: 'Operations Working Group Gamma' };
+  }
+
+  return { text: workingGroup };
+};
+
 export const OpeningView = Loadable<OpeningViewProps>(
   ['opening', 'block_time_in_seconds'],
   (props) => {
@@ -495,7 +511,7 @@ export const OpeningView = Loadable<OpeningViewProps>(
         <OpeningTitle>
           {text.job.title}
           <OpeningLabel>
-            { _.startCase(props.meta.group) }{ isLeadOpening ? ' Lead' : '' }
+            { _.startCase(renderWorkingGroupName(props.meta.group).text) }{ isLeadOpening ? ' Lead' : '' }
           </OpeningLabel>
         </OpeningTitle>
         <Card fluid className='container'>
@@ -531,6 +547,12 @@ const FilterOpportunitiesDropdown = styled(Dropdown)`
   width: 250px !important;
 `;
 
+const OperationsGroupSubtext = styled('p')`
+  font-size: 11px !important;
+  margin-top: -12px !important;
+  color: rgba(0, 0, 0, 0.6) !important;
+`;
+
 export type OpeningsViewProps = MemberIdProps & {
   openings?: Array<WorkingGroupOpening>;
   block_time_in_seconds?: number;
@@ -552,10 +574,21 @@ export const OpeningsView = Loadable<OpeningsViewProps>(
       if (newPath !== location.pathname) { history.push(newPath as string); }
     };
 
-    const groupOption = (group: WorkingGroups | null, lead = false) => ({
-      value: `${basePath}${group ? `/${group}` : ''}${lead ? '/lead' : ''}`,
-      text: _.startCase(`${group || 'All opportunities'}`) + (lead ? ' (Lead)' : '')
-    });
+    const groupOption = (group: WorkingGroups | null, lead = false) => {
+      const subtext = group ? renderWorkingGroupName(group).subtext : null;
+      const text = (
+        <>
+          <p>{_.startCase(`${group ? renderWorkingGroupName(group).text : 'All opportunities'}`) + (lead ? ' (Lead)' : '')}</p>
+          {subtext ? <OperationsGroupSubtext>{subtext}</OperationsGroupSubtext> : null}
+        </>
+      );
+
+      return {
+        value: `${basePath}${group ? `/${group}` : ''}${lead ? '/lead' : ''}`,
+        text
+      };
+    };
+
     // Can assert "props.openings!" because we're using "Loadable" which prevents them from beeing undefined
     const filteredOpenings = props.openings!.filter((o) =>
       (!group || o.meta.group === group) &&

pioneer/packages/joy-roles/src/tabs/WorkingGroup.tsx

@@ -75,6 +75,8 @@ type GroupOverviewProps = GroupOverviewOuterProps & {
 
 interface OperationsGroupProps extends GroupOverviewOuterProps{
   group: WorkingGroups;
+  customGroupName?: string;
+  description: string | JSX.Element;
 }
 
 const GroupOverview = Loadable<GroupOverviewProps>(
@@ -148,23 +150,29 @@ export const StorageProviders = (props: GroupOverviewOuterProps) => (
 
 export const OperationsGroup = (props: OperationsGroupProps) => (
   <GroupOverview
-    description={
-      <span>
-        {"Operations Working Group encompases all the activites that don't require privilages on chain, for example:"}
-        <ul>
-          <li>Development</li>
-          <li>Management</li>
-          <li>Marketing</li>
-        </ul>
-      </span>
-    }
     {...props}
   />
 );
 
+const OperationsGroupName = styled('p')`
+  font-size: 14px !important;
+  color: rgba(0,0,0,0.5) !important;
+  margin-top: -2px !important;
+`;
+
 export const OperationsGroupAlpha = (props: GroupOverviewOuterProps) => (
   <OperationsGroup
     group={WorkingGroups.OperationsAlpha}
+    customGroupName='Builders'
+    description={
+      <>
+        <OperationsGroupName>Operations Group Alpha</OperationsGroupName>
+        <span>
+          The Builders working group is comprised of a diverse set of contributors that facilitate
+          the evolution and maintenance of the platform.
+        </span>
+      </>
+    }
     {...props}
   />
 );
@@ -172,6 +180,16 @@ export const OperationsGroupAlpha = (props: GroupOverviewOuterProps) => (
 export const OperationsGroupBeta = (props: GroupOverviewOuterProps) => (
   <OperationsGroup
     group={WorkingGroups.OperationsBeta}
+    customGroupName='Human Resources'
+    description={
+      <>
+        <OperationsGroupName>Operations Group Beta</OperationsGroupName>
+        <span>
+          The Human Resources working group is responsible for the Human Resources tasks required
+          for the operation and growth of the platform and community.
+        </span>
+      </>
+    }
     {...props}
   />
 );
@@ -179,6 +197,16 @@ export const OperationsGroupBeta = (props: GroupOverviewOuterProps) => (
 export const OperationsGroupGamma = (props: GroupOverviewOuterProps) => (
   <OperationsGroup
     group={WorkingGroups.OperationsGamma}
+    customGroupName='Marketing'
+    description={
+      <>
+        <OperationsGroupName>Operations Group Gamma</OperationsGroupName>
+        <span>
+          The Marketing working group is responsible for developing and executing strategies to
+          promote the Joystream platform.
+        </span>
+      </>
+    }
     {...props}
   />
 );

pioneer/packages/joy-roles/src/working_groups.ts

@@ -19,8 +19,8 @@ export const AvailableGroups: readonly WorkingGroups[] = [
 export const workerRoleNameByGroup: { [key in WorkingGroups]: string } = {
   [WorkingGroups.ContentCurators]: 'Content Curator',
   [WorkingGroups.StorageProviders]: 'Storage Provider',
-  [WorkingGroups.OperationsAlpha]: 'Operations Group Alpha Worker',
-  [WorkingGroups.OperationsBeta]: 'Operations Group Beta Worker',
-  [WorkingGroups.OperationsGamma]: 'Operations Group Gamma Worker',
-  [WorkingGroups.Distribution]: 'Distribution'
+  [WorkingGroups.OperationsAlpha]: 'Builder',
+  [WorkingGroups.OperationsBeta]: 'HR Worker',
+  [WorkingGroups.OperationsGamma]: 'Marketer',
+  [WorkingGroups.Distribution]: 'Distributor'
 };

pioneer/packages/joy-tokenomics/src/Overview/SpendingAndStakeDistributionTable.tsx

@@ -76,6 +76,11 @@ const StyledTableRow = styled(Table.Row)`
   }
 `;
 
+const ExtraInfoText = styled('p')`
+  color: rgba(0,0,0,0.7) !important;
+  font-size: 11px !important;
+`;
+
 const SpendingAndStakeTableRow: React.FC<{
   role: string;
   numberOfActors?: string;
@@ -88,7 +93,8 @@ const SpendingAndStakeTableRow: React.FC<{
   color?: string;
   active?: boolean;
   helpContent?: string;
-}> = ({ role, numberOfActors, groupEarning, groupEarningDollar, earningShare, groupStake, groupStakeDollar, stakeShare, color, active, helpContent }) => {
+  extraInfo?: { full: string, short: string };
+}> = ({ role, numberOfActors, groupEarning, groupEarningDollar, earningShare, groupStake, groupStakeDollar, stakeShare, color, active, helpContent, extraInfo }) => {
   const parseData = (data: string | undefined): string | JSX.Element => {
     if (data && active) {
       return <em>{data}</em>;
@@ -102,12 +108,15 @@ const SpendingAndStakeTableRow: React.FC<{
   return (
     <StyledTableRow color={active && 'rgb(150, 150, 150)'}>
       <Table.Cell>
-        {active ? <strong>{role}</strong> : role}
-        {helpContent && <Popup
-          trigger={<Icon className='help-icon' name='help circle' color='grey'/>}
-          content={helpContent}
-          position='right center'
-        />}
+        <div>
+          {active ? <strong>{role}</strong> : role}
+          {helpContent && <Popup
+            trigger={<Icon className='help-icon' name='help circle' color='grey'/>}
+            content={helpContent}
+            position='right center'
+          />}
+          {extraInfo && <ExtraInfoText>{extraInfo.full}</ExtraInfoText>}
+        </div>
       </Table.Cell>
       <Table.Cell>{parseData(numberOfActors)}</Table.Cell>
       <Table.Cell>{parseData(groupEarning)}</Table.Cell>
@@ -182,7 +191,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
             />
           );
         })}
-        {WORKING_GROUPS.map(({ groupType, titleCutoff, shortTitle, title, helpText, color, lead }) => {
+        {WORKING_GROUPS.map(({ groupType, titleCutoff, shortTitle, title, helpText, color, lead, extraInfo }) => {
           return (
             <React.Fragment key={groupType}>
               <SpendingAndStakeTableRow
@@ -196,6 +205,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
                 groupStakeDollar={displayStatusData(groupType, 'totalStake')}
                 stakeShare={data && `${round(data[groupType].stakeShare * 100)}`}
                 color={color}
+                extraInfo={extraInfo}
               />
               <SpendingAndStakeTableRow
                 role={width <= lead.titleCutoff ? lead.shortTitle : lead.title}
@@ -208,6 +218,7 @@ const SpendingAndStakeDistributionTable: React.FC<{data?: TokenomicsData; status
                 groupStakeDollar={displayStatusData(groupType, 'totalStake', true)}
                 stakeShare={data && `${round(data[groupType].lead.stakeShare * 100)}`}
                 color={lead.color}
+                extraInfo={extraInfo}
               />
             </React.Fragment>
           );

pioneer/packages/joy-tokenomics/src/Overview/TokenomicsCharts.tsx

@@ -34,13 +34,13 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
         <ChartContainer>
           <StyledPieChart
             values={[
-              ...WORKING_GROUPS.map(({ color, title, groupType, lead }) => [{
+              ...WORKING_GROUPS.map(({ color, title, groupType, lead, extraInfo }) => [{
                 colors: [color],
-                label: title,
+                label: `${title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].rewardsShare * 100
               }, {
                 colors: [lead.color],
-                label: lead.title,
+                label: `${lead.title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].lead.rewardsShare * 100
               }]).flat(),
               ...NON_WORKING_GROUPS.map(({ color, shortTitle, groupType }) => ({
@@ -62,13 +62,13 @@ const TokenomicsCharts: React.FC<{data?: TokenomicsData; className?: string}> =
         <ChartContainer>
           <StyledPieChart
             values={[
-              ...WORKING_GROUPS.map(({ color, title, groupType, lead }) => [{
+              ...WORKING_GROUPS.map(({ color, title, groupType, lead, extraInfo }) => [{
                 colors: [color],
-                label: title,
+                label: `${title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].stakeShare * 100
               }, {
                 colors: [lead.color],
-                label: lead.title,
+                label: `${lead.title}${extraInfo ? ` (${extraInfo.short})` : ''}`,
                 value: data[groupType].lead.stakeShare * 100
               }]).flat(),
               ...NON_WORKING_GROUPS.map(({ color, shortTitle, groupType }) => ({

pioneer/packages/joy-tokenomics/src/tokenomicsGroupsData.ts

@@ -53,45 +53,57 @@ export const WORKING_GROUPS = [
   {
     groupType: 'operationsAlpha' as const,
     titleCutoff: 1050,
-    shortTitle: 'Operations A.',
-    title: 'Operations Alpha',
-    helpText: 'The current Operations Group Alpha members, and the sum of their projected rewards and stakes.',
+    shortTitle: 'Builders',
+    title: 'Builders',
+    helpText: 'The current Builders (Operations Group Alpha), and the sum of their projected rewards and stakes.',
     color: '#009688',
+    extraInfo: {
+      full: 'Operations Working Group Alpha',
+      short: 'OWG Alpha'
+    },
     lead: {
       titleCutoff: 1015,
-      shortTitle: 'Operations A. Lead',
-      title: 'Operations Alpha Lead',
-      helpText: 'Current Operations Group Alpha Lead, and their projected reward and stake.',
+      shortTitle: 'Builders Lead',
+      title: 'Builders Lead',
+      helpText: 'Current Builders (Operations Group Alpha) Lead, and their projected reward and stake.',
       color: '#00bcd4'
     }
   },
   {
     groupType: 'operationsBeta' as const,
     titleCutoff: 1050,
-    shortTitle: 'Operations B.',
-    title: 'Operations Beta',
-    helpText: 'The current Operations Group Beta members, and the sum of their projected rewards and stakes.',
+    shortTitle: 'Human Res.',
+    title: 'Human Resources',
+    helpText: 'The current Human Resources (Operations Group Beta) Workers, and the sum of their projected rewards and stakes.',
     color: '#03a9f4',
+    extraInfo: {
+      full: 'Operations Working Group Beta',
+      short: 'OWG Beta'
+    },
     lead: {
       titleCutoff: 1015,
-      shortTitle: 'Operations B. Lead',
-      title: 'Operations Beta Lead',
-      helpText: 'Current Operations Group Beta Lead, and their projected reward and stake.',
+      shortTitle: 'HR Lead',
+      title: 'Human Res. Lead',
+      helpText: 'Current Human Resources (Operations Group Beta) Lead, and their projected reward and stake.',
       color: '#2196f3'
     }
   },
   {
     groupType: 'operationsGamma' as const,
     titleCutoff: 1050,
-    shortTitle: 'Operations G.',
-    title: 'Operations Gamma',
-    helpText: 'The current Operations Group Gamma members, and the sum of their projected rewards and stakes.',
+    shortTitle: 'Marketing',
+    title: 'Marketing',
+    helpText: 'The current Marketers (Operations Group Gamma), and the sum of their projected rewards and stakes.',
     color: '#3f51b5',
+    extraInfo: {
+      full: 'Operations Working Group Gamma',
+      short: 'OWG Gamma'
+    },
     lead: {
       titleCutoff: 1015,
-      shortTitle: 'Operations G. Lead',
-      title: 'Operations Gamma Lead',
-      helpText: 'Current Operations Group Gamma Lead, and their projected reward and stake.',
+      shortTitle: 'Marketing Lead',
+      title: 'Marketing Lead',
+      helpText: 'Current Marketing Lead (Operations Group Gamma), and their projected reward and stake.',
       color: '#673ab7'
     }
   },