Merge pull request #8 from hudec117/dev

0.3.0

public/manifest.json

@@ -8,7 +8,8 @@
     "minimum_chrome_version": "88",
     "manifest_version": 3,
     "permissions": [
-        "cookies"
+        "cookies",
+        "storage"
     ],
     "host_permissions": [
         "https://*.lightning.force.com/",

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, type App, inject } from 'vue';
+
 import ToolLauncher from './components/ToolLauncher.vue';
 import ErrorModal from './components/modals/error/ErrorModal.vue';
 
@@ -10,6 +11,7 @@ const errorModal = ref<InstanceType<typeof ErrorModal> | null>(null);
 app.config.errorHandler = err => {
   errorModal.value?.show(err as Error);
 };
+
 app.provide('errorModal', errorModal);
 
 window.addEventListener('unhandledrejection', (e: PromiseRejectionEvent) => {

src/components/GroupMemberships.vue

@@ -294,7 +294,7 @@ function showError(message: string, stack?: string) {
                     </h2>
                 </div>
                 <div class="slds-no-flex">
-                    <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-custom-align-button"
+                    <button class="slds-button slds-button_icon slds-button_icon-border-filled align-card-action-button"
                             title="Toggle API Names"
                            @click="showAPINames = !showAPINames"
                            :disabled="loading || saving">

src/components/ToolLauncher.vue

@@ -74,7 +74,14 @@ onMounted(() => {
 </template>
 
 <style>
-.slds-custom-align-button {
+.align-card-action-button {
     margin-top: -4px;
 }
+
+.popover-help {
+    position: absolute;
+    top: -45px;
+    left: -15px;
+    width: 45vw;
+}
 </style>

src/components/modals/quick-create-user-settings/QuickCreateUserSettingsModal.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, toRaw } from 'vue';
+
+import UserQuickCreateSettings from '@/models/UserQuickCreateSettings';
+
+// Setup promise to defer until the user has either selected a user or closed the dialog.
+let resultResolve: (value: UserQuickCreateSettings | PromiseLike<UserQuickCreateSettings | null> | null) => void;
+
+const visible = ref(false);
+const showUsernameDomainTooltip = ref(false);
+
+const form = ref(new UserQuickCreateSettings());
+
+async function show(currentSettings: UserQuickCreateSettings): Promise<UserQuickCreateSettings | null> {
+    visible.value = true;
+    document.addEventListener('keydown', onKeydown);
+
+    form.value = currentSettings;
+
+    return new Promise<UserQuickCreateSettings | null>((resolve) => {
+        resultResolve = resolve;
+    });
+}
+
+function onCancelClick() {
+    resultResolve(null);
+    close();
+}
+
+function onSaveClick() {
+    resultResolve(toRaw(form.value));
+    close();
+}
+
+function close() {
+    visible.value = false;
+    document.removeEventListener('keydown', onKeydown);
+}
+
+function onCloseClick() {
+    resultResolve(null);
+    close();
+}
+
+function onKeydown(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+        resultResolve(null);
+        close();
+    }
+}
+
+defineExpose<{
+    show(currentSettings: UserQuickCreateSettings): Promise<UserQuickCreateSettings | null>
+}>({
+    show
+});
+</script>
+
+<template>
+    <template v-if="visible">
+        <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small">
+            <div class="slds-modal__container">
+                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
+                    @click="onCloseClick">
+                    <svg class="slds-button__icon slds-button__icon_large">
+                        <use xlink:href="slds/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
+                    </svg>
+                </button>
+                <div class="slds-modal__header">
+                    <h1 class="slds-text-heading_medium">Settings</h1>
+                </div>
+                <div class="slds-modal__content slds-p-around_medium">
+                    <div class="slds-form" role="list">
+                        <div class="slds-form-element slds-form-element_stacked">
+                            <label class="slds-form-element__label" for="username-domain-input">Username Domain</label>
+                            <div class="slds-form-element__icon">
+                                <button class="slds-button slds-button_icon" @mouseenter="showUsernameDomainTooltip = true" @mouseleave="showUsernameDomainTooltip = false">
+                                    <svg class="slds-button__icon">
+                                        <use xlink:href="slds/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
+                                    </svg>
+                                </button>
+                                <div class="slds-popover slds-popover_tooltip slds-nubbin_bottom-left popover-help" role="tooltip" v-show="showUsernameDomainTooltip">
+                                    <div class="slds-popover__body">The default text to place after the @ symbol in the username.</div>
+                                </div>
+                            </div>
+                            <div class="slds-form-element__control">
+                                <input type="text" id="username-domain-input" class="slds-input" v-model="form.usernameDomain" />
+                            </div>
+                        </div>
+
+                        <fieldset class="slds-form-element slds-form-element_stacked">
+                            <div class="slds-form-element__control">
+                                <div class="slds-checkbox">
+                                    <input type="checkbox" id="split-email-username-checkbox" v-model="form.getFirstLastNameFromEmail" />
+                                    <label class="slds-checkbox__label" for="split-email-username-checkbox">
+                                        <span class="slds-checkbox_faux"></span>
+                                        <span class="slds-form-element__label">Get First/Last name from Email</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="slds-modal__footer slds-theme_default">
+                    <button class="slds-button slds-button_neutral" @click="onCancelClick">Cancel</button>
+                    <button class="slds-button slds-button_brand" @click="onSaveClick">Save</button>
+                </div>
+            </div>
+        </section>
+        <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
+    </template>
+</template>
+
+<style scoped>
+/* Important to be able to show tooltips */
+.slds-modal__content {
+    overflow: visible;
+}
+</style>

src/components/modals/user-select/UserSelectModal.vue

@@ -4,7 +4,7 @@ import { ref } from 'vue';
 import type User from '@/models/User';
 import SearchLookup from '../../slds/SearchLookup.vue';
 import SearchLookupItem from '@/components/slds/SearchLookupItem';
-import type Context from '@/models/context';
+import Context from '@/models/context';
 import SalesforceRESTService from '@/services/salesforce-rest-service';
 
 let restService: SalesforceRESTService;
@@ -117,6 +117,8 @@ defineExpose<{
 </template>
 
 <style scoped>
+
+/* Important to be able to show full dropdown */
 .slds-modal__content {
     overflow: visible;
 }

src/components/slds/FullscreenOverlay.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visible = ref(false);
+const message = ref('');
+
+function show(messageInput: string, duration: number): Promise<void> {
+    message.value = messageInput;
+
+    visible.value = true;
+
+    return new Promise<void>((resolve) => {
+        setTimeout(() => {
+            visible.value = false;
+            resolve();
+        }, duration);
+    });
+}
+
+defineExpose<{
+    show(message: string, duration: number): Promise<void>
+}>({
+    show
+});
+</script>
+
+<template>
+    <Transition>
+        <div class="overlay slds-align_absolute-center" v-if="visible">
+            <div class="overlay-content">
+                <span class="slds-icon_container slds-icon-utility-success slds-m-bottom_x-small">
+                    <svg class="slds-icon slds-icon-text-default">
+                        <use xlink:href="slds/assets/icons/utility-sprite/svg/symbols.svg#success"></use>
+                    </svg>
+                </span>
+                <div class="slds-text-heading_medium">{{ message }}</div>
+            </div>
+        </div>
+    </Transition>
+</template>
+
+<style scoped>
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgb(69, 198, 90);
+    z-index: 2;
+}
+
+.overlay-content {
+    text-align: center;
+    color: white;
+}
+
+.overlay .slds-icon {
+    fill: white;
+}
+
+.v-enter-active {
+  animation: scale-in 0.25s;
+}
+
+@keyframes scale-in {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+</style>

src/components/slds/LightningToast.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const visible = ref(false);
+const text = ref('');
+const type = ref('');
+const duration = ref(1000);
+
+const notifyClasses = computed(() => {
+    let classes = 'slds-notify slds-notify_toast';
+
+    switch (type.value) {
+        case 'warning':
+            classes += ' slds-theme_warning';
+            break;
+        case 'error':
+            classes += ' slds-theme_error';
+            break;
+        case 'success':
+            classes += ' slds-theme_success';
+            break;
+    }
+
+    return classes;
+});
+
+function show(inputText: string, inputType: string, inputDuration: number) {
+    text.value = inputText;
+    type.value = inputType;
+    duration.value = inputDuration;
+
+    visible.value = true;
+
+    // setTimeout(() => {
+    //     visible.value = false;
+    // }, inputDuration);
+}
+
+defineExpose<{
+    show(text: string, type: string, duration: number): void
+}>({
+    show
+});
+</script>
+
+<template>
+    <div class="slds-notify_container slds-is-relative" v-if="visible">
+        <div :class="notifyClasses" role="status">
+            <div class="slds-notify__content">
+                <div class="slds-text-align_center">{{ text }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.slds-notify_toast {
+    margin: 0;
+}
+</style>

src/models/UserCreateForm.ts

@@ -2,7 +2,10 @@ export default class UserCreateForm {
     firstName = '';
     lastName = '';
     alias = '';
+
     email = '';
+    emailValid = false;
+
     username = '';
     nickname = '';
     federationIdentifier = '';

src/models/UserQuickCreateSettings.ts

@@ -0,0 +1,4 @@
+export default class UserQuickCreateSettings {
+    usernameDomain = '';
+    getFirstLastNameFromEmail = true;
+}

src/services/salesforce-rest-service.ts

@@ -22,7 +22,7 @@ export default class SalesforceRESTService {
     // }
 
     protected authFetch(requestUrl: URL, requestInfo: any = { method: 'GET' }): Promise<Response> {
-        const actualRequestUrl = requestUrl.toString().replace('+', '%20');
+        const actualRequestUrl = requestUrl.toString().replace(/\+/g, '%20');
 
         if (!requestInfo.headers)
             requestInfo.headers = {};

src/services/salesforce-tooling-service.ts

@@ -1,4 +1,4 @@
-import type ServiceResult from './result';
+import ServiceResult from './result';
 
 export default class SalesforceToolingService {
     EXECUTE_ANONYMOUS_ENDPOINT = '/services/data/v58.0/tooling/executeAnonymous';
@@ -11,12 +11,11 @@ export default class SalesforceToolingService {
         this.sessionId = sessionId;
     }
 
-    protected authFetch(requestUrl: URL, requestInfo: any = { method: 'GET' }) {
-        const actualRequestUrl = requestUrl.toString().replace('+', '%20');
+    protected authFetch(requestUrl: URL, requestInfo: any = { method: 'GET' }): Promise<Response> {
+        const actualRequestUrl = requestUrl.toString().replace(/\+/g, '%20');
 
-        if (!requestInfo.headers) {
+        if (!requestInfo.headers)
             requestInfo.headers = {};
-        }
         requestInfo.headers['Authorization'] = 'Bearer ' + this.sessionId
 
         return fetch(actualRequestUrl, requestInfo);

src/services/salesforce-user-service.ts

@@ -14,17 +14,15 @@ export default class SalesforceUserService extends SalesforceRESTService {
     generateUsername(usernamePrefix?: string, domainPrefix?: string): string {
         let username = this.generateRandomString(5, false, true, true);
         if (usernamePrefix) {
-            username = `${usernamePrefix}-${username}`;
+            username = `${usernamePrefix}.${username}`;
         }
 
         let domain = this.generateRandomString(5, false, true, false);
         if (domainPrefix) {
-            domain = `${domainPrefix}-${domain}`;
+            domain = `${domainPrefix}.${domain}`;
         }
 
-        const tld = this.generateRandomString(3, false, true, false);
-
-        return `${username}@${domain}.${tld}`;
+        return `${username}@${domain}`;
     }
 
     generateNickname(): string {