Feature/169 add commit message (#227)

* UI for Commit message * Additional test * PR Feedback: rename 'message' to 'commitMessage'
lukasoppermann · Aug 27, 2022 · 6046a55 · 6046a55
1 parent b2767e7
commit 6046a55
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git a/src/ui/components/UrlExportSettings.tsx b/src/ui/components/UrlExportSettings.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useContext } from 'react'
+import { useContext, useState } from 'react'
 import { Button } from '@components/Button'
 import { Checkbox } from '@components/Checkbox'
 import { Input } from '@components/Input'
@@ -38,6 +38,7 @@ export const UrlExportSettings = () => {
   const { settings, updateSettings } = useContext<{settings: Settings, updateSettings: any}>(SettingsContext)
   const { tokens, setTokens } = useContext(TokenContext)
   const { figmaUIApi } = useContext(FigmaContext)
+  const [commitMessage, setCommitMessage] = useState("")
 
   const handleFormSubmit = (event) => {
     event.preventDefault() // Prevent form submit triggering navigation
@@ -58,7 +59,7 @@ export const UrlExportSettings = () => {
       // prepare token json
       const tokensToExport = prepareExport(tokens, pluginSettings)
       setTokens(tokensToExport)
-      // download tokes
+      // download tokens
       urlExport(parent, {
         url: settings.serverUrl,
         accessToken: settings.accessToken,
@@ -71,9 +72,11 @@ export const UrlExportSettings = () => {
         event_type: settings.eventType,
         client_payload: {
           tokens: `${stringifyJson(tokensToExport, settings.urlJsonCompression)}`,
-          filename: `${settings.filename}${settings.extension}`
+          filename: `${settings.filename}${settings.extension}`,
+          commitMessage: `${commitMessage}`
         }
       } as urlExportRequestBody)
+
     }
   }
 
@@ -195,6 +198,18 @@ export const UrlExportSettings = () => {
             />
           </Row>
         </>}
+
+      <Separator />
+      <Title size='xlarge' weight='bold'>About This Export</Title>
+      <h3>Commit Message<Info width={200} label='Typically this will be a "commit message" for Git. Your organization may require a specific convention for these messages.' /></h3>
+      <Row fill>
+        <Input
+          type='text'
+          placeholder='Describe what has changed since the last export'
+          value={commitMessage}
+          onChange={value => setCommitMessage(value)}
+        />
+      </Row>
       <Footer>
         <WebLink align='start' href='https://github.com/lukasoppermann/design-tokens#design-tokens'>Documentation</WebLink>
         <CancelButton />

diff --git a/src/ui/modules/urlExport.ts b/src/ui/modules/urlExport.ts
@@ -76,6 +76,7 @@ const generateUrlExportRequestBody = (exportSettings: urlExportSettings, request
     body.append('variables[FIGMA_EVENT_TYPE]', requestBody.event_type)
     body.append('variables[FIGMA_CLIENT_PAYLOAD_TOKENS]', requestBody.client_payload.tokens)
     body.append('variables[FIGMA_CLIENT_PAYLOAD_FILENAME]', requestBody.client_payload.filename)
+    body.append('variables[FIGMA_CLIENT_PAYLOAD_COMMIT_MESSAGE]', requestBody.client_payload.commitMessage)
   } else {
     body = JSON.stringify(requestBody, null, 2)
   }

diff --git a/tests/unit/urlExport.test.ts b/tests/unit/urlExport.test.ts
@@ -25,7 +25,8 @@ describe('Testing urlExport', () => {
             "event_type": 'baseEvent',
             "client_payload": {
                 "tokens": '',
-                "filename": 'myBaseFile.json'
+                "filename": 'myBaseFile.json',
+                "commitMessage": ''
             }
         } as urlExportRequestBody
     })
@@ -63,15 +64,31 @@ describe('Testing urlExport', () => {
                 const payloadFilename = "file.new"
                 mockUrlExportRequestBody.client_payload.filename=payloadFilename
 
+                const payloadCommitMessage = "feat(tokens): Some tokens were added."
+                mockUrlExportRequestBody.client_payload.commitMessage=payloadCommitMessage
+
 
                 const body = _testing.generateUrlExportRequestBody(mockUrlExportSettings, mockUrlExportRequestBody) as any
                 expect(body.append).toHaveBeenCalledWith("token", accessToken)
-                expect(body.append).toHaveBeenCalledWith("token",accessToken)
-                expect(body.append).toHaveBeenCalledWith("ref",reference)
-                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_EVENT_TYPE]",event_type)
-                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_CLIENT_PAYLOAD_TOKENS]",payloadTokens)
-                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_CLIENT_PAYLOAD_FILENAME]",payloadFilename)
+                expect(body.append).toHaveBeenCalledWith("token", accessToken)
+                expect(body.append).toHaveBeenCalledWith("ref", reference)
+                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_EVENT_TYPE]", event_type)
+                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_CLIENT_PAYLOAD_TOKENS]", payloadTokens)
+                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_CLIENT_PAYLOAD_FILENAME]", payloadFilename)
+                expect(body.append).toHaveBeenCalledWith("variables[FIGMA_CLIENT_PAYLOAD_COMMIT_MESSAGE]", payloadCommitMessage)
             })
+
+        test('If a commit message is included, it is in the client_payload',
+            () => {
+                const payloadCommitMessage = "feat(tokens): Some tokens were added."
+                mockUrlExportRequestBody.client_payload.commitMessage = payloadCommitMessage
+
+                const bodyString = _testing.generateUrlExportRequestBody(mockUrlExportSettings, mockUrlExportRequestBody) as any
+                const body = JSON.parse(bodyString);
+                expect(body.client_payload).toHaveProperty('commitMessage')
+                expect(body.client_payload.commitMessage).toStrictEqual(payloadCommitMessage);
+            })
+
     })
 
     describe("addUrlExportRequestHeaders testing", () => {
@@ -187,4 +204,4 @@ describe('Testing urlExport', () => {
             })
 
     })
-})
+})
diff --git a/types/urlExportData.d.ts b/types/urlExportData.d.ts
@@ -11,6 +11,7 @@ export type urlExportRequestBody = {
   'event_type': string,
   'client_payload': {
     tokens: string,
-    filename: string
+    filename: string,
+    commitMessage: string
   }
 }