feat: Service Edits (#1097)

* fix ts errors

* go to service edit page in edit mode

* group with other basic components

* tweaks from convo with Josh

* update service edit drawer to use RHF

* convert AttributeModal to RHF

* attribute supplement schemas

* schema updates

* dynamic fields

* update i18n generation

* update schema & migrations

* update api

* Attribute modal

* update handler cache

* fix linting errors

* alter view

* supplement handling

* uncomment criteria

* update mock data

* update msw worker, clean up common schema files

* update handler

* add submit handler, update schema

* use Section.* components

* add sections

* patch for z.never()

* schema update

* break in to pieces

* add i18next as peerdep

* enable new turbo ui

* sonarcloud workspace binding

* service attribute processing

* update criteria

* extract processing to separate fns

* unify service attrib select criteria, update api & mock data

* allow passed data, widen param type

* display data

* implement Add Attribute modal

* fix useRouter import

* launch service drawer

* remove data viewer

* temp disable gtag addition

* `slug` isn't being passed to page props??

* temp remove service multi select popover

* revert paths

* fix PageContent props

* fix group spacing

* Add Coverage modal

* remove placeholder

* styling

* api routes & mock data

* service edit drawer work

* cleanup console.log

* update attribute schemas

* remove devtool

* misc cleanup

* sonarlint config

* cleanup

* fix schema

* fix sonarlint issues

* add sonarlint recommendation

* fix sonar/deepsource issues

---------

Signed-off-by: Joe Karow <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

.github/renovate.json

@@ -6,7 +6,7 @@
 	"packageRules": [
 		{
 			"groupName": "patched packages",
-			"matchPackageNames": ["@crowdin/ota-client", "trpc-panel", "msw-storybook-addon"],
+			"matchPackageNames": ["@crowdin/ota-client", "trpc-panel", "msw-storybook-addon", "json-schema-to-zod"],
 			"matchUpdateTypes": ["major", "minor", "patch"]
 		},
 		{

InReach.code-workspace

@@ -19,6 +19,7 @@
 			"figma.figma-vscode-extension",
 			"yoavbls.pretty-ts-errors",
 			"quick-lint.quick-lint-js",
+			"sonarsource.sonarlint-vscode",
 		],
 	},
 	"folders": [
@@ -224,6 +225,12 @@
 		"typescript.tsdk": "✨ InReach (root)/node_modules/typescript/lib",
 		"typescript.enablePromptUseWorkspaceTsdk": true,
 		"typescript.workspaceSymbols.scope": "allOpenProjects",
+		"sonarlint.connectedMode.project": {
+			"connectionId": "inreach",
+			"projectKey": "weareinreach_InReach",
+		},
+		"sonarlint.output.showAnalyzerLogs": true,
+		"sonarlint.output.showVerboseLogs": false,
 	},
 	"launch": {
 		"configurations": [

apps/app/src/pages/_app.tsx

@@ -9,7 +9,7 @@ import { type AppProps, type NextWebVitalsMetric } from 'next/app'
 import dynamic from 'next/dynamic'
 import Head from 'next/head'
 import { useRouter } from 'next/router'
-import Script from 'next/script'
+// import Script from 'next/script'
 import { type Session } from 'next-auth'
 import { appWithTranslation } from 'next-i18next'
 import { DefaultSeo, type DefaultSeoProps } from 'next-seo'
@@ -52,7 +52,7 @@ export function reportWebVitals(stats: NextWebVitalsMetric) {
 	appEvent.webVitals(stats)
 }
 
-const PageContent = ({ Component, ...pageProps }: AppPropsWithGridSwitch) => {
+const PageContent = ({ Component, pageProps }: AppPropsWithGridSwitch) => {
 	const router = useRouter()
 	const autoResetState = Component.autoResetState ? { key: router.asPath } : {}
 	return Component.omitGrid ? (
@@ -78,11 +78,13 @@ const MyApp = (appProps: AppPropsWithGridSwitch) => {
 			<Providers session={session}>
 				<DefaultSeo {...defaultSEO} />
 				<GoogleAnalytics trackPageViews defaultConsent='granted' />
-				<Script id='gtm_conversion'>
+				{/* <Script id='gtm_conversion'>
 					{`
+					if (window.gtag) {
 						gtag?.('config','G-RL8CR7T4EP')
+					}
 					`}
-				</Script>
+				</Script> */}
 				<PageLoadProgress />
 				<Navbar />
 				<PageContent {...appProps} />

apps/app/src/pages/org/[slug]/[orgLocationId]/edit/index.tsx → apps/app/src/pages/org/[slug]/[orgLocationId]/edit.tsx

@@ -1,4 +1,3 @@
-import { DevTool } from '@hookform/devtools'
 import { createStyles, Grid, Stack, Tabs, Title } from '@mantine/core'
 import { compareArrayVals } from 'crud-object-diff'
 import { type InferGetServerSidePropsType, type NextPage } from 'next'
@@ -131,11 +130,12 @@ const OrgLocationPage: NextPage<InferGetServerSidePropsType<typeof getServerSide
 							option: 'back',
 							backTo: 'dynamicText',
 							backToText: data.organization.name,
-							onClick: () =>
+							onClick: async () => {
 								router.push({
 									pathname: '/org/[slug]/edit',
 									query: { slug: data.organization.slug },
-								}),
+								})
+							},
 						}}
 						organizationId={data.organization.id}
 						saved={Boolean(isSaved)}
@@ -193,19 +193,19 @@ const OrgLocationPage: NextPage<InferGetServerSidePropsType<typeof getServerSide
 							</Tabs.List>
 							<Stack spacing={40} pt={40}>
 								<Stack spacing={20} ref={servicesRef}>
+									<Stack spacing={8}>
+										<Title order={3}>{'Associated services'}</Title>
+										<ServicesInfoCard parentId={data.id} />
+									</Stack>
 									<Stack spacing={8}>
 										<Title order={3}>{'Associate service(s) to this location'}</Title>
-										<MultiSelectPopover
+										{/*<MultiSelectPopover
 											label='Services available'
 											data={orgServices}
 											control={formMethods.control}
 											name='services'
 											indicateWhenDirty
-										/>
-									</Stack>
-									<Stack spacing={8}>
-										<Title order={3}>{'Associated services'}</Title>
-										<ServicesInfoCard parentId={data.id} />
+						/>*/}
 									</Stack>
 								</Stack>
 								<div ref={photosRef}>
@@ -224,7 +224,6 @@ const OrgLocationPage: NextPage<InferGetServerSidePropsType<typeof getServerSide
 						<VisitCard locationId={data.id} edit />
 					</Stack>
 				</Grid.Col>
-				<DevTool control={formMethods.control} />
 			</FormProvider>
 		</>
 	)
@@ -247,30 +246,34 @@ export const getServerSideProps = async ({
 	if (!session) {
 		return {
 			redirect: {
-				destination: '/',
+				destination: `/org/${slug}/${id}`,
 				permanent: false,
 			},
 		}
 	}
 	const ssg = await trpcServerClient({ session })
 	const { id: orgId } = await ssg.organization.getIdFromSlug.fetch({ slug })
-	const [i18n] = await Promise.all([
+	const [i18n] = await Promise.allSettled([
 		getServerSideTranslations(locale, [
 			'common',
 			'services',
 			'attribute',
 			'phone-type',
 			'country',
 			'gov-dist',
+			orgId,
 		]),
 		ssg.location.forLocationPageEdits.prefetch({ id }),
 		ssg.location.getAlerts.prefetch({ id }),
 	])
+
+	const translations = i18n.status === 'fulfilled' ? i18n.value : {}
+
 	const props = {
 		organizationId: orgId,
 		session,
 		trpcState: ssg.dehydrate(),
-		...i18n,
+		...translations,
 	}
 
 	return {