CONFIGURE?
;\n case StorageView.Perms:\n return Permissions
;\n case StorageView.History:\n return TODO... history
;\n }\n\n let src = `api/storage/read/${path}`;\n if (src.endsWith('/')) {\n src = src.substring(0, src.length - 1);\n }\n\n switch (info.category) {\n case 'svg':\n return (\n \n
\n );\n case 'image':\n return (\n \n \n 
\n \n
\n );\n case 'text':\n return (\n \n \n {({ width, height }) => (\n {\n console.log('CHANGED!', text);\n }}\n />\n )}\n \n
\n );\n }\n\n return (\n \n FILE: {path}\n
\n );\n}\n\nfunction getFileDisplayInfo(path: string): FileDisplayInfo {\n const idx = path.lastIndexOf('.');\n if (idx < 0) {\n return {};\n }\n const suffix = path.substring(idx + 1).toLowerCase();\n switch (suffix) {\n case 'svg':\n return { category: 'svg' };\n case 'jpg':\n case 'jpeg':\n case 'png':\n case 'webp':\n case 'gif':\n return { category: 'image' };\n\n case 'geojson':\n case 'json':\n return { category: 'text', language: 'json' };\n case 'text':\n case 'go':\n case 'md':\n return { category: 'text' };\n }\n return {};\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n // TODO: remove `height: 90%`\n wrapper: css`\n display: flex;\n flex-direction: column;\n height: 100%;\n `,\n tableControlRowWrapper: css`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: ${theme.spacing(2)};\n `,\n // TODO: remove `height: 100%`\n tableWrapper: css`\n border: 1px solid ${theme.colors.border.medium};\n height: 100%;\n `,\n uploadSpot: css`\n margin-left: ${theme.spacing(2)};\n `,\n border: css`\n border: 1px solid ${theme.colors.border.medium};\n padding: ${theme.spacing(2)};\n `,\n img: css`\n max-width: 100%;\n // max-height: 147px;\n // fill: ${theme.colors.text.primary};\n `,\n icon: css`\n // max-width: 100%;\n // max-height: 147px;\n // fill: ${theme.colors.text.primary};\n `,\n});\n","import { css } from '@emotion/css';\nimport React from 'react';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { DataFrame, GrafanaTheme2 } from '@grafana/data';\nimport { Table, useStyles2 } from '@grafana/ui';\n\nimport { StorageView } from './types';\n\ninterface Props {\n listing: DataFrame;\n view: StorageView;\n}\n\nexport function FolderView({ listing, view }: Props) {\n const styles = useStyles2(getStyles);\n\n switch (view) {\n case StorageView.Config:\n return CONFIGURE?
;\n case StorageView.Perms:\n return Permissions
;\n }\n\n return (\n \n \n {({ width, height }) => (\n \n
\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n // TODO: remove `height: 90%`\n wrapper: css`\n display: flex;\n flex-direction: column;\n height: 100%;\n `,\n tableControlRowWrapper: css`\n display: flex;\n flex-direction: row;\n align-items: center;\n margin-bottom: ${theme.spacing(2)};\n `,\n // TODO: remove `height: 100%`\n tableWrapper: css`\n border: 1px solid ${theme.colors.border.medium};\n height: 100%;\n `,\n uploadSpot: css`\n margin-left: ${theme.spacing(2)};\n `,\n border: css`\n border: 1px solid ${theme.colors.border.medium};\n padding: ${theme.spacing(2)};\n `,\n});\n","import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { DataFrame, GrafanaTheme2 } from '@grafana/data';\nimport {\n Alert,\n Button,\n Card,\n FilterInput,\n HorizontalGroup,\n Icon,\n IconName,\n TagList,\n useStyles2,\n VerticalGroup,\n InlineField,\n} from '@grafana/ui';\n\nimport { getGrafanaStorage } from './storage';\nimport { StorageInfo, StorageView } from './types';\n\ninterface Props {\n root: DataFrame;\n onPathChange: (p: string, v?: StorageView) => void;\n}\n\nexport function RootView({ root, onPathChange }: Props) {\n const styles = useStyles2(getStyles);\n const storage = useAsync(getGrafanaStorage().getConfig);\n const [searchQuery, setSearchQuery] = useState\n
\n )}\n \n
\n );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n return {\n secondaryTextColor: css`\n color: ${theme.colors.text.secondary};\n `,\n clickable: css`\n pointer-events: none;\n `,\n };\n}\n\nfunction getTags(v: StorageInfo) {\n const tags: string[] = [];\n if (v.builtin) {\n tags.push('Builtin');\n }\n\n // Error\n if (!v.ready) {\n tags.push('Not ready');\n }\n return tags;\n}\n\nexport function getIconName(type: string): IconName {\n switch (type) {\n case 'git':\n return 'code-branch';\n case 'disk':\n return 'folder-open';\n case 'sql':\n return 'database';\n default:\n return 'folder-open';\n }\n}\n","import { css } from '@emotion/css';\nimport React, { FormEvent, useEffect, useState } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { ConfirmModal, FileUpload, useStyles2 } from '@grafana/ui';\n\nimport { filenameAlreadyExists, getGrafanaStorage } from './storage';\nimport { StorageView, UploadResponse } from './types';\n\ninterface Props {\n setErrorMessages: (errors: string[]) => void;\n setPath: (p: string, view?: StorageView) => void;\n path: string;\n fileNames: string[];\n}\n\nconst fileFormats = 'image/jpg, image/jpeg, image/png, image/gif, image/webp';\n\nexport function UploadButton({ setErrorMessages, setPath, path, fileNames }: Props) {\n const styles = useStyles2(getStyles);\n\n const [file, setFile] = useState\n \n \n \n
\n\n {renderRoots('', roots.base)}
\n\n \n
\n Content
\n {renderRoots('content/', roots.content)}\n{file?.name}
\nA file with this name already exists.
\nWhat would you like to do?
\n \n }\n title={'This file already exists'}\n confirmText={'Replace'}\n onConfirm={onOverwriteConfirm}\n onDismiss={onOverwriteDismiss}\n />\n )}\n \n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n uploadButton: css`\n margin-right: ${theme.spacing(2)};\n `,\n});\n","import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\nimport { useAsync } from 'react-use';\n\nimport { DataFrame, GrafanaTheme2, isDataFrame, ValueLinkConfig } from '@grafana/data';\nimport { locationService } from '@grafana/runtime';\nimport { useStyles2, Spinner, TabsBar, Tab, Button, HorizontalGroup, Alert, toIconName } from '@grafana/ui';\nimport appEvents from 'app/core/app_events';\nimport { Page } from 'app/core/components/Page/Page';\nimport { useNavModel } from 'app/core/hooks/useNavModel';\nimport { GrafanaRouteComponentProps } from 'app/core/navigation/types';\nimport { ShowConfirmModalEvent } from 'app/types/events';\n\nimport { AddRootView } from './AddRootView';\nimport { Breadcrumb } from './Breadcrumb';\nimport { CreateNewFolderModal } from './CreateNewFolderModal';\nimport { FileView } from './FileView';\nimport { FolderView } from './FolderView';\nimport { RootView } from './RootView';\nimport { UploadButton } from './UploadButton';\nimport { getGrafanaStorage, filenameAlreadyExists } from './storage';\nimport { StorageView } from './types';\n\ninterface RouteParams {\n path: string;\n}\n\ninterface QueryParams {\n view: StorageView;\n}\n\nconst folderNameRegex = /^[a-z\\d!\\-_.*'() ]+$/;\nconst folderNameMaxLength = 256;\n\ninterface Props extends GrafanaRouteComponentProps\n \n {errorMessages.map((error) => {\n return \n
\n );\n };\n\n const clearAlert = () => {\n setErrorMessages([]);\n };\n\n return (\n {error}
;\n })}\n \n \n \n {canAddFolder && (\n <>\n {\n const text = isFolder\n ? 'Are you sure you want to delete this folder and all its contents?'\n : 'Are you sure you want to delete this file?';\n\n const parentPath = getParentPath(path);\n appEvents.publish(\n new ShowConfirmModalEvent({\n title: `Delete ${isFolder ? 'folder' : 'file'}`,\n text,\n icon: 'trash-alt',\n yesText: 'Delete',\n onConfirm: () =>\n getGrafanaStorage()\n .delete({ path, isFolder })\n .then(() => {\n setPath(parentPath);\n }),\n })\n );\n }}\n >\n Delete\n \n )}\n \n \n\n {errorMessages.length > 0 && getErrorMessages()}\n\n \n {opts.map((opt) => (\n setPath(path, opt.what)}\n />\n ))}\n \n {isFolder ? (\n {\n const folderPath = `${path}/${folderName}`;\n const res = await getGrafanaStorage().createFolder(folderPath);\n if (typeof res?.error !== 'string') {\n setPath(folderPath);\n setIsAddingNewFolder(false);\n }\n }}\n onDismiss={() => {\n setIsAddingNewFolder(false);\n }}\n validate={(folderName) => {\n const lowerCase = folderName.toLowerCase();\n\n if (filenameAlreadyExists(folderName, fileNames)) {\n return 'A file or a folder with the same name already exists';\n }\n\n if (!folderNameRegex.test(lowerCase)) {\n return 'Name contains illegal characters';\n }\n\n if (folderName.length > folderNameMaxLength) {\n return `Name is too long, maximum length: ${folderNameMaxLength} characters`;\n }\n\n return true;\n }}\n />\n )}\n
\n );\n };\n\n return (\n