feat: display Space guidelines and template (#1084)

* refactor: move guidelines and template to Space

* feat: use guidelines and template

apps/ui/src/composables/useEditor.ts

@@ -27,7 +27,8 @@ const processedProposals = Object.fromEntries(
 );
 
 const proposals = reactive<Drafts>(processedProposals as Drafts);
-const spaceVoteType = reactive(new Map<string, VoteType>());
+const spaceVoteType = new Map<string, VoteType>();
+const spaceTemplate = new Map<string, string>();
 
 function generateId() {
   return (Math.random() + 1).toString(36).substring(7);
@@ -38,6 +39,8 @@ function getSpaceId(draftId: string) {
 }
 
 export function useEditor() {
+  const spacesStore = useSpacesStore();
+
   const drafts = computed(() => {
     return Object.entries(removeEmpty(proposals))
       .map(([k, value]) => {
@@ -56,11 +59,13 @@ export function useEditor() {
 
   function removeEmpty(proposals: Drafts): Drafts {
     return Object.entries(proposals).reduce((acc, [id, proposal]) => {
-      const { executions, type, choices, labels, ...rest } = omit(proposal, [
-        'updatedAt'
-      ]);
+      const { executions, type, body, choices, labels, ...rest } = omit(
+        proposal,
+        ['updatedAt']
+      );
       const hasFormValues = Object.values(rest).some(val => !!val);
       const hasChangedVotingType = type !== spaceVoteType.get(getSpaceId(id));
+      const hasChangedBody = body !== spaceTemplate.get(getSpaceId(id));
       const hasFormChoices =
         type !== 'basic' && (choices || []).some(val => !!val);
 
@@ -69,6 +74,7 @@ export function useEditor() {
         labels.length === 0 &&
         !hasFormValues &&
         !hasChangedVotingType &&
+        !hasChangedBody &&
         !hasFormChoices
       ) {
         return acc;
@@ -85,8 +91,23 @@ export function useEditor() {
     }, {});
   }
 
+  async function getInitialProposalBody(spaceId: string) {
+    if (spaceTemplate.has(spaceId)) {
+      return spaceTemplate.get(spaceId) as string;
+    }
+
+    if (!spacesStore.spacesMap.has(spaceId)) {
+      await spacesStore.fetchSpaces([spaceId]);
+    }
+
+    const template = spacesStore.spacesMap.get(spaceId)?.template ?? '';
+
+    spaceTemplate.set(spaceId, template);
+
+    return template;
+  }
+
   async function setSpacesVoteType(spaceIds: string[]) {
-    const spacesStore = useSpacesStore();
     const newIds = spaceIds.filter(id => !spaceVoteType.has(id));
 
     if (!newIds.length) return;
@@ -122,9 +143,11 @@ export function useEditor() {
     const id = draftKey ?? generateId();
     const key = `${spaceId}:${id}`;
 
+    const body = await getInitialProposalBody(spaceId);
+
     proposals[key] = {
       title: '',
-      body: '',
+      body,
       discussion: '',
       type,
       choices,

apps/ui/src/composables/useSpaceSettings.ts

@@ -702,8 +702,8 @@ export function useSpaceSettings(space: Ref<Space>) {
 
     if (offchainNetworks.includes(space.value.network)) {
       proposalValidation.value = getInitialProposalValidation(space.value);
-      guidelines.value = space.value.additionalRawData?.guidelines ?? '';
-      template.value = space.value.additionalRawData?.template ?? '';
+      guidelines.value = space.value.guidelines ?? '';
+      template.value = space.value.template ?? '';
 
       const initialVotingProperties = getInitialVotingProperties(space.value);
       quorumType.value = initialVotingProperties.quorumType;
@@ -816,14 +816,12 @@ export function useSpaceSettings(space: Ref<Space>) {
         return;
       }
 
-      if (
-        guidelinesValue !== (space.value.additionalRawData?.guidelines ?? '')
-      ) {
+      if (guidelinesValue !== (space.value.guidelines ?? '')) {
         isModified.value = true;
         return;
       }
 
-      if (templateValue !== (space.value.additionalRawData?.template ?? '')) {
+      if (templateValue !== (space.value.template ?? '')) {
         isModified.value = true;
         return;
       }

apps/ui/src/networks/common/graphqlApi/index.ts

@@ -252,7 +252,9 @@ function formatSpace(
       space.strategies_indices
     ),
     children: [],
-    parent: null
+    parent: null,
+    template: null,
+    guidelines: null
   };
 }
 

apps/ui/src/networks/offchain/api/index.ts

@@ -142,8 +142,6 @@ function formatSpace(
     private: space.private,
     domain: space.domain,
     skin: space.skin,
-    guidelines: space.guidelines,
-    template: space.template,
     strategies: space.strategies,
     categories: space.categories,
     admins: space.admins,
@@ -212,6 +210,8 @@ function formatSpace(
     children: space.children.map(formatRelatedSpace),
     parent: space.parent ? formatRelatedSpace(space.parent) : null,
     terms: space.terms,
+    guidelines: space.guidelines,
+    template: space.template,
     additionalRawData
   };
 }

apps/ui/src/types.ts

@@ -139,8 +139,6 @@ export type OffchainAdditionalRawData = {
   | 'private'
   | 'domain'
   | 'skin'
-  | 'guidelines'
-  | 'template'
   | 'strategies'
   | 'categories'
   | 'admins'
@@ -210,6 +208,8 @@ export type Space = {
   created: number;
   children: RelatedSpace[];
   parent: RelatedSpace | null;
+  template: string | null;
+  guidelines: string | null;
   // only use this for settings, if it's actually used for other things
   // move it to main space type
   additionalRawData?: OffchainAdditionalRawData;

apps/ui/src/views/Space/Editor.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { sanitizeUrl } from '@braintree/sanitize-url';
 import { LocationQueryValue } from 'vue-router';
 import { StrategyWithTreasury } from '@/composables/useTreasuries';
 import {
@@ -112,6 +113,11 @@ const hasExecution = computed(() =>
 const extraContacts = computed(() => {
   return props.space.treasuries as Contact[];
 });
+const guidelines = computed(() => {
+  if (!props.space.guidelines) return null;
+
+  return sanitizeUrl(props.space.guidelines);
+});
 
 const bodyDefinition = computed(() => ({
   type: 'string',
@@ -466,6 +472,12 @@ watchEffect(() => {
               >.</span
             >
           </UiAlert>
+          <div v-if="guidelines">
+            <h4 class="mb-2 eyebrow">Guidelines</h4>
+            <a :href="guidelines" target="_blank" class="block mb-4">
+              <UiLinkPreview :url="guidelines" :show-default="true" />
+            </a>
+          </div>
           <UiInputString
             :key="proposalKey || ''"
             v-model="proposal.title"