/** * Copyright (c) Microsoft Corporation. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ import { CodeMirrorWrapper } from '@web/components/codeMirrorWrapper'; import type { SourceHighlight } from '@web/components/codeMirrorWrapper'; import { ToolbarButton } from '@web/components/toolbarButton'; import { copy } from '@web/uiUtils'; import * as React from 'react'; import type { HighlightedElement } from './snapshotTab'; import './sourceTab.css'; import { parseAriaSnapshot } from '@isomorphic/ariaSnapshot'; import yaml from 'yaml'; import type { Language } from '@isomorphic/locatorGenerators'; export const InspectorTab: React.FunctionComponent<{ sdkLanguage: Language, isInspecting: boolean, setIsInspecting: (isInspecting: boolean) => void, highlightedElement: HighlightedElement, setHighlightedElement: (element: HighlightedElement) => void, }> = ({ sdkLanguage, isInspecting, setIsInspecting, highlightedElement, setHighlightedElement }) => { const [ariaSnapshotErrors, setAriaSnapshotErrors] = React.useState(); const onAriaEditorChange = React.useCallback((ariaSnapshot: string) => { const { errors } = parseAriaSnapshot(yaml, ariaSnapshot, { prettyErrors: false }); const highlights = errors.map(error => { const highlight: SourceHighlight = { message: error.message, line: error.range[1].line, column: error.range[1].col, type: 'subtle-error', }; return highlight; }); setAriaSnapshotErrors(highlights); setHighlightedElement({ ...highlightedElement, ariaSnapshot, lastEdited: 'ariaSnapshot' }); setIsInspecting(false); }, [highlightedElement, setHighlightedElement, setIsInspecting]); return

Locator

setIsInspecting(!isInspecting)} />

{ copy(highlightedElement.locator || ''); }}>

{ // Updating text needs to go first - react can squeeze a render between the state updates. setHighlightedElement({ ...highlightedElement, locator: text, lastEdited: 'locator' }); setIsInspecting(false); }} />

Aria snapshot

{ copy(highlightedElement.ariaSnapshot || ''); }}>

; };