Add support in DSL editor themes for expiration and reformat

src/spicedb-common/components/relationshipeditor/RelationshipEditor.tsx

@@ -130,7 +130,7 @@
     toolbarCheckbox: {
       padding: "4px",
     },
-  })
+  }),
 );
 
 export type RelationTupleHighlight = {
@@ -189,7 +189,7 @@
 
     // NOTE: we do not want to rerun this if the dataUpdated callback has changed (which it should
     // not, ideally).
   }, [data]);
 
   // relationships holds a filtered form of the grid, containing only valid relationships.
   const relationships = useDeepCompareMemo(() => {
@@ -241,17 +241,17 @@
     const updated = updateRowInData(
       inFlightData.current,
       dataRowIndex,
-      newColumnData
+      newColumnData,
     );
     inFlightData.current = updated;
     setData(updated);
   };
 
   const [gridSelection, setGridSelection] = useState<GridSelection | undefined>(
-    undefined
+    undefined,
   );
   const handleGridSelectionChanged = (
-    newSelection: GridSelection | undefined
+    newSelection: GridSelection | undefined,
   ) => {
     // Prevent column-only selection.
     if (newSelection?.columns && newSelection.columns.length > 0) {
@@ -263,7 +263,7 @@
 
   const handleCellEdited = (
     cellPosition: readonly [number, number],
-    newValue: EditableGridCell
+    newValue: EditableGridCell,
   ) => {
     const [col, row] = cellPosition;
     if (row >= inFlightData.current.length || col >= COLUMNS.length) {
@@ -282,7 +282,7 @@
         const adjustedData = Array.from(inFlightData.current);
         adjustedData[row] = datumToAnnotated(
           relationshipToDatum(parsed),
-          adjustedData[row].dataRowIndex
+          adjustedData[row].dataRowIndex,
         );
         setData(adjustedData);
         return;
@@ -328,7 +328,7 @@
               {COLUMNS[col].dataDescription}
             </Typography>
           )}
-        </div>
+        </div>,
       );
     }
 
@@ -595,7 +595,7 @@
           };
       }
     },
-    [data]
+    [data],
   );
 
   const getCellsForSelection = useCallback(
@@ -622,7 +622,7 @@
 
       return result;
     },
-    [data]
+    [data],
   );
 
   const classes = useStyles();
@@ -641,7 +641,7 @@
 
   const handlePaste = (
     target: readonly [number, number],
-    values: readonly (readonly string[])[]
+    values: readonly (readonly string[])[],
   ) => {
     if (props.isReadOnly) {
       return false;
@@ -692,7 +692,7 @@
         adjustedData,
         rowToUpdate,
         columnData,
-        startingCol
+        startingCol,
       );
       rowOffset++;
     });
@@ -708,7 +708,7 @@
         const rowIndex = data.findIndex(
           (datum: RelationshipDatumAndMetadata) => {
             return toRelationshipString(datum) === highlight.tupleString;
-          }
+          },
         );
         if (rowIndex === undefined) {
           return undefined;
@@ -753,7 +753,7 @@
   const copySelectedRows = () => {
     if (gridSelection?.rows) {
       const selected = data.filter((annotated: RelationshipDatumAndMetadata) =>
-        gridSelection?.rows.hasIndex(annotated.dataRowIndex)
+        gridSelection?.rows.hasIndex(annotated.dataRowIndex),
       );
       if (selected) {
         const data = selected
@@ -780,7 +780,7 @@
 
         if ("comment" in annotated.datum) {
           const parsed = parseRelationshipWithError(
-            annotated.datum.comment.substring(CommentCellPrefix.length).trim()
+            annotated.datum.comment.substring(CommentCellPrefix.length).trim(),
           );
           if ("errorMessage" in parsed) {
             return annotated;
@@ -863,7 +863,7 @@
         },
       });
     },
-    [highlightsByRowIndex, setTooltip]
+    [highlightsByRowIndex, setTooltip],
   );
 
   const width = props.dimensions?.width ?? 1200;
@@ -894,7 +894,7 @@
 
   const [cookies, setCookies] = useCookies(["relgrid-similar-highlighting"]);
   const [similarHighlighting, setSimilarHighlighting] = useState(
-    cookies["relgrid-similar-highlighting"] !== "0"
+    cookies["relgrid-similar-highlighting"] !== "0",
   );
   const handleToggleSimilarHighlighting = () => {
     const updated = !similarHighlighting;
@@ -909,7 +909,7 @@
   const columnsWithWidths = useMemo(() => {
     const defaultColWidth = Math.max(
       width / (COLUMNS.length + 0.5),
-      MIN_COLUMN_WIDTH
+      MIN_COLUMN_WIDTH,
     ); // +0.5 to give some padding
     return COLUMNS.map((col: Column) => {
       return {
@@ -943,12 +943,12 @@
     props.resolver,
     similarHighlighting,
     columnsWithWidths,
-    props.isReadOnly
+    props.isReadOnly,
   );
 
   // TODO: get JSX out of state.
   const [snackbarMessage, setSnackbarMessage] = useState<ReactNode | undefined>(
-    undefined
+    undefined,
   );
 
   return (

src/spicedb-common/components/relationshipeditor/columns.ts

@@ -27,7 +27,7 @@ export type DataValidator = RegExp | ((input: string) => boolean);
 
 export function validate(
   validator: DataValidator,
-  dataValue: string | undefined
+  dataValue: string | undefined,
 ): boolean {
   const isValid =
     typeof validator === "function"

src/spicedb-common/components/relationshipeditor/customcells.ts

@@ -52,7 +52,7 @@ export function useCustomCells(
   resolver: Resolver | undefined,
   similarHighlighting: boolean,
   columnsWithWidths: Column[],
-  isReadOnly: boolean
+  isReadOnly: boolean,
 ): {
   drawCell: DrawCallback;
   provideEditor: ProvideEditorCallback<GridCell>;
@@ -264,7 +264,7 @@ export function useCustomCells(
       }
       return false;
     },
-    [renderers]
+    [renderers],
   );
 
   const provideEditor = useCallback<ProvideEditorCallback<GridCell>>(
@@ -279,7 +279,7 @@ export function useCustomCells(
 
       return undefined;
     },
-    [renderers, isReadOnly]
+    [renderers, isReadOnly],
   );
 
   return { drawCell, provideEditor };

src/spicedb-common/components/relationshipeditor/data.ts

@@ -74,7 +74,7 @@ export function toExternalData(data: AnnotatedData): RelationshipDatum[] {
  * fromExternalData converts a simple RelationshipDatum array into the annotated data.
  */
 export function fromExternalData(
-  externalData: RelationshipDatum[] | undefined
+  externalData: RelationshipDatum[] | undefined,
 ): AnnotatedData {
   return (externalData ?? []).map(datumToAnnotated);
 }
@@ -83,7 +83,7 @@ export function fromExternalData(
  * emptyAnnotatedDatum returns an empty annotated datum for the grid, at the given index.
  */
 export function emptyAnnotatedDatum(
-  index: number
+  index: number,
 ): RelationshipDatumAndMetadata {
   return datumToAnnotated(
     {
@@ -97,7 +97,7 @@ export function emptyAnnotatedDatum(
       caveatContext: "",
       expiration: "",
     },
-    index
+    index,
   );
 }
 
@@ -106,7 +106,7 @@ export function emptyAnnotatedDatum(
  * datum is a comment or not a full relationship, returns undefined.
  */
 export function toRelationshipString(
-  annotated: RelationshipDatumAndMetadata
+  annotated: RelationshipDatumAndMetadata,
 ): string | undefined {
   if ("comment" in annotated.datum) {
     return undefined;
@@ -119,7 +119,7 @@ export function toRelationshipString(
  * toFullRelationshipString returns the full relationship found, or undefined if none.
  */
 export function toFullRelationshipString(
-  annotated: PartialRelationship
+  annotated: PartialRelationship,
 ): string | undefined {
   if (
     !annotated.resourceType ||
@@ -137,7 +137,7 @@ export function toFullRelationshipString(
  * toPartialRelationshipString returns a relationship string with the given relationship's data.
  */
 export function toPartialRelationshipString(
-  annotated: PartialRelationship
+  annotated: PartialRelationship,
 ): string | undefined {
   const caveatContext = annotated.caveatContext
     ? `:${annotated.caveatContext}`
@@ -160,7 +160,7 @@ export function toPartialRelationshipString(
  */
 export function datumToAnnotated(
   datum: RelationshipDatum,
-  index: number
+  index: number,
 ): RelationshipDatumAndMetadata {
   return {
     datum: datum,
@@ -245,7 +245,7 @@ function fromColumnData(columnData: ColumnData): PartialRelationship | Comment {
 
 // relationshipToColumnData converts the given relationship into column data.
 export function relationshipToColumnData(
-  rel: RelationshipWithComments
+  rel: RelationshipWithComments,
 ): ColumnData | undefined {
   const relationship = rel.relationship;
   if (relationship === undefined) {
@@ -294,7 +294,7 @@ export function updateRowInData(
   inFlightGridData: AnnotatedData,
   dataRowIndex: number,
   newColumnData: ColumnData,
-  startingColIndex?: number
+  startingColIndex?: number,
 ): AnnotatedData {
   const adjustedData = Array.from(inFlightGridData);
   if (dataRowIndex === adjustedData.length) {