Skip to content

Commit

Permalink
Merge branch 'feat-APP-2522-release-notes' into f/sdk-update
Browse files Browse the repository at this point in the history
  • Loading branch information
@sepehr2github
sepehr2github committed Nov 9, 2023
2 parents 6e61f70 + 38cbccd commit f8499ce
Show file tree
Hide file tree
Showing 12 changed files with 359 additions and 84 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
"rudder-sdk-js": "^2.20.0",
"sanitize-html": "^2.10.0",
"styled-components": "^6.0.8",
"tiptap-markdown": "^0.8.4",
"use-react-router-breadcrumbs": "^3.0.1",
"viem": "^1.4.2",
"wagmi": "^1.3.9"
Expand Down
153 changes: 135 additions & 18 deletions src/containers/defineProposal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,52 @@ import {
TextareaWYSIWYG,
TextInput,
} from '@aragon/ods-old';
import StarterKit from '@tiptap/starter-kit';
import {Markdown} from 'tiptap-markdown';
import React, {useEffect, useState} from 'react';
import styled from 'styled-components';
import {useTranslation} from 'react-i18next';

import AddLinks from 'components/addLinks';
import {useWallet} from 'hooks/useWallet';
import {StringIndexed} from 'utils/types';
import {ProposalFormData, StringIndexed} from 'utils/types';
import {Controller, useFormContext, useWatch} from 'react-hook-form';
import {isOnlyWhitespace} from 'utils/library';
import {UpdateListItem} from 'containers/updateListItem/updateListItem';
import {useParams} from 'react-router-dom';
import {VersionSelectionMenu} from 'containers/versionSelectionMenu/versionSelectionMenu';
import {useUpdateContext} from 'context/update';
import {Loading} from 'components/temporary';
import {useDaoDetailsQuery} from 'hooks/useDaoDetails';
import {useReleaseNotes} from 'services/aragon-sdk/queries/use-release-notes';
import {osxUpdates} from 'utils/osxUpdates';
import {useEditor} from '@tiptap/react';
import {useProtocolVersions} from 'hooks/useDaoVersions';

const DefineProposal: React.FC = () => {
const {t} = useTranslation();
const {address, ensAvatarUrl} = useWallet();
const {control, setValue} = useFormContext();
const {data: dao} = useDaoDetailsQuery();
const {handlePreparePlugin, osxAvailableVersions, pluginAvailableVersions} =
useUpdateContext();

const pluginSelectedVersion = useWatch({name: 'pluginSelectedVersion'});
const osSelectedVersion = useWatch({name: 'osSelectedVersion'});
const {data: releases} = useReleaseNotes();
const editor = useEditor({extensions: [StarterKit, Markdown]});
const {data: versions} = useProtocolVersions(dao?.address);

const pluginSelectedVersion = useWatch<
ProposalFormData,
'pluginSelectedVersion'
>({
name: 'pluginSelectedVersion',
});
const osSelectedVersion = useWatch<ProposalFormData, 'osSelectedVersion'>({
name: 'osSelectedVersion',
});
const updateFramework = useWatch<ProposalFormData, 'updateFramework'>({
name: 'updateFramework',
});

const {type} = useParams();
const [showModal, setShowModal] = useState<{
Expand All @@ -43,10 +65,14 @@ const DefineProposal: React.FC = () => {
const UpdateItems = [
{
id: 'os',
label: `Aragon OSx v${osSelectedVersion?.version}`,
helptext: 'TBD inline release notes',
LinkLabel: t('update.item.releaseNotesLabel'),
...(osxAvailableVersions?.get(osSelectedVersion?.version)?.isLatest && {
label: osxUpdates.getProtocolUpdateLabel(osSelectedVersion?.version),
releaseNote: osxUpdates.getReleaseNotes({
releases,
version: osSelectedVersion?.version,
}),
linkLabel: t('update.item.releaseNotesLabel'),
...(osxAvailableVersions?.get(osSelectedVersion?.version ?? '')
?.isLatest && {
tagLabelNatural: t('update.item.tagLatest'),
}),
buttonSecondaryLabel: t('update.item.versionCtaLabel'),
Expand All @@ -61,16 +87,20 @@ const DefineProposal: React.FC = () => {
},
{
id: 'plugin',
label: `Token voting v${pluginSelectedVersion?.version.release}.${pluginSelectedVersion?.version.build}`,
helptext: 'TBD inline release notes',
LinkLabel: t('update.item.releaseNotesLabel'),
releaseNote: osxUpdates.getReleaseNotes({
releases,
version: pluginSelectedVersion?.version,
isPlugin: true,
}),
label: osxUpdates.getPluginUpdateLabel(pluginSelectedVersion?.version),
linkLabel: t('update.item.releaseNotesLabel'),
...(pluginAvailableVersions?.get(
`${pluginSelectedVersion?.version.release}.${pluginSelectedVersion?.version.build}`
osxUpdates.getPluginVersion(pluginSelectedVersion?.version) ?? ''
)?.isLatest && {
tagLabelNatural: t('update.item.tagLatest'),
}),
...(pluginAvailableVersions?.get(
`${pluginSelectedVersion?.version.release}.${pluginSelectedVersion?.version.build}`
osxUpdates.getPluginVersion(pluginSelectedVersion?.version) ?? ''
)?.isPrepared
? {
tagLabelInfo: t('update.item.tagPrepared'),
Expand All @@ -93,13 +123,100 @@ const DefineProposal: React.FC = () => {

useEffect(() => {
if (type === 'os-update') {
setValue('proposalTitle', 'Aragon Update');
setValue(
'proposalSummary',
'This is an update for your Aragon OSx based DAO. Review all the details and vote for it.'
);
const proposalTitle = t('update.proposal.title');
const proposalSummary = t('update.proposal.summary', {
daoName: dao?.metadata.name,
});

setValue('proposalTitle', proposalTitle);
setValue('proposalSummary', proposalSummary);
}
}, [setValue, type, dao, t]);

useEffect(() => {
if (type === 'os-update') {
let proposalBody = t('update.proposal.descriptionHeader');

if (updateFramework?.os) {
const updatedVersion = osxUpdates.getProtocolUpdateLabel(
osSelectedVersion?.version
);
const releaseNotes = osxUpdates.getReleaseNotes({
releases,
version: osSelectedVersion?.version,
});
editor?.commands.setContent(releaseNotes?.summary ?? '');
proposalBody += t('update.proposal.descriptionProtocolUpgrade', {
updatedVersion,
description: editor?.getHTML().replace(/<(\/){0,1}p>/g, ''),
releaseNotesLink: releaseNotes?.html_url,
currentVersion: osxUpdates.getProtocolUpdateLabel(versions),
});
}
if (updateFramework?.plugin) {
// Add space between the two updates
if (updateFramework.os) {
proposalBody += '<p />';
}

const updatedVersion = osxUpdates.getPluginUpdateLabel(
pluginSelectedVersion?.version
);
const releaseNotes = osxUpdates.getReleaseNotes({
releases,
version: pluginSelectedVersion?.version,
isPlugin: true,
});
editor?.commands.setContent(releaseNotes?.summary ?? '');
proposalBody += t('update.proposal.descriptionPluginUpgrade', {
updatedVersion,
description: editor?.getHTML().replace(/<(\/){0,1}p>/g, ''),
releaseNotesLink: releaseNotes?.html_url,
currentVersion: osxUpdates.getPluginUpdateLabel(dao?.plugins[0]),
});
}

proposalBody += t('update.proposal.descriptionFooter');

setValue('proposal', proposalBody);
}
}, [
setValue,
type,
dao,
t,
editor,
versions,
releases,
osSelectedVersion,
pluginSelectedVersion,
updateFramework,
]);

useEffect(() => {
if (type === 'os-update') {
let index = 0;
setValue('actions', []);
if (updateFramework?.os && pluginSelectedVersion?.version) {
setValue(`actions.${index}.name`, 'os_update');
setValue(`actions.${index}.inputs.version`, osSelectedVersion?.version);
index++;
}
if (updateFramework?.plugin && pluginSelectedVersion?.version) {
setValue(`actions.${index}.name`, 'plugin_update');
setValue(`actions.${index}.inputs`, {
versionTag: pluginSelectedVersion?.version,
});
}
}
}, [setValue, type]);
}, [
osSelectedVersion?.version,
pluginSelectedVersion?.version,
setValue,
type,
updateFramework?.os,
updateFramework?.plugin,
]);

if (!pluginSelectedVersion) {
return <Loading />;
Expand Down
40 changes: 4 additions & 36 deletions src/containers/reviewProposal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import {Erc20TokenDetails} from '@aragon/sdk-client';
import TipTapLink from '@tiptap/extension-link';
import {EditorContent, useEditor} from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import {Markdown} from 'tiptap-markdown';
import {Locale, format, formatDistanceToNow} from 'date-fns';
import * as Locales from 'date-fns/locale';
import React, {useEffect, useMemo} from 'react';
import {useFormContext, useWatch} from 'react-hook-form';
import {useFormContext} from 'react-hook-form';
import {useTranslation} from 'react-i18next';
import {TFunction} from 'i18next';
import styled from 'styled-components';
Expand Down Expand Up @@ -35,7 +36,6 @@ import {
} from 'utils/date';
import {getErc20VotingParticipation, getNonEmptyActions} from 'utils/proposals';
import {ProposalResource, SupportedVotingSettings} from 'utils/types';
import {useParams} from 'react-router-dom';

type ReviewProposalProps = {
defineProposalStepNumber: number;
Expand All @@ -48,10 +48,6 @@ const ReviewProposal: React.FC<ReviewProposalProps> = ({
}) => {
const {t, i18n} = useTranslation();
const {setStep} = useFormStep();
const {type} = useParams();
const pluginSelectedVersion = useWatch({name: 'pluginSelectedVersion'});
const osSelectedVersion = useWatch({name: 'osSelectedVersion'});
const updateFramework = useWatch({name: 'updateFramework'});

const {data: daoDetails, isLoading: detailsLoading} = useDaoDetailsQuery();
const pluginAddress = daoDetails?.plugins?.[0]?.instanceAddress as string;
Expand All @@ -76,6 +72,7 @@ const ReviewProposal: React.FC<ReviewProposalProps> = ({
content: values.proposal,
extensions: [
StarterKit,
Markdown,
TipTapLink.configure({
openOnClick: false,
}),
Expand Down Expand Up @@ -219,31 +216,6 @@ const ReviewProposal: React.FC<ReviewProposalProps> = ({
}
}, [setValue, values.proposal]);

useEffect(() => {
if (type === 'os-update') {
let index = 0;
setValue('actions', []);
if (updateFramework.os && pluginSelectedVersion?.version) {
setValue(`actions.${index}.name`, 'os_update');
setValue(`actions.${index}.inputs.version`, osSelectedVersion?.version);
index++;
}
if (updateFramework.plugin && pluginSelectedVersion?.version) {
setValue(`actions.${index}.name`, 'plugin_update');
setValue(`actions.${index}.inputs`, {
versionTag: pluginSelectedVersion.version,
});
}
}
}, [
osSelectedVersion?.version,
pluginSelectedVersion.version,
setValue,
type,
updateFramework.os,
updateFramework.plugin,
]);

/*************************************************
* Render *
*************************************************/
Expand All @@ -268,11 +240,7 @@ const ReviewProposal: React.FC<ReviewProposalProps> = ({

<ContentContainer>
<ProposalContainer>
{values.proposal && (
<>
<StyledEditorContent editor={editor} />
</>
)}
{values.proposal && <StyledEditorContent editor={editor} />}

{/* <UpdateVerificationCard actions={values.actions} /> */}

Expand Down
36 changes: 28 additions & 8 deletions src/containers/updateListItem/updateListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ import {
Link,
Tag,
} from '@aragon/ods-old';
import React from 'react';
import {EditorContent, useEditor} from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import {Markdown} from 'tiptap-markdown';
import React, {useEffect} from 'react';
import styled from 'styled-components';
import {IReleaseNote} from 'services/aragon-sdk/domain/release-note';

export const Icons = {
multiSelect: {
Expand All @@ -25,9 +29,9 @@ export const Icons = {
};

export type CheckboxListItemProps = {
label: string;
helptext?: string;
LinkLabel: string;
label?: string;
linkLabel: string;
releaseNote?: IReleaseNote;
tagLabelNatural?: string;
tagLabelInfo?: string;
disabled?: boolean;
Expand All @@ -43,8 +47,8 @@ export type CheckboxListItemProps = {
// TODO: This might be a component that
export const UpdateListItem: React.FC<CheckboxListItemProps> = ({
label,
helptext,
LinkLabel,
linkLabel,
releaseNote,
tagLabelNatural,
tagLabelInfo,
disabled = false,
Expand All @@ -56,6 +60,16 @@ export const UpdateListItem: React.FC<CheckboxListItemProps> = ({
onClickActionPrimary,
onClickActionSecondary,
}) => {
const editor = useEditor({
editable: false,
extensions: [StarterKit, Markdown],
});

// Update editor content on release notes change
useEffect(() => {
editor?.commands.setContent(releaseNote?.summary ?? '');
}, [editor, releaseNote]);

return (
<Container data-testid="checkboxListItem" {...{type, disabled, onClick}}>
<Wrapper>
Expand All @@ -70,8 +84,14 @@ export const UpdateListItem: React.FC<CheckboxListItemProps> = ({
</div>
{Icons[multiSelect ? 'multiSelect' : 'radio'][type]}
</HStack>
<Helptext>{helptext}</Helptext>
<Link label={LinkLabel} iconRight={<IconLinkExternal />} />
<Helptext>
<EditorContent editor={editor} />
</Helptext>
<Link
label={linkLabel}
iconRight={<IconLinkExternal />}
href={releaseNote?.html_url}
/>
</div>
{(buttonPrimaryLabel || buttonSecondaryLabel) && (
<div className="mt-6 flex flex-col gap-y-3">
Expand Down
Loading

0 comments on commit f8499ce

Please sign in to comment.