flipt-io · markphelps · Jul 18, 2023 · Jul 17, 2023 · Jul 18, 2023
diff --git a/ui/index.dev.html b/ui/index.dev.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full w-auto bg-white">
+<html lang="en" class="bg-white h-full w-auto">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.svg" />
@@ -28,23 +28,23 @@
               class="h-8 w-auto"
             />
           </div>
-          <div class="px-6 pt-24 bg-white sm:pt-20 lg:px-8">
+          <div class="bg-white px-6 pt-24 sm:pt-20 lg:px-8">
             <div class="mx-auto max-w-2xl text-center">
               <h2
-                class="text-2xl font-bold tracking-tight text-gray-900 sm:text-5xl"
+                class="text-gray-900 text-2xl font-bold tracking-tight sm:text-5xl"
               >
                 Not Found
               </h2>
-              <p class="mt-4 text-lg leading-8 text-gray-500">
+              <p class="text-gray-500 mt-4 text-lg leading-8">
                 This isn't the UI you're looking for...
               </p>
-              <p class="mt-20 text-lg leading-8 text-gray-700">
+              <p class="text-gray-700 mt-20 text-lg leading-8">
                 Run the following in another terminal:
               </p>
             </div>
           </div>
           <div
-            class="mx-auto my-8 max-w-md overflow-hidden rounded-lg text-white bg-gray-700"
+            class="text-white bg-gray-700 mx-auto my-8 max-w-md overflow-hidden rounded-lg"
           >
             <div class="px-4 py-5 sm:p-6">
               <pre><span class="text-violet-300">$</span>&nbsp;cd ui && npm run dev</pre>
@@ -53,7 +53,7 @@
           <div class="mt-16 flex items-center justify-center gap-x-6">
             <a
               href="https://www.flipt.io/discord"
-              class="text-sm font-semibold text-gray-600 hover:underline hover:decoration-violet-400 hover:underline-offset-4"
+              class="text-gray-600 text-sm font-semibold hover:underline hover:decoration-violet-400 hover:underline-offset-4"
             >
               Need Help? Join our Discord <span aria-hidden="true">&rarr;</span>
             </a>

diff --git a/ui/index.html b/ui/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full w-auto bg-white">
+<html lang="en" class="bg-white h-full w-auto">
   <body class="h-full antialiased">
     <div id="root"></div>
 

diff --git a/ui/screenshot.js b/ui/screenshot.js
@@ -5,28 +5,31 @@ const fs = require('fs');
 const fliptAddr = process.env.FLIPT_ADDRESS ?? 'http://localhost:8080';
 
 const screenshot = async (page, name) => {
-  await page.screenshot({ path: 'screenshots/'+name });
+  await page.screenshot({ path: 'screenshots/' + name });
 };
 
 const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
 
-const capture = async function(name, fn) {
+const capture = async function (name, fn) {
   try {
     const path = `${__dirname}/screenshot/fixtures/${name}.yml`;
     if (fs.existsSync(path)) {
-      exec(`flipt import --address=${fliptAddr} ${path}`, (error, stdout, stderr) => {
-        if (error) {
-          console.error(`error: ${error.message}`);
-          return;
+      exec(
+        `flipt import --address=${fliptAddr} ${path}`,
+        (error, stdout, stderr) => {
+          if (error) {
+            console.error(`error: ${error.message}`);
+            return;
+          }
+
+          if (stderr) {
+            console.error(`stderr: ${stderr}`);
+            return;
+          }
+
+          console.log(`stdout:\n${stdout}`);
         }
-
-        if (stderr) {
-          console.error(`stderr: ${stderr}`);
-          return;
-        }
-
-        console.log(`stdout:\n${stdout}`);
-      })
+      );
     }
   } catch (err) {
     // ignore and we will just skip seeding
@@ -35,7 +38,7 @@ const capture = async function(name, fn) {
 
   const browser = await chromium.launch({ headless: true });
   const context = await browser.newContext({
-    viewport: { width: 1440, height: 900 },
+    viewport: { width: 1440, height: 900 }
   });
   const page = await context.newPage();
 

diff --git a/ui/screenshot/create-contraint.js b/ui/screenshot/create-contraint.js
@@ -1,16 +1,16 @@
 const { capture } = require('../screenshot.js');
 
-(async() => {
-    await capture('create_constraint', async (page) => {
-      await page.getByRole('link', { name: 'Segments' }).click();
-      await page.getByRole('link', { name: 'all-users' }).click();
-      await page.getByRole('button', { name: 'New Constraint' }).click();
-      await page.getByLabel('Property').fill('admin');
-      await page
-        .getByRole('combobox', { name: 'Type' })
-        .selectOption('BOOLEAN_COMPARISON_TYPE');
-      await page
-        .getByRole('combobox', { name: 'Operator' })
-        .selectOption('notpresent');
-    });
+(async () => {
+  await capture('create_constraint', async (page) => {
+    await page.getByRole('link', { name: 'Segments' }).click();
+    await page.getByRole('link', { name: 'all-users' }).click();
+    await page.getByRole('button', { name: 'New Constraint' }).click();
+    await page.getByLabel('Property').fill('admin');
+    await page
+      .getByRole('combobox', { name: 'Type' })
+      .selectOption('BOOLEAN_COMPARISON_TYPE');
+    await page
+      .getByRole('combobox', { name: 'Operator' })
+      .selectOption('notpresent');
+  });
 })();
diff --git a/ui/screenshot/create-flag.js b/ui/screenshot/create-flag.js
@@ -1,10 +1,12 @@
 const { capture } = require('../screenshot.js');
 
-(async() => {
-    await capture('create_flag', async (page) => {
-      await page.getByRole('button', { name: 'New Flag' }).click();
-      await page.getByLabel('Name').fill('New Login');
-      await page.getByLabel('Key').fill('new-login');
-      await page.getByLabel('Description').fill('Enables the new login page for users');
-    });
+(async () => {
+  await capture('create_flag', async (page) => {
+    await page.getByRole('button', { name: 'New Flag' }).click();
+    await page.getByLabel('Name').fill('New Login');
+    await page.getByLabel('Key').fill('new-login');
+    await page
+      .getByLabel('Description')
+      .fill('Enables the new login page for users');
+  });
 })();
diff --git a/ui/screenshot/create-rule.js b/ui/screenshot/create-rule.js
@@ -1,12 +1,12 @@
 const { capture } = require('../screenshot.js');
 
-(async() => {
-    await capture('create_rule', async (page) => {
-      await page.getByRole('link', { name: 'new-login' }).click();
-      await page.getByRole('link', { name: 'Evaluation' }).click();
-      await page.getByRole('button', { name: 'New Rule' }).click();
-      await page.locator('#segmentKey-select-button').click();
-      await page.getByText('all-users').click();
-      await page.getByLabel('Multi-Variant').check();
-    });
+(async () => {
+  await capture('create_rule', async (page) => {
+    await page.getByRole('link', { name: 'new-login' }).click();
+    await page.getByRole('link', { name: 'Evaluation' }).click();
+    await page.getByRole('button', { name: 'New Rule' }).click();
+    await page.locator('#segmentKey-select-button').click();
+    await page.getByText('all-users').click();
+    await page.getByLabel('Multi-Variant').check();
+  });
 })();
diff --git a/ui/screenshot/create-segment.js b/ui/screenshot/create-segment.js
@@ -1,10 +1,10 @@
 const { capture } = require('../screenshot.js');
 
-(async() => {
-    await capture('create_segment', async (page) => {
-      await page.getByRole('link', { name: 'Segments' }).click();
-      await page.getByRole('button', { name: 'New Segment' }).click();
-      await page.getByLabel('Name').fill('All Users');
-      await page.getByLabel('Key').fill('all-users');
-    });
+(async () => {
+  await capture('create_segment', async (page) => {
+    await page.getByRole('link', { name: 'Segments' }).click();
+    await page.getByRole('button', { name: 'New Segment' }).click();
+    await page.getByLabel('Name').fill('All Users');
+    await page.getByLabel('Key').fill('all-users');
+  });
 })();
diff --git a/ui/screenshot/create-variant.js b/ui/screenshot/create-variant.js
@@ -1,16 +1,16 @@
 const { capture } = require('../screenshot.js');
 
-(async() => {
-    await capture('create_variant', async (page) => {
-      await page.getByRole('link', { name: 'new-login' }).click();
-      await page.getByRole('button', { name: 'New Variant' }).click();
-      await page
-            .getByRole('dialog', { name: 'New Variant' })
-            .locator('#key')
-            .fill('big-blue-login-button');
-      await page
-            .getByRole('dialog', { name: 'New Variant' })
-            .locator('#name')
-            .fill('Big Blue Login Button');
-    });
+(async () => {
+  await capture('create_variant', async (page) => {
+    await page.getByRole('link', { name: 'new-login' }).click();
+    await page.getByRole('button', { name: 'New Variant' }).click();
+    await page
+      .getByRole('dialog', { name: 'New Variant' })
+      .locator('#key')
+      .fill('big-blue-login-button');
+    await page
+      .getByRole('dialog', { name: 'New Variant' })
+      .locator('#name')
+      .fill('Big Blue Login Button');
+  });
 })();
diff --git a/ui/src/app/ErrorLayout.tsx b/ui/src/app/ErrorLayout.tsx
@@ -21,11 +21,11 @@ export default function ErrorLayout() {
         </div>
         <div className="mx-auto max-w-xl py-16 sm:py-24">
           <div className="text-center">
-            <h1 className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            <h1 className="text-gray-900 mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
               Error
             </h1>
             {error && error.message && (
-              <p className="mt-2 text-lg text-gray-500">{error.message}</p>
+              <p className="text-gray-500 mt-2 text-lg">{error.message}</p>
             )}
           </div>
 
@@ -36,7 +36,7 @@ export default function ErrorLayout() {
                 e.preventDefault();
                 navigate(-1);
               }}
-              className="text-base font-medium text-violet-600 hover:text-violet-500"
+              className="text-violet-600 text-base font-medium hover:text-violet-500"
             >
               <span aria-hidden="true">&larr; </span>
               Go Back

diff --git a/ui/src/app/Layout.tsx b/ui/src/app/Layout.tsx
@@ -30,7 +30,7 @@ function InnerLayout() {
   return (
     <>
       <Sidebar setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
-      <div className="flex min-h-screen flex-col bg-white md:pl-64">
+      <div className="bg-white flex min-h-screen flex-col md:pl-64">
         <Header setSidebarOpen={setSidebarOpen} />
 
         <main className="flex px-6 py-10">

diff --git a/ui/src/app/NotFoundLayout.tsx b/ui/src/app/NotFoundLayout.tsx
@@ -38,7 +38,7 @@ const links = [
 
 export default function NotFoundLayout() {
   return (
-    <div className="flex min-h-screen flex-col bg-white">
+    <div className="bg-white flex min-h-screen flex-col">
       <main className="mx-auto w-full max-w-7xl px-6 lg:px-8">
         <div className="flex-shrink-0 pt-16">
           <Link to="/">
@@ -53,37 +53,37 @@ export default function NotFoundLayout() {
         </div>
         <div className="mx-auto max-w-xl py-16 sm:py-24">
           <div className="text-center">
-            <p className="text-base font-semibold text-violet-600">404</p>
-            <h1 className="mt-2 text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+            <p className="text-violet-600 text-base font-semibold">404</p>
+            <h1 className="text-gray-900 mt-2 text-4xl font-bold tracking-tight sm:text-5xl">
               Not Found
             </h1>
-            <p className="mt-2 text-lg text-gray-500">
+            <p className="text-gray-500 mt-2 text-lg">
               The page you are looking for could not be found.
             </p>
           </div>
           <div className="mt-12">
-            <h2 className="text-base font-semibold text-gray-500">
+            <h2 className="text-gray-500 text-base font-semibold">
               Popular pages
             </h2>
             <ul
               role="list"
-              className="mt-4 divide-y divide-gray-200 border-b border-t border-gray-200"
+              className="border-gray-200 mt-4 divide-y divide-gray-200 border-b border-t"
             >
               {links.map((link, linkIdx) => (
                 <li
                   key={linkIdx}
                   className="relative flex items-start space-x-4 py-6"
                 >
                   <div className="flex-shrink-0">
-                    <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-violet-50">
+                    <span className="bg-violet-50 flex h-12 w-12 items-center justify-center rounded-lg">
                       <link.icon
-                        className="h-6 w-6 text-violet-700"
+                        className="text-violet-700 h-6 w-6"
                         aria-hidden="true"
                       />
                     </span>
                   </div>
                   <div className="min-w-0 flex-1">
-                    <h3 className="text-base font-medium text-gray-900 hover:text-violet-500">
+                    <h3 className="text-gray-900 text-base font-medium hover:text-violet-500">
                       <span className="rounded-sm focus-within:ring-2 focus-within:ring-violet-500 focus-within:ring-offset-2">
                         <a
                           href={link.href}
@@ -99,13 +99,13 @@ export default function NotFoundLayout() {
                         </a>
                       </span>
                     </h3>
-                    <p className="text-base text-gray-500">
+                    <p className="text-gray-500 text-base">
                       {link.description}
                     </p>
                   </div>
                   <div className="flex-shrink-0 self-center">
                     <ChevronRightIcon
-                      className="h-5 w-5 text-gray-400"
+                      className="text-gray-400 h-5 w-5"
                       aria-hidden="true"
                     />
                   </div>
@@ -115,7 +115,7 @@ export default function NotFoundLayout() {
             <div className="mt-8">
               <a
                 href="/"
-                className="text-base font-medium text-violet-600 hover:text-violet-500"
+                className="text-violet-600 text-base font-medium hover:text-violet-500"
               >
                 <span aria-hidden="true">&larr; </span>
                 Home

diff --git a/ui/src/app/Settings.tsx b/ui/src/app/Settings.tsx
@@ -21,7 +21,7 @@ export default function Settings() {
     <>
       <div className="flex items-center justify-between">
         <div className="min-w-0 flex-1">
-          <h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
+          <h2 className="text-gray-900 text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">
             Settings
           </h2>
         </div>

diff --git a/ui/src/app/auth/Login.tsx b/ui/src/app/auth/Login.tsx
@@ -104,7 +104,7 @@ export default function Login() {
 
   return (
     <>
-      <div className="flex min-h-screen flex-col justify-center bg-white sm:px-6 lg:px-8">
+      <div className="bg-white flex min-h-screen flex-col justify-center sm:px-6 lg:px-8">
         <main className="flex px-6 py-10">
           <div className="w-full overflow-x-auto px-4 sm:px-6 lg:px-8">
             <div className="sm:mx-auto sm:w-full sm:max-w-md">
@@ -115,7 +115,7 @@ export default function Login() {
                 height={512}
                 className="m-auto h-20 w-auto"
               />
-              <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+              <h2 className="text-gray-900 mt-6 text-center text-3xl font-bold tracking-tight">
                 Login to Flipt
               </h2>
             </div>
@@ -127,7 +127,7 @@ export default function Login() {
                       <div key={provider.name}>
                         <a
                           href="#"
-                          className="inline-flex w-full justify-center rounded-md border px-4 py-2 text-sm font-medium shadow-sm bg-white text-gray-500 border-gray-300 hover:shadow-violet-300 hover:text-violet-500"
+                          className="bg-white text-gray-500 border-gray-300 inline-flex w-full justify-center rounded-md border px-4 py-2 text-sm font-medium shadow-sm hover:text-violet-500 hover:shadow-violet-300"
                           onClick={(e) => {
                             e.preventDefault();
                             authorize(provider.authorize_url);
@@ -148,12 +148,12 @@ export default function Login() {
                   </div>
                 )}
                 {(!providers || providers.length === 0) && (
-                  <div className="shadow bg-white sm:rounded-lg">
+                  <div className="bg-white shadow sm:rounded-lg">
                     <div className="px-4 py-5 sm:p-6">
-                      <h3 className="text-base font-semibold leading-6 text-gray-900">
+                      <h3 className="text-gray-900 text-base font-semibold leading-6">
                         No Providers
                       </h3>
-                      <div className="mt-2 max-w-xl text-sm text-gray-500">
+                      <div className="text-gray-500 mt-2 max-w-xl text-sm">
                         <p>
                           Authentication is set to{' '}
                           <span className="font-medium">required</span>,
@@ -164,7 +164,7 @@ export default function Login() {
                       <div className="mt-3 text-sm leading-6">
                         <a
                           href="https://www.flipt.io/docs/configuration/authentication#method-oidc"
-                          className="font-semibold text-violet-600 hover:text-violet-500"
+                          className="text-violet-600 font-semibold hover:text-violet-500"
                         >
                           Configuring Authentication
                           <span aria-hidden="true"> &rarr;</span>