From d65f7c8c13707f9fd7204e7b4cf755d1219df392 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 May 2024 00:29:15 +0200
Subject: [PATCH 1/2] Use config suggestions and TurboSnap (onlyChanged) when
 generating config file

---
 src/preset.ts                      | 9 ++++++++-
 src/utils/updateChromaticConfig.ts | 5 ++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/preset.ts b/src/preset.ts
index d884ae22..26d9273a 100644
--- a/src/preset.ts
+++ b/src/preset.ts
@@ -176,7 +176,14 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
       // No config file may be found (file is about to be created)
       const { configFile: foundConfigFile, ...config } = await getConfiguration(writtenConfigFile);
       const targetConfigFile = foundConfigFile || writtenConfigFile || "chromatic.config.json";
-      await updateChromaticConfig(targetConfigFile, { ...config, projectId, zip: true });
+      const { problems, suggestions } = await getConfigInfo(config, options);
+      await updateChromaticConfig(targetConfigFile, {
+        ...config,
+        ...problems,
+        ...suggestions,
+        onlyChanged: true,
+        projectId,
+      });
 
       projectInfoState.value = {
         ...projectInfoState.value,
diff --git a/src/utils/updateChromaticConfig.ts b/src/utils/updateChromaticConfig.ts
index 4de3e78b..593c0da4 100644
--- a/src/utils/updateChromaticConfig.ts
+++ b/src/utils/updateChromaticConfig.ts
@@ -2,5 +2,8 @@ import type { Configuration } from "chromatic/node";
 import { writeFile } from "jsonfile";
 
 export async function updateChromaticConfig(configFile: string, configuration: Configuration) {
-  await writeFile(configFile, configuration, { spaces: 2 });
+  const formatted = Object.entries(configuration)
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .reduce((acc, [key, val]) => (val === null ? acc : Object.assign(acc, { [key]: val })), {});
+  await writeFile(configFile, formatted, { spaces: 2 });
 }

From 7d1ae706dfef6cf7259c0e0471e2ac9a45a81a62 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 14 May 2024 10:26:38 +0200
Subject: [PATCH 2/2] Suggest setting onlyChanged: true, and only suggest
 config updates when they're not explicitly set already

---
 src/components/Screen.stories.tsx         | 6 ++----
 src/preset.ts                             | 7 +++++--
 src/screens/VisualTests/Configuration.tsx | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/Screen.stories.tsx b/src/components/Screen.stories.tsx
index 199bacb6..f7d99a33 100644
--- a/src/components/Screen.stories.tsx
+++ b/src/components/Screen.stories.tsx
@@ -29,7 +29,6 @@ export const Default: Story = {};
 const configuration = {
   configFile: "chromatic.config.json",
   projectId: "Project:6480e1b0042842f149cfd74c",
-  onlyChanged: true,
   externals: ["public/**"],
   autoAcceptChanges: "main",
   exitOnceUploaded: true,
@@ -40,7 +39,7 @@ export const Configuration: Story = {
     withSharedState(CONFIG_INFO, {
       configuration,
       problems: { storybookBaseDir: "src/frontend" },
-      suggestions: { zip: true },
+      suggestions: { onlyChanged: true, zip: true },
     } satisfies ConfigInfoPayload),
   ],
   parameters: {
@@ -55,7 +54,6 @@ export const ConfigurationProblems = {
     withSharedState(CONFIG_INFO, {
       configuration,
       problems: { storybookBaseDir: "src/frontend" },
-      suggestions: { zip: true },
     }),
   ],
 } satisfies StoryObj<typeof meta>;
@@ -65,7 +63,7 @@ export const ConfigurationSuggestions = {
     withSetup(() => localStorage.removeItem(CONFIG_INFO_DISMISSED)),
     withSharedState(CONFIG_INFO, {
       configuration,
-      suggestions: { zip: true },
+      suggestions: { onlyChanged: true, zip: true },
     }),
   ],
 } satisfies StoryObj<typeof meta>;
diff --git a/src/preset.ts b/src/preset.ts
index 26d9273a..8ec4fd01 100644
--- a/src/preset.ts
+++ b/src/preset.ts
@@ -93,7 +93,11 @@ const getConfigInfo = async (
     problems.storybookConfigDir = configDir;
   }
 
-  if (!configuration.zip) {
+  if (configuration.onlyChanged === undefined) {
+    suggestions.onlyChanged = true;
+  }
+
+  if (configuration.zip === undefined) {
     suggestions.zip = true;
   }
 
@@ -181,7 +185,6 @@ async function serverChannel(channel: Channel, options: Options & { configFile?:
         ...config,
         ...problems,
         ...suggestions,
-        onlyChanged: true,
         projectId,
       });
 
diff --git a/src/screens/VisualTests/Configuration.tsx b/src/screens/VisualTests/Configuration.tsx
index 6f9d8dbd..c077e581 100644
--- a/src/screens/VisualTests/Configuration.tsx
+++ b/src/screens/VisualTests/Configuration.tsx
@@ -302,7 +302,7 @@ export const Configuration = ({ onClose }: ConfigurationProps) => {
         <CloseIcon aria-label="Close" />
       </StyledCloseButton>
       <PageWrapper>
-        <Heading>Configuration </Heading>
+        <Heading>Configuration</Heading>
         {configFile ? (
           <PageDescription>
             This is a read-only representation of the Chromatic configuration options found in{" "}