xref: /expo/home/menu/DevMenuTaskInfo.tsx (revision cc2b5a7f) 
1import { Row, View, Text, Divider, Spacer } from 'expo-dev-client-components';
2import React from 'react';
3import { Image, StyleSheet } from 'react-native';
4
5import DevIndicator from '../components/DevIndicator';
6import FriendlyUrls from '../legacy/FriendlyUrls';
7
8type Props = {
9  task: { [key: string]: any };
10};
11
12export function DevMenuTaskInfo({ task }: Props) {
13  const taskUrl = task.manifestUrl ? FriendlyUrls.toFriendlyString(task.manifestUrl) : '';
14  const manifest = task.manifestString && JSON.parse(task.manifestString);
15  const iconUrl = manifest && (manifest.iconUrl ?? manifest.extra?.expoClient?.iconUrl);
16  const taskName = manifest && (manifest.name ?? manifest.extra?.expoClient?.name);
17  const sdkVersion = manifest && (manifest.sdkVersion ?? manifest.extra?.expoClient?.sdkVersion);
18  const runtimeVersion = manifest && manifest.runtimeVersion;
19
20  const devServerName =
21    manifest && manifest.extra?.expoGo?.developer ? manifest.extra.expoGo.developer.tool : null;
22
23  return (
24    <View>
25      <Row bg="default" padding="medium">
26        {!manifest?.metadata?.branchName && iconUrl ? (
27          // EAS Updates don't have icons
28          <Image source={{ uri: iconUrl }} style={styles.taskIcon} />
29        ) : null}
30        <View flex="1" style={{ justifyContent: 'center' }}>
31          <Text type="InterBold" color="default" size="medium" numberOfLines={1}>
32            {taskName ? taskName : 'Untitled Experience'}
33          </Text>
34          {sdkVersion && (
35            <Text size="small" type="InterRegular" color="secondary">
36              SDK version:{' '}
37              <Text type="InterSemiBold" color="secondary" size="small">
38                {sdkVersion}
39              </Text>
40            </Text>
41          )}
42          {runtimeVersion && (
43            <Text size="small" type="InterRegular" color="secondary">
44              Runtime version:{' '}
45              <Text type="InterSemiBold" color="secondary" size="small">
46                {runtimeVersion}
47              </Text>
48            </Text>
49          )}
50        </View>
51      </Row>
52      <Divider />
53      <View bg="default" padding="medium">
54        {devServerName ? (
55          <>
56            <Text size="small" type="InterRegular">
57              Connected to {devServerName}
58            </Text>
59            <Spacer.Vertical size="tiny" />
60          </>
61        ) : null}
62        <Row align="center">
63          {devServerName ? (
64            <DevIndicator style={styles.taskDevServerIndicator} isActive isNetworkAvailable />
65          ) : null}
66          <Text type="InterRegular" size="medium" numberOfLines={1}>
67            {taskUrl}
68          </Text>
69        </Row>
70      </View>
71    </View>
72  );
73}
74
75const styles = StyleSheet.create({
76  taskIcon: {
77    width: 40,
78    height: 40,
79    marginRight: 8,
80    borderRadius: 8,
81    alignSelf: 'center',
82    backgroundColor: 'transparent',
83  },
84  taskDevServerIndicator: {
85    marginRight: 8,
86  },
87});
88