diff --git a/ui/index.dev.html b/ui/index.dev.html index e5e22c8678..8428062760 100644 --- a/ui/index.dev.html +++ b/ui/index.dev.html @@ -1,5 +1,5 @@ - + @@ -28,23 +28,23 @@ class="h-8 w-auto" /> -
+

Not Found

-

+

This isn't the UI you're looking for...

-

+

Run the following in another terminal: 

$ cd ui && npm run dev
@@ -53,7 +53,7 @@
Need Help? Join our Discord diff --git a/ui/index.html b/ui/index.html index 87e5f00434..830d0696e0 100644 --- a/ui/index.html +++ b/ui/index.html @@ -1,5 +1,5 @@ - +
diff --git a/ui/screenshot.js b/ui/screenshot.js index 8122c229c1..bf14644b09 100644 --- 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 index adf3d592e6..89ea7d3945 100644 --- 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 index 89df7b4f9b..68e6eafee0 100644 --- 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 index 502020d05e..c3150b657d 100644 --- 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 index 26e60dc147..f411018069 100644 --- 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 index 648c8808dc..4d45ae2614 100644 --- 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 index 42796e2f7d..45125d46d7 100644 --- a/ui/src/app/ErrorLayout.tsx +++ b/ui/src/app/ErrorLayout.tsx @@ -21,11 +21,11 @@ export default function ErrorLayout() {
-

+

Error

{error && error.message && ( -

{error.message}

+

{error.message}

)}
@@ -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" > Go Back diff --git a/ui/src/app/Layout.tsx b/ui/src/app/Layout.tsx index 5920046f80..da3e2ada9d 100644 --- a/ui/src/app/Layout.tsx +++ b/ui/src/app/Layout.tsx @@ -30,7 +30,7 @@ function InnerLayout() { return ( <> -
+
diff --git a/ui/src/app/NotFoundLayout.tsx b/ui/src/app/NotFoundLayout.tsx index b72e84300a..1ac4d6c0c3 100644 --- a/ui/src/app/NotFoundLayout.tsx +++ b/ui/src/app/NotFoundLayout.tsx @@ -38,7 +38,7 @@ const links = [ export default function NotFoundLayout() { return ( -
+
@@ -53,21 +53,21 @@ export default function NotFoundLayout() {
-

404

-

+

404

+

Not Found

-

+

The page you are looking for could not be found.

-

+

Popular pages