chore: V2 UI rules

config/local.yml

@@ -2,7 +2,7 @@
 
 # version: "1.0"
 log:
-  level: INFO
+  level: DEBUG
 
 # authentication:
 #   required: false

internal/storage/environments/fs/flipt/flags.go

@@ -58,16 +58,19 @@ func (f *FlagStorage) GetResource(ctx context.Context, fs environmentsfs.Filesys
 			continue
 		}
 
-		for _, f := range doc.Flags {
-			if f.Key == key {
-				payload, err := payloadFromFlag(f)
+		for _, ff := range doc.Flags {
+			if ff.Key == key {
+				payload, err := payloadFromFlag(ff)
 				if err != nil {
 					return nil, err
 				}
 
+				// TODO: remove this after ui is complete
+				f.logger.Debug("get flag", zap.Any("flag", payload))
+
 				return &rpcenvironments.Resource{
 					Namespace: namespace,
-					Key:       f.Key,
+					Key:       ff.Key,
 					Payload:   payload,
 				}, nil
 			}
@@ -125,6 +128,9 @@ func (f *FlagStorage) PutResource(ctx context.Context, fs environmentsfs.Filesys
 		return err
 	}
 
+	// TODO: remove this after ui is complete
+	f.logger.Debug("put flag", zap.Any("flag", flag))
+
 	docs, idx, err := getDocsAndNamespace(ctx, fs, rs.Namespace)
 	if err != nil {
 		return err

ui/index.dev.html

@@ -8,6 +8,7 @@
 
     <script type="module">
       import RefreshRuntime from 'http://localhost:5173/@react-refresh';
+
       RefreshRuntime.injectIntoGlobalHook(window);
       window.$RefreshReg$ = () => {};
       window.$RefreshSig$ = () => (type) => type;

ui/package.json

@@ -62,6 +62,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@playwright/test": "^1.49.1",
     "@tailwindcss/forms": "^0.5.9",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.2",
     "@types/jest": "^29.5.14",
     "@types/loadable__component": "^5.13.9",
     "@types/node": "^18.19.71",

ui/prettier.config.cjs

@@ -1,5 +1,17 @@
 module.exports = {
-  plugins: ['prettier-plugin-tailwindcss'],
+  plugins: [
+    'prettier-plugin-tailwindcss',
+    '@trivago/prettier-plugin-sort-imports'
+  ],
   singleQuote: true,
-  trailingComma: 'none'
+  trailingComma: 'none',
+  importOrder: [
+    '^~/app/(.*)$',
+    '^~/components/(.*)$',
+    '^~/types/(.*)$',
+    '^~/(.*)$',
+    '^[./]'
+  ],
+  importOrderSeparation: true,
+  importOrderSortSpecifiers: true
 };

ui/src/App.tsx

@@ -1,21 +1,24 @@
-import loadable from '@loadable/component';
 import formbricks from '@formbricks/js/website';
+import loadable from '@loadable/component';
 import { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSelector } from 'react-redux';
+import { RouterProvider, createHashRouter, redirect } from 'react-router';
+
 import { selectCurrentNamespace } from '~/app/namespaces/namespacesApi';
-import { createHashRouter, redirect, RouterProvider } from 'react-router';
+
 import ErrorLayout from './app/ErrorLayout';
-import Flag from './app/flags/Flag';
-import NewFlag from './app/flags/NewFlag';
 import Layout from './app/Layout';
 import NotFoundLayout from './app/NotFoundLayout';
+import Flag from './app/flags/Flag';
+import NewFlag from './app/flags/NewFlag';
 import { selectTheme } from './app/preferences/preferencesSlice';
 import NewSegment from './app/segments/NewSegment';
 import Segment from './app/segments/Segment';
 import SessionProvider from './components/SessionProvider';
-import { Theme } from './types/Preferences';
 import { store } from './store';
+import { Theme } from './types/Preferences';
+
 const Flags = loadable(() => import('./app/flags/Flags'));
 const Segments = loadable(() => import('./app/segments/Segments'));
 const Console = loadable(() => import('./app/console/Console'));

ui/src/app/ErrorLayout.tsx

@@ -1,4 +1,5 @@
 import { Link, useNavigate, useRouteError } from 'react-router';
+
 import logoFlag from '~/assets/logo-flag.png';
 
 export default function ErrorLayout() {

ui/src/app/Layout.tsx

@@ -1,3 +1,4 @@
+import { StarIcon } from '@heroicons/react/20/solid';
 import { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import {
@@ -7,27 +8,30 @@ import {
   useNavigate,
   useParams
 } from 'react-router';
+
+import Banner from '~/components/Banner';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
 import Loading from '~/components/Loading';
 import { NotificationProvider } from '~/components/NotificationProvider';
+import Sidebar from '~/components/Sidebar';
+import CommandDialog from '~/components/command/CommandDialog';
 import ErrorNotification from '~/components/notifications/ErrorNotification';
 import SuccessNotification from '~/components/notifications/SuccessNotification';
-import Sidebar from '~/components/Sidebar';
+
+import { LoadingStatus } from '~/types/Meta';
+
 import { useSession } from '~/data/hooks/session';
 import { useAppDispatch } from '~/data/hooks/store';
-import { LoadingStatus } from '~/types/Meta';
+
+import { selectCurrentEnvironment } from './environments/environmentsApi';
+import { selectDismissedBanner } from './events/eventSlice';
 import { fetchInfoAsync, selectInfo } from './meta/metaSlice';
 import {
   currentNamespaceChanged,
   selectCurrentNamespace,
   useListNamespacesQuery
 } from './namespaces/namespacesApi';
-import CommandDialog from '~/components/command/CommandDialog';
-import Banner from '~/components/Banner';
-import { selectDismissedBanner } from './events/eventSlice';
-import { StarIcon } from '@heroicons/react/20/solid';
-import { selectCurrentEnvironment } from './environments/environmentsApi';
 
 function InnerLayout() {
   const { session } = useSession();