FIX: Ranges selected should be absolute.

Sheet1!$D$1 rather than Sheet1!D1

There reason is that if we extend a formula that has those will behave in
surprising ways.

webapp/src/components/tests/util.test.ts

@@ -41,5 +41,5 @@ test("format range to get the full formula", async () => {
   };
   const worksheetNames = ["Sheet1", "Notes"];
 
-  expect(getFullRangeToString(selectedView, worksheetNames)).toBe("Sheet1!H1");
+  expect(getFullRangeToString(selectedView, worksheetNames)).toBe("Sheet1!$H$1");
 });

webapp/src/components/util.ts

@@ -26,7 +26,7 @@ export type NavigationKey =
 
 export const isNavigationKey = (key: string): key is NavigationKey =>
   ["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(
-    key,
+    key
   );
 
 export const getCellAddress = (selectedArea: Area, selectedCell: Cell) => {
@@ -50,30 +50,32 @@ export function rangeToStr(
     columnEnd: number;
   },
   referenceSheet: number,
-  referenceName: string,
+  referenceName: string
 ): string {
   const { sheet, rowStart, rowEnd, columnStart, columnEnd } = range;
   const sheetName = sheet === referenceSheet ? "" : `'${referenceName}'!`;
   if (rowStart === rowEnd && columnStart === columnEnd) {
     return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
   }
-  return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}:${columnNameFromNumber(
-    columnEnd,
-  )}${rowEnd}`;
+  return `${sheetName}${columnNameFromNumber(
+    columnStart
+  )}${rowStart}:${columnNameFromNumber(columnEnd)}${rowEnd}`;
 }
 
+
+// Returns the full range of the selected view as a string in absolute form
+// e.g. 'Sheet1!$A$1:$B$2' or 'Sheet1!$A$1'
 export function getFullRangeToString(
   selectedView: SelectedView,
-  worksheetNames: string[],
+  worksheetNames: string[]
 ): string {
-  // order of values is confusing compared to rangeToStr range type, needs refactoring for consistency
   const [rowStart, columnStart, rowEnd, columnEnd] = selectedView.range;
-  const sheetName = `${worksheetNames[selectedView.sheet]}!`;
+  const sheetName = `${worksheetNames[selectedView.sheet]}`;
 
   if (rowStart === rowEnd && columnStart === columnEnd) {
-    return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}`;
+    return `${sheetName}!$${columnNameFromNumber(columnStart)}$${rowStart}`;
   }
-  return `${sheetName}${columnNameFromNumber(columnStart)}${rowStart}:${columnNameFromNumber(
-    columnEnd,
-  )}${rowEnd}`;
+  return `${sheetName}!$${columnNameFromNumber(
+    columnStart
+  )}$${rowStart}:$${columnNameFromNumber(columnEnd)}$${rowEnd}`;
 }