[chore] raster tile form - add link to docs (#3183)

* [chore] raster tile form - add link to docs

Signed-off-by: Ihor Dykhta <[email protected]>

* nit

Signed-off-by: Ihor Dykhta <[email protected]>

---------

Signed-off-by: Ihor Dykhta <[email protected]>

Author: igorDykhta

src/components/src/modals/tilesets-modals/tileset-raster-form.tsx

@@ -15,11 +15,12 @@ import {getApplicationConfig} from '@kepler.gl/utils';
 import {default as useFetchJson} from '../../hooks/use-fetch-raster-tile-metadata';
 import {DatasetCreationAttributes, MetaResponse} from './common';
 import {InputLight} from '../../common';
+import {Help} from '../../common/icons';
 
 const TilesetInputContainer = styled.div`
   display: grid;
   grid-template-rows: repeat(3, 1fr);
-  row-gap: 18px;
+  row-gap: 0px;
   font-size: 12px;
 `;
 
@@ -29,6 +30,11 @@ const TilesetInputDescription = styled.div`
   font-size: 11px;
 `;
 
+const LabelRow = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export type RasterTilesetMeta = {
   name: string;
   metadataUrl: string;
@@ -62,6 +68,28 @@ type RasterTileFormProps = {
   setResponse: (response: MetaResponse) => void;
 };
 
+const InfoIconLink = styled.a`
+  margin-left: 4px;
+  color: ${props => props.theme.labelColor};
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  line-height: 0;
+  vertical-align: middle;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    display: block;
+  }
+`;
+
+const RASTER_TILE_DOCUMENTATION_URL =
+  'https://docs.kepler.gl/docs/user-guides/c-types-of-layers/n-raster-tile-layer';
+
 const parseMetadataAllowCollections = (
   metadata: JsonObjectOrArray | PMTilesMetadata,
   {metadataUrl, rasterTileType}: {metadataUrl: string; rasterTileType: RasterTileType}
@@ -209,7 +237,17 @@ const RasterTileForm: React.FC<RasterTileFormProps> = ({setResponse}) => {
         />
       </div>
       <div>
-        <label htmlFor="tile-metadata">Tileset metadata URL</label>
+        <LabelRow>
+          <label htmlFor="tile-metadata">Tileset metadata URL</label>
+          <InfoIconLink
+            href={RASTER_TILE_DOCUMENTATION_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label="Open Raster Tile Layer documentation"
+          >
+            <Help height="16px" />
+          </InfoIconLink>
+        </LabelRow>
         <InputLight
           id="tile-metadata"
           placeholder="Tileset metadata URL"
@@ -222,7 +260,17 @@ const RasterTileForm: React.FC<RasterTileFormProps> = ({setResponse}) => {
       </div>
       {showServerInput && (
         <div>
-          <label htmlFor="tileset-raster-servers">Raster tile servers</label>
+          <LabelRow>
+            <label htmlFor="tileset-raster-servers">Raster tile servers</label>
+            <InfoIconLink
+              href={RASTER_TILE_DOCUMENTATION_URL}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label="Open Raster Tile Layer documentation"
+            >
+              <Help height="16px" />
+            </InfoIconLink>
+          </LabelRow>
           <InputLight
             id="tileset-raster-servers"
             placeholder="Raster tile servers (separated by commas)"