Browse Source

Changing the API key modal to have a copy input which allows copying the API key easily.

pull/4732/head
mike12345567 5 years ago
parent
commit
6415abb3d4
  1. 53
      packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
  2. 58
      packages/builder/src/components/common/inputs/CopyInput.svelte
  3. 5
      packages/builder/src/components/settings/UpdateAPIKeyModal.svelte
  4. 2
      packages/server/package.json
  5. 4
      packages/server/src/automations/utils.js
  6. 32
      packages/server/yarn.lock

53
packages/builder/src/components/automation/Shared/WebhookDisplay.svelte

@ -1,5 +1,5 @@
<script> <script>
import { Input, Icon, notifications } from "@budibase/bbui" import CopyInput from "components/common/inputs/CopyInput.svelte"
export let value export let value
@ -10,55 +10,6 @@
return `${window.location.origin}/${uri}` return `${window.location.origin}/${uri}`
} }
function copyToClipboard() {
const dummy = document.createElement("textarea")
document.body.appendChild(dummy)
dummy.value = fullWebhookURL(value)
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
notifications.success(`URL copied to clipboard`)
}
</script> </script>
<div> <CopyInput {value} copyValue={fullWebhookURL(value)} />
<Input readonly value={fullWebhookURL(value)} />
<div class="icon" on:click={() => copyToClipboard()}>
<Icon size="S" name="Copy" />
</div>
</div>
<style>
div {
position: relative;
}
.icon {
right: 1px;
bottom: 1px;
position: absolute;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
box-sizing: border-box;
border-left: 1px solid var(--spectrum-alias-border-color);
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
width: 31px;
color: var(--spectrum-alias-text-color);
background-color: var(--spectrum-global-color-gray-75);
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms),
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
border-color var(--spectrum-global-animation-duration-100, 130ms);
height: calc(var(--spectrum-alias-item-height-m) - 2px);
}
.icon:hover {
cursor: pointer;
color: var(--spectrum-alias-text-color-hover);
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover);
}
</style>

58
packages/builder/src/components/common/inputs/CopyInput.svelte

@ -0,0 +1,58 @@
<script>
import { Input, Icon, notifications } from "@budibase/bbui"
export let label = null
export let value
export let copyValue
const copyToClipboard = val => {
const dummy = document.createElement("textarea")
document.body.appendChild(dummy)
dummy.value = val
dummy.select()
document.execCommand("copy")
document.body.removeChild(dummy)
notifications.success(`URL copied to clipboard`)
}
</script>
<div>
<Input readonly {value} {label} />
<div class="icon" on:click={() => copyToClipboard(value || copyValue)}>
<Icon size="S" name="Copy" />
</div>
</div>
<style>
div {
position: relative;
}
.icon {
right: 1px;
bottom: 1px;
position: absolute;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
box-sizing: border-box;
border-left: 1px solid var(--spectrum-alias-border-color);
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
width: 31px;
color: var(--spectrum-alias-text-color);
background-color: var(--spectrum-global-color-gray-75);
transition: background-color
var(--spectrum-global-animation-duration-100, 130ms),
box-shadow var(--spectrum-global-animation-duration-100, 130ms),
border-color var(--spectrum-global-animation-duration-100, 130ms);
height: calc(var(--spectrum-alias-item-height-m) - 2px);
}
.icon:hover {
cursor: pointer;
color: var(--spectrum-alias-text-color-hover);
background-color: var(--spectrum-global-color-gray-50);
border-color: var(--spectrum-alias-border-color-hover);
}
</style>

5
packages/builder/src/components/settings/UpdateAPIKeyModal.svelte

@ -1,7 +1,8 @@
<script> <script>
import { ModalContent, Body, Input, notifications } from "@budibase/bbui" import { ModalContent, Body, notifications } from "@budibase/bbui"
import { auth } from "stores/portal" import { auth } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import CopyInput from "components/common/inputs/CopyInput.svelte"
let apiKey = null let apiKey = null
@ -32,5 +33,5 @@
You can find information about your developer account here, such as the API You can find information about your developer account here, such as the API
key used to access the Budibase API. key used to access the Budibase API.
</Body> </Body>
<Input disabled bind:value={apiKey} label="API key" /> <CopyInput bind:value={apiKey} label="API key" />
</ModalContent> </ModalContent>

2
packages/server/package.json

@ -164,8 +164,6 @@
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"supertest": "^4.0.2", "supertest": "^4.0.2",
"swagger-jsdoc": "^6.1.0", "swagger-jsdoc": "^6.1.0",
"@apidevtools/swagger-parser": "^10.0.3",
"swagger-parser": "^10.0.3",
"ts-jest": "^27.0.3", "ts-jest": "^27.0.3",
"ts-node": "^10.0.0", "ts-node": "^10.0.0",
"typescript": "^4.3.5", "typescript": "^4.3.5",

4
packages/server/src/automations/utils.js

@ -5,7 +5,7 @@ const CouchDB = require("../db")
const { queue } = require("./bullboard") const { queue } = require("./bullboard")
const newid = require("../db/newid") const newid = require("../db/newid")
const { updateEntityMetadata } = require("../utilities") const { updateEntityMetadata } = require("../utilities")
const { MetadataTypes } = require("../constants") const { MetadataTypes, WebhookType } = require("../constants")
const { getProdAppID } = require("@budibase/backend-core/db") const { getProdAppID } = require("@budibase/backend-core/db")
const { cloneDeep } = require("lodash/fp") const { cloneDeep } = require("lodash/fp")
const { getAppDB, getAppId } = require("@budibase/backend-core/context") const { getAppDB, getAppId } = require("@budibase/backend-core/context")
@ -159,7 +159,7 @@ exports.checkForWebhooks = async ({ oldAuto, newAuto }) => {
request: { request: {
body: new webhooks.Webhook( body: new webhooks.Webhook(
"Automation webhook", "Automation webhook",
webhooks.WebhookType.AUTOMATION, WebhookType.AUTOMATION,
newAuto._id newAuto._id
), ),
}, },

32
packages/server/yarn.lock

@ -39,18 +39,6 @@
call-me-maybe "^1.0.1" call-me-maybe "^1.0.1"
z-schema "^4.2.3" z-schema "^4.2.3"
"@apidevtools/swagger-parser@10.0.3", "@apidevtools/swagger-parser@^10.0.3":
version "10.0.3"
resolved "https://registry.yarnpkg.com/@apidevtools/swagger-parser/-/swagger-parser-10.0.3.tgz#32057ae99487872c4dd96b314a1ab4b95d89eaf5"
integrity sha512-sNiLY51vZOmSPFZA5TF35KZ2HbgYklQnTSDnkghamzLb3EkNtcQnrBQEj5AOCxHpTtXpqMCRM1CrmV2rG6nw4g==
dependencies:
"@apidevtools/json-schema-ref-parser" "^9.0.6"
"@apidevtools/openapi-schemas" "^2.0.4"
"@apidevtools/swagger-methods" "^3.0.2"
"@jsdevtools/ono" "^7.1.3"
call-me-maybe "^1.0.1"
z-schema "^5.0.1"
"@azure/abort-controller@^1.0.0": "@azure/abort-controller@^1.0.0":
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.0.4.tgz#fd3c4d46c8ed67aace42498c8e2270960250eafd" resolved "https://registry.yarnpkg.com/@azure/abort-controller/-/abort-controller-1.0.4.tgz#fd3c4d46c8ed67aace42498c8e2270960250eafd"
@ -11562,13 +11550,6 @@ swagger-parser@10.0.2:
dependencies: dependencies:
"@apidevtools/swagger-parser" "10.0.2" "@apidevtools/swagger-parser" "10.0.2"
swagger-parser@^10.0.3:
version "10.0.3"
resolved "https://registry.yarnpkg.com/swagger-parser/-/swagger-parser-10.0.3.tgz#04cb01c18c3ac192b41161c77f81e79309135d03"
integrity sha512-nF7oMeL4KypldrQhac8RyHerJeGPD1p2xDh900GPvc+Nk7nWP6jX2FcC7WmkinMoAmoO774+AFXcWsW8gMWEIg==
dependencies:
"@apidevtools/swagger-parser" "10.0.3"
symbol-tree@^3.2.2, symbol-tree@^3.2.4: symbol-tree@^3.2.2, symbol-tree@^3.2.4:
version "3.2.4" version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
@ -12299,7 +12280,7 @@ validate.js@0.13.1:
resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a" resolved "https://registry.yarnpkg.com/validate.js/-/validate.js-0.13.1.tgz#b58bfac04a0f600a340f62e5227e70d95971e92a"
integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g== integrity sha512-PnFM3xiZ+kYmLyTiMgTYmU7ZHkjBZz2/+F0DaALc/uUtVzdCt1wAosvYJ5hFQi/hz8O4zb52FQhHZRC+uVkJ+g==
validator@^13.6.0, validator@^13.7.0: validator@^13.6.0:
version "13.7.0" version "13.7.0"
resolved "https://registry.yarnpkg.com/validator/-/validator-13.7.0.tgz#4f9658ba13ba8f3d82ee881d3516489ea85c0857" resolved "https://registry.yarnpkg.com/validator/-/validator-13.7.0.tgz#4f9658ba13ba8f3d82ee881d3516489ea85c0857"
integrity sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw== integrity sha512-nYXQLCBkpJ8X6ltALua9dRrZDHVYxjJ1wgskNt1lH9fzGjs3tgojGSCBjmEPwkWS1y29+DrizMTW19Pr9uB2nw==
@ -12841,17 +12822,6 @@ z-schema@^4.2.3:
optionalDependencies: optionalDependencies:
commander "^2.7.1" commander "^2.7.1"
z-schema@^5.0.1:
version "5.0.2"
resolved "https://registry.yarnpkg.com/z-schema/-/z-schema-5.0.2.tgz#f410394b2c9fcb9edaf6a7511491c0bb4e89a504"
integrity sha512-40TH47ukMHq5HrzkeVE40Ad7eIDKaRV2b+Qpi2prLc9X9eFJFzV7tMe5aH12e6avaSS/u5l653EQOv+J9PirPw==
dependencies:
lodash.get "^4.4.2"
lodash.isequal "^4.5.0"
validator "^13.7.0"
optionalDependencies:
commander "^2.7.1"
zlib@1.0.5: zlib@1.0.5:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/zlib/-/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0" resolved "https://registry.yarnpkg.com/zlib/-/zlib-1.0.5.tgz#6e7c972fc371c645a6afb03ab14769def114fcc0"

Loading…
Cancel
Save