refactor: add headerTooltip prop to RasterFunctionSelector

src/landsat-explorer/components/RasterFunctionSelector/RasterFunctionSelectorContainer.tsx

@@ -20,5 +20,10 @@ import { useLandsatRasterFunctions } from './useLandsatRasterFunctions';
 export const RasterFunctionSelectorContainer = () => {
  const data = useLandsatRasterFunctions();
 
- return <RasterFunctionSelector data={data} />;
+ return (
+ <RasterFunctionSelector
+ headerTooltip={`Landsat sensors collect imagery at distinct ranges along the electromagnetic spectrum. These “bands” of imagery can be combined to create renderings of the Earth for a variety of applications.`}
+ data={data}
+ />
+ );
 };

src/shared/components/RasterFunctionSelector/RasterFunctionSelector.tsx

@@ -22,6 +22,10 @@ import { Tooltip } from '../Tooltip';
 import { IS_MOBILE_DEVICE } from '@shared/constants/UI';
 
 type Props = {
+ /**
+ * tooltip text that will be displayed when user hovers the info icon next to the header
+ */
+ headerTooltip: string;
  /**
  * name of selected raster function
  */
@@ -47,6 +51,7 @@ type Props = {
 };
 
 export const RasterFunctionSelector: FC<Props> = ({
+ headerTooltip,
  nameOfSelectedRasterFunction,
  rasterFunctionInfo,
  disabled,
@@ -65,10 +70,7 @@ export const RasterFunctionSelector: FC<Props> = ({
  ref={containerRef}
  >
  <div className="text-center mb-3 flex items-center justify-center">
- <Tooltip
- content={`Landsat sensors collect imagery at distinct ranges along the electromagnetic spectrum. These “bands” of imagery can be combined to create renderings of the Earth for a variety of applications.`}
- width={240}
- >
+ <Tooltip content={headerTooltip} width={240}>
  <calcite-icon scale="s" icon="information" />
  </Tooltip>
 

src/shared/components/RasterFunctionSelector/RasterFunctionSelectorContainer.tsx

@@ -29,13 +29,20 @@ import { RasterFunctionInfo } from '@typing/imagery-service';
 import { selectChangeCompareLayerIsOn } from '@shared/store/ChangeCompareTool/selectors';
 
 type Props = {
+ /**
+ * tooltip text that will be displayed when user hovers the info icon next to the header
+ */
+ headerTooltip: string;
  /**
  * list of raster functions of the imagery service
  */
  data: RasterFunctionInfo[];
 };
 
-export const RasterFunctionSelectorContainer: FC<Props> = ({ data }) => {
+export const RasterFunctionSelectorContainer: FC<Props> = ({
+ headerTooltip,
+ data,
+}) => {
  const dispatch = useDispatch();
 
  const mode = useSelector(selectAppMode);
@@ -85,6 +92,7 @@ export const RasterFunctionSelectorContainer: FC<Props> = ({ data }) => {
 
  return (
  <RasterFunctionSelector
+ headerTooltip={headerTooltip}
  rasterFunctionInfo={data}
  nameOfSelectedRasterFunction={rasterFunctionName}
  disabled={shouldDisable()}