Work with apps in Release context

1
import React from 'react';
2
import { useSDK } from '@contentful/react-apps-toolkit';
3
4
const Sidebar = () => {
5
  const sdk = useSDK();
6
7
  // Complete opt-out: render nothing in release context
8
  if (sdk.release) {
9
    return null;
10
  }
11
12
  // Normal app functionality for base entries
13
  return (
14
    <div>
15
      <h3>My App</h3>
16
      <p>This app works with base entries only.</p>
17
    </div>
18
  );
19
};
20
21
export default Sidebar;

1
import React from 'react';
2
import { Paragraph, Note } from '@contentful/f36-components';
3
import { useSDK } from '@contentful/react-apps-toolkit';
4
5
const FieldEditor = () => {
6
  const sdk = useSDK();
7
8
  // Partial opt-out: show explanatory message
9
  if (sdk.release) {
10
    return (
11
      <Info variant="warning" title="Not available in releases">
12
        <Paragraph>
13
          This app is not compatible with release entries. Please edit this
14
          field in the base entry or contact your administrator.
15
        </Paragraph>
16
      </Info>
17
    );
18
  }
19
20
  // Normal field editor functionality
21
  return <div>{/* Your field editor implementation */}</div>;
22
};
23
24
export default FieldEditor;

1
import React, { useState } from 'react';
2
import { Button, Stack, Paragraph } from '@contentful/f36-components';
3
import { useSDK } from '@contentful/react-apps-toolkit';
4
5
const EntryEditor = () => {
6
  const sdk = useSDK();
7
  const [isPublishing, setIsPublishing] = useState(false);
8
9
  const isInReleaseContext = !!sdk.release;
10
11
  const handlePublish = async () => {
12
    if (isInReleaseContext) {
13
      sdk.notifier.error('Publishing is not available in release context');
14
      return;
15
    }
16
17
    setIsPublishing(true);
18
    try {
19
      await sdk.entry.publish();
20
      sdk.notifier.success('Entry published successfully');
21
    } catch (error) {
22
      sdk.notifier.error('Failed to publish entry');
23
    } finally {
24
      setIsPublishing(false);
25
    }
26
  };
27
28
  return (
29
    <Stack flexDirection="column" spacing="spacingM">
30
      {isInReleaseContext && (
31
        <Paragraph>
32
          You are editing this entry in release context: "{sdk.release.title}"
33
        </Paragraph>
34
      )}
35
36
      <Button
37
        variant="primary"
38
        isDisabled={isInReleaseContext || isPublishing}
39
        isLoading={isPublishing}
40
        onClick={handlePublish}
41
      >
42
        {isInReleaseContext
43
          ? 'Publish (Not available in releases)'
44
          : 'Publish Entry'}
45
      </Button>
46
47
      {/* Other app functionality that works in both contexts */}
48
    </Stack>
49
  );
50
};
51
52
export default EntryEditor;

1
import React, { useState, useEffect } from 'react';
2
import { TextInput, FormControl, HelpText } from '@contentful/f36-components';
3
import { useSDK } from '@contentful/react-apps-toolkit';
4
5
const CustomFieldEditor = () => {
6
  const sdk = useSDK();
7
  const [value, setValue] = useState(sdk.field.getValue() || '');
8
9
  // Handle release context
10
  if (sdk.release) {
11
    return (
12
      <FormControl>
13
        <FormControl.Label>Custom Field (Release Mode)</FormControl.Label>
14
        <TextInput
15
          value={value}
16
          onChange={(e) => {
17
            setValue(e.target.value);
18
            sdk.field.setValue(e.target.value);
19
          }}
20
        />
21
        <HelpText>Editing in release: {sdk.release.title}</HelpText>
22
      </FormControl>
23
    );
24
  }
25
26
  // Normal field editor
27
  return (
28
    <FormControl>
29
      <FormControl.Label>Custom Field</FormControl.Label>
30
      <TextInput
31
        value={value}
32
        onChange={(e) => {
33
          setValue(e.target.value);
34
          sdk.field.setValue(e.target.value);
35
        }}
36
      />
37
    </FormControl>
38
  );
39
};
40
41
export default CustomFieldEditor;

1
import React from 'react';
2
import { Card, Paragraph, Button, Stack } from '@contentful/f36-components';
3
import { useSDK } from '@contentful/react-apps-toolkit';
4
5
const EntrySidebar = () => {
6
  const sdk = useSDK();
7
8
  const handleExternalSync = () => {
9
    if (sdk.release) {
10
      sdk.notifier.warning(
11
        'External sync is not available for release entries'
12
      );
13
      return;
14
    }
15
    // Perform external sync
16
  };
17
18
  return (
19
    <Card>
20
      <Stack flexDirection="column" spacing="spacingM">
21
        <Paragraph>
22
          {sdk.release ? `Release: ${sdk.release.title}` : 'Base Entry'}
23
        </Paragraph>
24
25
        <Button
26
          size="small"
27
          isDisabled={!!sdk.release}
28
          onClick={handleExternalSync}
29
        >
30
          Sync to External System
31
        </Button>
32
33
        {sdk.release && (
34
          <Paragraph marginTop="spacingS" fontColor="gray600">
35
            Some features are disabled in release context
36
          </Paragraph>
37
        )}
38
      </Stack>
39
    </Card>
40
  );
41
};
42
43
export default EntrySidebar;