[9.x] Revision changes (#744)

Author: duncanmcclean

composer.json

@@ -46,7 +46,7 @@
         "pixelfear/composer-dist-plugin": "^0.1.5",
         "spatie/ignition": "^1.15",
         "spatie/invade": "^2.1",
-        "statamic/cms": "^6.0.0-alpha.15",
+        "statamic/cms": "^6.0.0-alpha.16",
         "stillat/proteus": "^4.0"
     },
     "require-dev": {

resources/js/components/PublishActions.vue

@@ -6,65 +6,60 @@
     -->
 
     <stack narrow name="publish-options" @closed="$emit('closed')" v-slot="{ close }">
-        <div class="dark:bg-dark-800 flex h-full flex-col bg-white">
-            <div
-                class="dark:border-dark-900 dark:bg-dark-600 flex items-center justify-between border-b border-gray-300 bg-gray-200 px-6 py-2 text-lg font-medium"
+        <div class="m-2 flex h-full flex-col rounded-xl bg-white dark:bg-gray-800">
+            <header
+                class="flex items-center justify-between rounded-t-xl border-b border-gray-300 px-4 mb-3 py-2 dark:border-gray-950 dark:bg-gray-800"
             >
-                {{ __('Publish') }}
-                <button type="button" class="btn-close" @click="close" v-html="'&times'" />
-            </div>
+                <Heading size="lg">{{ __('Publish') }}</Heading>
+                <Button icon="x" variant="ghost" class="-me-2" @click="close" />
+            </header>
 
-            <div class="flex-1 overflow-auto p-6">
+            <div class="flex-1 overflow-auto">
                 <div class="loading flex h-full items-center justify-center" v-if="saving">
-                    <loading-graphic text="" />
+                    <Icon name="loading" />
                 </div>
 
-                <template v-else>
-                    <select-input class="mb-6" v-model="action" :options="options" />
+                <div class="p-3 flex flex-col space-y-6" v-else>
+                    <Select class="w-full" :options v-model="action" />
 
-                    <div v-if="action">
-                        <date-fieldtype
-                            v-if="action == 'schedule'"
-                            class="mb-6"
-                            name="publishTime"
-                            :value="publishTime"
-                        />
+                    <template v-if="action">
+                        <!--                        <DatePicker-->
+                        <!--                            v-if="action == 'schedule'"-->
+                        <!--                            v-model="publishTime"-->
+                        <!--                        />-->
 
-                        <textarea-input
-                            class="mb-6 text-sm"
+                        <Textarea
+                            class="text-sm"
                             v-model="revisionMessage"
                             :placeholder="__('Notes about this revision')"
                             @keydown.enter="submit"
                             :focus="true"
                         />
 
-                        <button class="btn-primary mb-6 w-full" v-text="submitButtonText" @click="submit" />
+                        <Button variant="primary" :text="submitButtonText" @click="submit" />
 
-                        <div class="text-gray mb-6 flex text-xs">
-                            <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
-                                <svg-icon name="info-circle" class="pt-px" />
-                            </div>
-                            <div class="flex-1" v-text="actionInfoText" />
+                        <div class="flex">
+                            <Icon name="info" class="size-4 shrink-0 me-2" />
+                            <Subheading size="sm" class="flex-1" :text="actionInfoText" />
                         </div>
 
-                        <div class="text-gray mb-6 flex text-xs text-red-500" v-if="action === 'schedule'">
-                            <div class="w-4 pt-px ltr:mr-2 rtl:ml-2">
-                                <svg-icon name="info-circle" class="pt-px" />
-                            </div>
-                            <div
-                                class="flex-1"
-                                v-text="__('messages.publish_actions_current_becomes_draft_because_scheduled')"
-                            />
+                        <div class="flex text-red-600" v-if="action === 'schedule'">
+                            <Icon name="info" class="size-4 shrink-0 me-2" />
+                            <Subheading size="sm" class="flex-1 text-red-600" :text="__('messages.publish_actions_current_becomes_draft_because_scheduled')" />
                         </div>
-                    </div>
-                </template>
+                    </template>
+                </div>
             </div>
         </div>
     </stack>
 </template>
 
 <script>
+import { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading } from '@statamic/cms/ui';
+
 export default {
+    components: { Heading, Button, Select, DatePicker, Textarea, Icon, Subheading },
+
     props: {
         actions: Object,
         published: Boolean,
@@ -94,6 +89,8 @@ export default {
                 }
             }
 
+            // options.push({ value: 'schedule', label: __('Schedule') });
+
             options.push({ value: 'revision', label: __('Create Revision') });
 
             return options;
@@ -134,7 +131,6 @@ export default {
                 .run('runway.publishing', {
                     resource: this.resourceHandle,
                     message: this.revisionMessage,
-                    storeName: this.publishContainer,
                 })
                 .then(this.performPublishRequest)
                 .catch((error) => {

resources/js/components/PublishForm.vue

@@ -506,7 +506,7 @@ export default {
                     if (this.revisionsEnabled) {
                         clearTimeout(this.trackDirtyStateTimeout);
                         this.trackDirtyState = false;
-                        this.values = resetValuesFromResponse(response.data.data.values);
+                        this.values = resetValuesFromResponse(response.data.data.values, this.$refs.container);
                         this.trackDirtyStateTimeout = setTimeout(() => (this.trackDirtyState = true), 500);
                         this.$nextTick(() => this.$emit('saved', response));
                         return;

resources/js/components/revision-history/Revision.vue

@@ -5,95 +5,96 @@
     -->
 
     <div
-        class="block cursor-pointer space-y-2 px-3 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-900"
+        class="relative block cursor-pointer space-y-2 px-3 py-2 text-sm hover:[&_.revision-message]:underline"
         :class="{
-            'status-working-copy': revision.working,
+            'status-working-copy': revision.action === 'working',
             'status-published': revision.attributes.published,
+            'border border-ui-accent-bg dark:border-dark-ui-accent-bg/90 rounded-lg py-2.5 bg-[hsl(from_var(--theme-color-ui-accent-bg)_h_s_97)] dark:bg-[hsl(from_var(--theme-color-dark-ui-accent-bg)_h_40_20)]': revision.attributes.current,
+            'bg-gradient-to-b from-transparent from-60% to-white dark:to-gray-800 -mt-1': isLast,
         }"
+        v-tooltip="revision.attributes.current ? __('Current Revision') : null"
         @click="open"
     >
-        <div v-if="revision.message" class="revision-item-note truncate" v-text="revision.message" />
+        <div class="flex gap-3">
+            <Avatar v-if="revision.user" :user="revision.user" class="size-6 shrink-0 mt-1" />
 
-        <div class="flex items-center gap-2">
-            <avatar v-if="revision.user" :user="revision.user" class="size-6 shrink-0" />
+            <div class="grid gap-1">
+                <div v-if="revision.message" class="revision-message font-medium" v-text="revision.message" />
+                <Subheading class="text-xs text-gray-500! dark:text-gray-400!" :class="{ 'text-gray-800! dark:text-white!': revision.attributes.current }">
+                    {{ time }}
+                    <template v-if="revision.user">
+                        by {{ revision.user.name || revision.user.email }}
+                    </template>
+                </Subheading>
+            </div>
 
-            <div class="revision-item-content flex w-full">
-                <div class="flex-1">
-                    <Subheading>
-                        <template v-if="revision.user">
-                            {{ revision.user.name || revision.user.email }} &ndash;
-                        </template>
-                        {{ time }}
-                    </Subheading>
-                </div>
+            <div class="flex items-center gap-1 ml-auto">
+                <Badge
+                    size="sm"
+                    :color="
+                        revision.action === 'working'
+                            ? 'gray'
+                            : {
+                                  publish: 'green',
+                                  revision: 'gray',
+                                  restore: 'gray',
+                                  unpublish: 'red',
+                              }[revision.action]
+                    "
+                    :text="
+                        revision.action === 'working'
+                            ? __('Working Copy')
+                            : {
+                                  publish: __('Published'),
+                                  revision: __('Revision'),
+                                  restore: __('Restored'),
+                                  unpublish: __('Unpublished'),
+                              }[revision.action]
+                    "
+                />
+            </div>
 
-                <div class="flex items-center gap-1">
-                    <Badge
-                        size="sm"
-                        :color="
-                            revision.working
-                                ? 'gray'
-                                : {
-                                      publish: 'green',
-                                      revision: 'gray',
-                                      restore: 'gray',
-                                      unpublish: 'red',
-                                  }[revision.action]
-                        "
-                        :text="
-                            revision.working
-                                ? __('Working Copy')
-                                : {
-                                      publish: __('Published'),
-                                      revision: __('Revision'),
-                                      restore: __('Restored'),
-                                      unpublish: __('Unpublished'),
-                                  }[revision.action]
-                        "
+            <revision-preview
+                v-if="showDetails"
+                :revision="revision"
+                component="runway-publish-form"
+                :component-props="componentProps"
+                @closed="showDetails = false"
+            >
+                <template #action-buttons-right>
+                    <restore-revision
+                        v-if="canRestoreRevisions"
+                        :revision="revision"
+                        :url="restoreUrl"
+                        :reference="reference"
+                        class="ltr:ml-4 rtl:mr-4"
                     />
-                    <Badge size="sm" color="orange" v-if="revision.attributes.current" v-text="__('Current')" />
-                </div>
-
-                <revision-preview
-                    v-if="showDetails"
-                    :revision="revision"
-                    component="runway-publish-form"
-                    :component-props="componentProps"
-                    @closed="showDetails = false"
-                >
-                    <template slot="action-buttons-right">
-                        <restore-revision
-                            v-if="canRestoreRevisions"
-                            :revision="revision"
-                            :url="restoreUrl"
-                            :reference="reference"
-                            class="ltr:ml-4 rtl:mr-4"
-                        />
-                    </template>
-                </revision-preview>
-            </div>
+                </template>
+            </revision-preview>
         </div>
     </div>
 </template>
 
 <script>
 import { DateFormatter } from '@statamic/cms';
 import { RestoreRevision, RevisionPreview } from '@statamic/cms/temporary';
-import { Subheading, Badge } from '@statamic/cms/ui';
+import { Subheading, Badge, Avatar } from '@statamic/cms/ui';
 
 export default {
     components: {
         RevisionPreview,
         RestoreRevision,
         Subheading,
         Badge,
+        Avatar,
     },
 
     props: {
         revision: Object,
         restoreUrl: String,
         reference: String,
         canRestoreRevisions: Boolean,
+        isLast: Boolean,
     },
 
     data() {
@@ -111,7 +112,6 @@ export default {
                 initialPublished: 'published',
                 initialPermalink: 'permalink',
                 initialIsWorkingCopy: 'hasWorkingCopy',
-                initialIsRoot: 'isRoot',
                 initialReadOnly: 'readOnly',
                 canManagePublishState: 'canManagePublishState',
                 resourceHasRoutes: 'resourceHasRoutes',
@@ -128,7 +128,7 @@ export default {
 
     methods: {
         open() {
-            if (this.revision.working) {
+            if (this.revision.action === 'working') {
                 this.$emit('working-copy-selected');
                 return;
             }

src/Http/Controllers/CP/RestoreModelRevisionController.php

@@ -5,7 +5,6 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Http\Request;
 use Statamic\Http\Controllers\CP\CpController;
-use Statamic\Revisions\WorkingCopy;
 use StatamicRadPack\Runway\Resource;
 
 class RestoreModelRevisionController extends CpController
@@ -18,7 +17,7 @@ public function __invoke(Request $request, Resource $resource, Model $model)
         }
 
         if ($model->published()) {
-            WorkingCopy::fromRevision($target)->date(now())->save();
+            $target->toWorkingCopy()->date(now())->save();
         } else {
             $model->makeFromRevision($target)->published(false)->save();
         }

src/Traits/HasRunwayResource.php

@@ -196,7 +196,7 @@ public function runwayRevisionUrl(Revision $revision): string
         return cp_route('runway.revisions.show', [
             'resource' => $this->runwayResource()->handle(),
             'model' => $this->{$this->runwayResource()->routeKey()},
-            'revisionId' => $revision->id(),
+            'revisionId' => $revision->date()->timestamp,
         ]);
     }
 

tests/Http/Controllers/CP/ModelRevisionsControllerTest.php

@@ -11,20 +11,16 @@
 
 class ModelRevisionsControllerTest extends TestCase
 {
-    private $dir;
-
     protected function setUp(): void
     {
         parent::setUp();
 
-        $this->dir = __DIR__.'/tmp';
         config(['statamic.revisions.enabled' => true]);
-        config(['statamic.revisions.path' => $this->dir]);
     }
 
     protected function tearDown(): void
     {
-        Folder::delete($this->dir);
+        Folder::delete(__DIR__.'/../../../__fixtures__/revisions');
 
         parent::tearDown();
     }
@@ -61,8 +57,8 @@ public function it_gets_revisions()
             ->assertJsonPath('0.revisions.0.attributes.data.title', 'Original title')
             ->assertJsonPath('0.revisions.0.attributes.item_url', "http://localhost/cp/runway/post/{$model->id}/revisions/".Carbon::parse('2023-12-12 15:00:00')->timestamp)
 
-            ->assertJsonPath('1.revisions.0.action', 'revision')
-            ->assertJsonPath('1.revisions.0.message', false)
+            ->assertJsonPath('1.revisions.0.action', 'working')
+            ->assertJsonPath('1.revisions.0.message', null)
             ->assertJsonPath('1.revisions.0.attributes.data.title', 'Title modified in working copy')
             ->assertJsonPath('1.revisions.0.attributes.item_url', "http://localhost/cp/runway/post/{$model->id}/revisions/".Carbon::parse('2024-01-01 10:30:00')->timestamp)
 

tests/Http/Controllers/CP/RestoreModelRevisionController.php

@@ -10,20 +10,16 @@
 
 class RestoreModelRevisionController extends TestCase
 {
-    private $dir;
-
     protected function setUp(): void
     {
         parent::setUp();
 
-        $this->dir = __DIR__.'/tmp';
         config(['statamic.revisions.enabled' => true]);
-        config(['statamic.revisions.path' => $this->dir]);
     }
 
     protected function tearDown(): void
     {
-        Folder::delete($this->dir);
+        Folder::delete(__DIR__.'/../../../__fixtures__/revisions');
 
         parent::tearDown();
     }
@@ -47,7 +43,7 @@ public function it_restores_revision()
 
         $this
             ->actingAs(User::make()->id('user-1')->makeSuper()->save())
-            ->post($model->runwayRestoreRevisionUrl(), ['revision' => $revision->id()])
+            ->post($model->runwayRestoreRevisionUrl(), ['revision' => $revision->date()->timestamp])
             ->assertOk()
             ->assertSessionHas('success');