Implement workspace settings url

NoelDeMartin · Aug 15, 2024 · 0bac9a2 · 0bac9a2
1 parent a4c12f9
commit 0bac9a2
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 18 deletions.
diff --git a/cypress/e2e/cloud.cy.ts b/cypress/e2e/cloud.cy.ts
@@ -92,6 +92,8 @@ describe('Cloud', () => {
         cy.intercept('PATCH', podUrl('/tasks/work/.meta')).as('createWorkContainerMeta');
         cy.intercept('PUT', podUrl('/tasks/work/learning/')).as('createLearningContainer');
         cy.intercept('PATCH', podUrl('/tasks/work/learning/.meta')).as('createLearningContainerMeta');
+        cy.intercept('PUT', podUrl('/study/')).as('createStudyContainer');
+        cy.intercept('PATCH', podUrl('/study/.meta')).as('createStudyContainerMeta');
 
         // Act
         cy.ariaLabel('Show lists').click();
@@ -103,11 +105,22 @@ describe('Cloud', () => {
         cy.ariaInput('Name').type('Learning{enter}');
         cy.waitSync();
 
+        cy.switchWorkspace('New workspace');
+        cy.get('[role="dialog"]').within(() => {
+            cy.press('Advanced options', 'summary');
+            cy.press('Create container url automatically');
+            cy.ariaInput('Name').type('Study');
+            cy.ariaInput('Url').clear().type(podUrl('/study/'));
+            cy.press('Create', 'button');
+        });
+
         // Assert
         cy.get('@createWorkContainer.all').should('have.length', 1);
         cy.get('@createWorkContainerMeta.all').should('have.length', 1);
         cy.get('@createLearningContainer.all').should('have.length', 1);
         cy.get('@createLearningContainerMeta.all').should('have.length', 1);
+        cy.get('@createStudyContainer.all').should('have.length', 1);
+        cy.get('@createStudyContainerMeta.all').should('have.length', 1);
     });
 
     it('Migrates simple local data', () => {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,11 +22,11 @@
         "test:serve-pod": "community-solid-server -l warn"
     },
     "dependencies": {
-        "@aerogel/core": "0.0.0-next.13b88f634a31caf3669d61e53e7d3fa95e20488c",
+        "@aerogel/core": "0.0.0-next.b243de4e2590f02709edeebd8c13b74087592c04",
         "@aerogel/plugin-i18n": "0.0.0-next.13b88f634a31caf3669d61e53e7d3fa95e20488c",
         "@aerogel/plugin-offline-first": "0.0.0-next.d91fa1b09d159896747a54add57983993ddb97c4",
         "@aerogel/plugin-routing": "0.0.0-next.24ab8be1a6189bf1f7eb73dd37b8d21e26a33d72",
-        "@aerogel/plugin-solid": "0.0.1-next.13b88f634a31caf3669d61e53e7d3fa95e20488c",
+        "@aerogel/plugin-solid": "0.0.1-next.b243de4e2590f02709edeebd8c13b74087592c04",
         "@aerogel/plugin-soukai": "0.0.0-next.d91fa1b09d159896747a54add57983993ddb97c4",
         "@headlessui/vue": "^1.7.22",
         "@intlify/unplugin-vue-i18n": "^0.12.2",

diff --git a/src/components/modals/FloatingModal.vue b/src/components/modals/FloatingModal.vue
@@ -19,11 +19,10 @@
                         :text="subtitle"
                         class="mt-1 text-sm leading-6 text-gray-500"
                     />
-                    <div
-                        :class="{ 'mt-3': title }"
-                        class="max-h-[90vh] overflow-y-auto overflow-x-hidden [&>*]:overflow-hidden"
-                    >
-                        <slot :close="close" />
+                    <div class="-mx-4 -mb-4 max-h-[90vh] overflow-y-auto overflow-x-hidden [&>*]:overflow-hidden">
+                        <div class="px-4 pb-4" :class="{ 'pt-3': title }">
+                            <slot :close="close" />
+                        </div>
                     </div>
                 </AGHeadlessModalPanel>
             </div>

diff --git a/src/lang/en.yaml b/src/lang/en.yaml
@@ -118,10 +118,15 @@ workspaces:
     add: New workspace
     name: Name
     color: Color
+    url: Url
     description: Workspaces can help you manage different parts of your life. Avoid thinking about groceries when you're working on that side project!
     openSidebar: Show lists
     hideSidebar: Hide lists
     notFound: We couldn't find the `{workspace}` workspace, were you looking for something else?
+    advanced:
+        title: Advanced options
+        mintUrl: Create container url automatically.
+        info: This workspace is using the container at `{url}`. If you want to migrate it, you'll have to do it with another app (and make sure to update the [Type Index](https://solid.github.io/type-indexes/) as well!).
 
 lists:
     inbox: Inbox
@@ -213,6 +218,7 @@ ui:
 
 errors:
     required: This field is required
+    containerEndingSlashMissing: Container urls must end with /
     logs: Error logs
     notice: Something went wrong, but it\'s not your fault. Try again!
     viewLogs: View error logs

diff --git a/src/pages/workspace/modals/WorkspaceSettingsModal.vue b/src/pages/workspace/modals/WorkspaceSettingsModal.vue
@@ -24,7 +24,45 @@
                     </SelectInputOptions>
                 </SelectInput>
             </div>
-            <div class="mt-8 flex w-full justify-end gap-3">
+            <TextInput
+                v-if="!mintUrl"
+                name="url"
+                class="mt-4"
+                :label="$t('workspaces.url')"
+            />
+            <details v-if="$cloud.ready" class="group mt-4">
+                <summary
+                    class="-ml-2 flex w-[max-content] cursor-pointer list-none items-center rounded-lg py-2 pl-1 pr-3 hover:bg-gray-100 focus-visible:outline focus-visible:outline-gray-700"
+                >
+                    <i-zondicons-cheveron-right class="h-6 w-6 transition-transform group-open:rotate-90" />
+                    <span>{{ $t('workspaces.advanced.title') }}</span>
+                </summary>
+
+                <ul v-if="newRemoteWorkspace" class="mb-4 ml-4 mt-2 flex flex-col gap-2">
+                    <li>
+                        <label class="flex items-center">
+                            <input
+                                v-model="mintUrl"
+                                type="checkbox"
+                                class="cursor-pointer rounded border-2 border-[--primary] text-[--primary-500] hover:bg-[--primary-100] checked:hover:text-[--primary-400] focus:ring-[--primary-500] focus-visible:ring-[--primary-500]"
+                            >
+                            <span class="ml-1.5">{{ $t('workspaces.advanced.mintUrl') }}</span>
+                        </label>
+                        <pre
+                            v-if="mintUrl"
+                            class="ml-6 mt-1 whitespace-normal text-xs text-gray-600"
+                        ><code>{{ form.url }}</code></pre>
+                    </li>
+                </ul>
+
+                <AGMarkdown
+                    v-else
+                    class="ml-4 text-sm text-gray-600"
+                    lang-key="workspaces.advanced.info"
+                    :lang-params="{ url: form.url }"
+                />
+            </details>
+            <div class="flex w-full justify-end gap-3" :class="{ 'mt-2': $cloud.ready, 'mt-8': !$cloud.ready }">
                 <TextButton color="secondary" @click="close()">
                     {{ $t('ui.cancel') }}
                 </TextButton>
@@ -39,8 +77,8 @@
 
 <script setup lang="ts">
 import { Cloud } from '@aerogel/plugin-offline-first';
-import { computed, watchEffect } from 'vue';
-import { UI, componentRef, objectProp, requiredStringInput, useForm } from '@aerogel/core';
+import { computed, ref, watchEffect } from 'vue';
+import { UI, componentRef, objectProp, requiredStringInput, stringInput, useForm } from '@aerogel/core';
 
 import SelectInputButton from '@/components/forms/SelectInputButton.vue';
 import Workspace from '@/models/Workspace';
@@ -52,9 +90,18 @@ import type { ThemeColor } from '@/utils/colors';
 const $modal = componentRef<IFloatingModal>();
 const props = defineProps({ workspace: objectProp<Workspace>() });
 const form = useForm({
+    url: stringInput(props.workspace?.url, { rules: 'container_url' }),
     name: requiredStringInput(props.workspace?.name),
     color: requiredStringInput(props.workspace?.themeColor ?? 'sky'),
 });
+const mintUrl = ref(true);
+const newRemoteWorkspace = computed(() => {
+    if (props.workspace || !Cloud.ready) {
+        return;
+    }
+
+    return new Workspace();
+});
 const colors = computed(() =>
     Object.entries(THEME_COLORS).map(([name, value]) => ({
         name,
@@ -63,6 +110,7 @@ const colors = computed(() =>
 
 async function submit(): Promise<void> {
     const updates = {
+        url: form.url,
         name: form.name.trim(),
         color: form.color,
     };
@@ -85,5 +133,12 @@ watchEffect(() => {
     Object.entries(THEME_COLORS[form.color as ThemeColor]).forEach(([name, value]) => {
         $modal.value?.$panel?.$el?.style.setProperty(`--primary-${name}`, value);
     });
+
+    if (newRemoteWorkspace.value && mintUrl.value) {
+        newRemoteWorkspace.value.name = form.name;
+        newRemoteWorkspace.value.mintUrl();
+
+        form.url = newRemoteWorkspace.value.url;
+    }
 });
 </script>