feat: generate authenticated url (#1471)

* refactor: extract info component

* feat: generate authenticated url

* refactor: add companion select

* refactor: ensure behaviour across environments

apps/client/src/common/components/info/Info.module.scss

@@ -0,0 +1,16 @@
+.infoLabel {
+  display: flex;
+  align-items: center;
+  gap: $element-spacing;
+  padding: 1rem;
+  margin-bottom: 1rem;
+
+  background-color: $gray-1100;
+  border-radius: 2px;
+  font-size: $inner-section-text-size;
+
+  svg {
+    font-size: 1.5rem;
+    color: $info-blue;
+  }
+}

apps/client/src/common/components/info/Info.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
+
+import style from './Info.module.scss';
+
+export default function Info({ children }: PropsWithChildren) {
+  return (
+    <div className={style.infoLabel}>
+      <IoAlertCircle />
+      {children}
+    </div>
+  );
+}

apps/client/src/common/components/view-params-editor/ViewParamsEditor.module.scss

@@ -8,23 +8,6 @@
   }
 }
 
-.infoLabel {
-  display: flex;
-  align-items: center;
-  gap: $element-spacing;
-  padding: 1rem;
-  margin-bottom: 1rem;
-
-  background-color: $gray-1100;
-  border-radius: 2px;
-  font-size: $inner-section-text-size;
-
-  svg {
-    font-size: 1.5rem;
-    color: $info-blue;
-  }
-}
-
 .sectionList {
   display: flex;
   flex-direction: column;

apps/client/src/common/components/view-params-editor/ViewParamsEditor.tsx

@@ -11,9 +11,9 @@ import {
   DrawerOverlay,
   useDisclosure,
 } from '@chakra-ui/react';
-import { IoAlertCircle } from '@react-icons/all-files/io5/IoAlertCircle';
 
 import useViewSettings from '../../../common/hooks-query/useViewSettings';
+import Info from '../info/Info';
 
 import { ViewOption } from './types';
 import ViewParamsSection from './ViewParamsSection';
@@ -132,12 +132,7 @@ export default function ViewParamsEditor({ viewOptions }: EditFormDrawerProps) {
         </DrawerHeader>
 
         <DrawerBody>
-          {viewSettings.overrideStyles && (
-            <div className={style.infoLabel}>
-              <IoAlertCircle />
-              This view style is being modified by a custom CSS file. <br />
-            </div>
-          )}
+          {viewSettings.overrideStyles && <Info>This view style is being modified by a custom CSS file.</Info>}
           <form id='edit-params-form' onSubmit={onParamsFormSubmit} className={style.sectionList}>
             {viewOptions.map((section) => (
               <ViewParamsSection